スタッフブログ

こんにちは、さいとうです。 7月になりました。 が、なんか梅雨みたいな天気が札幌では続いてますね。 北海道の旭川市～深川市～留萌市周辺地域では、記録的な大雨で一部では避難勧告も出たとか....。 石狩川（北海道で最も長い川、日本全体では3番目）が氾濫して田畑が冠水してしまったところもあるようです。 農作物の影響が心配です。 --- さて、昨年みごと自転車おじさんと化した私ですが、 今年の社員旅行が北海道内の割と近場になりましたので、社員旅行の運営部の方に許可をいただいて、 ロードバイクで行くこととなりました。 同行してくださったのは、kikuさんです。 ほんとは弊社社長も参加予定だったのですが、体調不良につき出走取消です。 今年の社員旅行の行先は「きたゆざわ 森のソラニワ」です。 北海道の方でも「え？どこそれ？」と思われるかもしれませんが、 「湯元第二名水亭」がリニューアルして「森のソラニワ」に名前が変わりました。 だいたい札幌から100kmちょっとの道のりです。 昨年からちょくちょく100kmオーバーの距離を走っていたこともあり、楽勝～！と思っていました。 そう、距離だけなら楽勝でした。距離だけなら...。 このあと地獄が待っているなんて露ほども考えてなかったんだなー。 往路 大まかなルートとしては、 札幌～恵庭～（道道16号線：支笏湖通）～（国道276号線）～（国道453号線）～森のソラニワ になります。 緩さが逆につらい「支笏湖通」 会社からいくつかのサイクリングロードを経由して、 支笏湖通の入り口までは軽快に走ることができました。 が、ここから支笏湖へ向かうこの道は、延々と緩い坂が続く登りです。 だいたい支笏湖まで17kmくらいじんわり登ります。 この程度の坂を登るのは、なんてことはないはずなのですが、 たとえ緩くても登りは登り、休むことなく上り続けるのは思っていたよりもつらいです。 第2の坂「美笛峠」 ようやく支笏湖が見えたと思ったらまた登りです。 えぇ、ほんと、足を殺しに来てるなって思いましたよ。 美笛峠は峠の名に恥じぬ坂道で、支笏湖通の緩い坂とは違い、斜度も結構きつい場所があります。 一気にペースが落ちます。 ちなみに、社員旅行の宴会のスタートが18：00～となっていたため、その時間までに到着しなければなりません。 急げば足がやられ、のんびり走れば時間に間に合わないジレンマを抱え、きつい坂を登っていきます。 それから、峠道にありがちですが、路肩側がひび割れたりして道路の状態が悪いのも影響しました。 ガタガタ道を走らなければならないため、だんだんお尻が痛くなってきます。 終盤お尻が痛くてサドルに腰を落ち着けられないのは、もうそれだけで体力を奪われます。 美笛峠区間に自家用車で参加された方に追い抜かれたりしたのですが、 つらくてつらくて下を向いて走ってたので、気づかずじまいでした。 余裕なくってスイマセン。 ラストの下り 美笛峠をやっとの思いで登りきると、ソラニワまでは下りしかありません。 「やった～最高ー」となるはずだったのですが、残り18km、時間は残り25分。 自動車ならギリギリ間に合ったかもしれません。 自転車だと下りであることを考慮しても微妙なライン...ちょっと足りない？...。 とにかく下りをぶっ飛ばします。 その日の気温が寒かったせいか、夕暮れ間際だったせいか、はたまた登りで汗かいた分が冷えたのか、 下りは寒くてだんだん体が冷たくなってきました。 下りの冷たい空気が目にあたって泣きながら駆け下ります。 kikuさんは私より早いので、私がカーブを曲がったらもう姿が見えませんでした。 そんなこんなで到着... 何とか到着しましたが、10分の遅刻...。 宴会はすでに始まっていましたが、宴会場では皆さんに温かく迎えていただき、 そこでようやく「あぁ、走ってよかったな」と思いました。 汗をシャワーで流すどころか、着替えもできないまま宴会場へ向かったため、 宴会中はずっとロードバイク用のピタピタしたウエアを着ての参加となりましたが。 激しい運動した直後だったためか、あまり食欲がなく、 宴会の美味しい食事が喉を通りませんでした。 そのため、夜寝る前にやたらとお腹が減ってしまい、なかなか寝付けない感じに。 その分、朝ご飯はたくさん食べました。 復路 社員みんなでイチゴ狩りをしてから解散となりましたが、 イチゴ狩りをした果樹園が洞爺湖にほど近かったため、 洞爺湖の南側をなめるように抜けて、留寿都を通り、中山峠を越えるルートで帰りました。 この日も寒くて中山峠では凍えるほど寒かったのですが、 定山渓まで下ってくるとほんのり暖かく、約130kmの帰り道を無事走って帰ることができました。 --- 今年は、個人的にもっと長距離にもトライしようとしているのですが、 2日連続だと前日ダメージが抜けきらないので、この辺もコントロールしないと 長距離は難しいなぁと思いました。 他にも去年計画していた自転車キャンプもやってみたいので、 機会があったらまたご紹介したいなと思います。 さいとう

こんにちは、さいとうです。 気が付けば2月ということで、相変わらず冬はスノーボードを楽しんでいます。 今シーズンは、人と滑る機会になかなか恵まれなくて、一人で滑ることが多いです。 先日、「BONX」という携帯電話の回線を利用した耳掛け型のトランシーバーの電波測定キャンペーンがありまして、 対象のスキー場の全コースを滑って計測結果を応募すると、 「BONX」オリジナルビーニー（ニット帽）が当たるというのに参加してきました。 事前に計測するスキー場を登録するのですが、札幌近郊のスキー場は抽選で漏れてしまい、 私が計測することになったのは、ルスツリゾートスキー場とニセコ グラン・ヒラフ スキー場でした。 ーーーーー はい、知っている人はもうお分かりかと思いますが、 これらのスキー場を全コース一日で滑りきるのはけっこう過酷なチャレンジです。 北海道内のスキー場としては、どちらのスキー場も最大級ですからね。 リフトやゴンドラに乗っている時間もあるので、効率の良いルートを探らなければなりません。 キャンペーンにチャレンジして思ったことは、 ＜ルスツリゾートスキー場＞ ・まず、山が3つもある。 ・しかも、その山一つ一つがそこいらの市営スキー場より格段に大きい。 ・とにかくコースが多くて、迷う。 ＜ニセコ グラン・ヒラフ スキー場＞ ・斜度がキツイ ・山頂は吹雪で前が見えない ・ファミリーでごった返しているコースがあり、ぶつかりそうで怖い ーーーーー そんなこんなで、全コース滑りきるためにご飯も食べる時間を惜しんで頑張ってみたわけですが、 ご飯を食べなかったせいか、午後には完全にバテてしまって、ふらふら下るだけになってしまいました。 さらに終盤には、完全に足に来てしまい、リフト待ちしているときにも、 プルプルと膝が揺れている状態で、だいぶ怪しい挙動だったと思います。 やっぱりね、スキー場にはグループで行くものだと思うんですよ。 仲間とね、お話しながらワイワイやるのが楽しいんです。 まぁでも普段行かないような上級者コースとかで新たな面白いコースの発見があったり、 「全コース滑るぞ！」と意気込みもあって、一人がそんなに寂しくなかったりもしましたが。 ああ、この努力が実って「BONX」オリジナルビーニーが当たるといいなー。 さいとう

こんにちは、さいとうです。 気がつけば9月！ 今年は夏の暑さが前倒しでやってきたので、お盆過ぎにはもう涼しかった印象です。 イマイチ「夏」を満喫した実感がないですね。 もうちょっと「暑い夏」を楽しみたかったなーと思います。 楽しいよ！ロードバイク楽しいよ！ 前回、ロードバイクを買ったーという話を書きましたが、 購入後、雨の日と用事があった日以外の週末は、だいたいロードバイクでどこかへ行きました。 ・豊平川河川敷 ・白石〜厚別〜北広島のサイクリングロード ・滝野すずらん丘陵公園 ・えこりん村（恵庭） ・小樽 ・羊蹄山一周（参加してくれたみんな、アリガトウ！） ・定山渓〜定山渓レイクライン〜小樽〜石狩 ・定山渓〜中山峠〜支笏湖〜札幌（昇天コースw） などなど、、、 ロードバイクを約５ヶ月乗ってみて、思いのほか身心に変化があったなーと感じます。 お腹周りがスッキリ！食べても食べても太らない！ お腹の周りについていた、なんとなく恥ずかしいポヨっとしたお肉が最近少なくなった気がします。 乗る日によっては半日くらい漕ぎ続けているので、当たり前といえば当たり前なんですけどね。 ロードバイクで出かけると、目的地に着く前にたびたび休憩して食べ物を食べるのですが、 食べても食べてもエネルギーとして使ってしまうので、全然太りません。 「美味しいもの食べたいけど、太っちゃうのは嫌だなー」と思っている方、ロードバイクはオススメですよ。 近郊の美味しいお店を巡るグルメツアーを計画しても楽しいです。 1日漕いでも筋肉痛にはなりにくい！ 競輪選手みたいによっぽどペダルを踏みしめてスピードを出さない限り、 次の日に響くような筋肉痛には不思議と襲われません。 走ったその日に、骨に近い筋肉（インナーマッスル？）がじんわりするくらいです。 もちろん、筋肉を使っていないわけではないので、 太もも、もも裏、ふくらはぎ、お尻周りと筋肉が張って固くなってきます。 日頃からよくマッサージやストレッチをするように心掛けています。 春に乗り始めた頃はズボンの太ももがきつくなるかもなーと思いましたが、 今のところ全然そんなことはありませんでした。 むしろ、直立するとひざの間が1cmくらい空いていて微妙なO脚だったのですが、 なんと、今は膝がびったりくっつくようになりました！ 気持ちが前向きになる！ 単純に体を動かしているからかもしれませんが、やる気が少しアップした気がします。 休日になんとなくダラダラしてたら夜になっちゃったみたいなことがなくなりました。 知らない道を走って景色をみたり、 長〜い坂道を太ももをプルプルさせながら登ったり、 逆に下り坂では自動車並みの速度で風を感じながら下ったり、 ただ自転車に乗っているだけなのに非日常感があって、 自然とリフレッシュできてるのかなーと感じます。 ---------- ロードバイクを始めたときに目標だった札幌〜旭川帰省や、 自転車ソロキャンプは来年にお預けになりそうですが、 それでも1日の走行距離が160kmオーバーを達成したり（定山渓〜中山峠〜支笏湖コース）、 みんなと自転車を車に積んで出かけたり（羊蹄山一周コース）、 たくさんの楽しい経験ができました。 ロードバイク初年度としては、まずまず充実したシーズンだと思います。 北海道はあと２ヶ月もすると、自転車には乗れない季節になってしまいますが、 今シーズン、もう一回みんなで出かけたいと思って、いろいろ計画中です。 （羊蹄山の次は、秋の洞爺湖一周ツアーを検討中！）           忘れてました。 今回のニッチはCSSコーナーで、連続するインライン化した要素の間にできる隙間を消す方法です。 え？何言ってるかわからない？ 連続するインライン化した要素の間にできる隙間を消す方法 例えば、こんな感じのリストがあったとして、 [HTML] <ul> <li>おはよう</li> <li>こんにちは</li> <li>こんばんは</li> </ul> CSSの ”display: inline-block;” を使って、これを横並びにしたとします。 [CSS] ul { list-style: none; } ul li { display: inline-block; backbround-color: #ddd; } わかりやすいように、li要素に背景色をつけました。 すると、こんな風に表示されると思います。 ね？ <li>要素の間にほんの少し隙間ができるでしょ？ この隙間を消して、こんな風に隙間を無くしたいと思います。 方法はいくつかあります。   （１）CSSでインライン化をやめてfloatする [CSS] ul { overflow: hidden; list-style: none; } ul li { float: left; backbround-color: #ddd; } 横に並べる方法を問わないのであれば、この方法が手っ取り早いです。 <li>がフロートしたことにより、<ul>の領域が確保できないので <ul>に ”overflow:hidden;” を当てています。 ちょっと前でいうところの ”clearfix” ってやつですね。   （２）HTMLで<li>タグの間に改行を入れない [HTML] <ul> <li>おはよう</li><li>こんにちは</li><li>こんばんは</li> </ul> こんな方法でも、隙間は消えます。 一列に並べると可読性が・・・という方は、 [HTML] <ul> <li>おはよう</li><!-- --><li>こんにちは</li><!-- --><li>こんばんは</li> </ul> こんなふうに</li>と次の<li>をHTMLのコメントタグで隠すようにしてあげれば 改行しても隙間は消えます。 さて、様々な制約で（１）、（２）の方法が使えない時、 これから紹介する第３の方法でも対応できます。   （３）<ul>要素のフォントサイズを ”0” にする どうもこの隙間って、<li>要素と要素の間の改行が関係しているようです。 （２）であれ？と思った方は鋭いです。 そこで、CSSで<ul>要素のフォントサイズを ”0” にしてみます。 [CSS] ul { list-style: none; font-size: 0; } ul li { display: inline-block; backbround-color: #ddd; } どうですか？隙間は消えましたか！ でも文字も消えてしまいましたねw <li>要素のフォントサイズを元に戻します。 [CSS] ul { list-style: none; font-size: 0; } ul li { display: inline-block; backbround-color: #ddd; font-size: 16px; } フォントの大きさの変更だけで、隙間をなくすことができました。 あまり使う機会があるかというと微妙ですが、機会があればお試しあれ。 さいとう

こんにちは、さいとうです。 前回はスノーボードの記事を書きましたが、もうすっかり春になってしまいました。 北海道はGWまで営業しているスキー場もいくつかありますが、 春スキー特有のザラメ雪を楽しめるかは好みが分かれるところですね。 （私はそれなりに春の雪質も好きです。ボードが汚れるのがちょっとアレですが。） ロードバイク始めました。 スノーボードのシーズンが終わると、例年は近隣のちょっと大きめな公園とかに行って、 カメラ片手に桜や梅などを見たりしてブラブラしていたのですが、 今年はロードバイクを始めようと思います。 ここ数年、ロードバイク市場は若者のクルマ離れなのか、人気漫画の影響なのか、 ホントのところはよく知りませんが、大変盛り上がっているようですね。 私がロードバイクを始めようと思ったきっかけは、冬のバックカントリー体験が影響しています。 ・冬にバックカントリーを体験する 　↓ ・雪山でも大丈夫な装備を揃える 　↓ ・雪山装備はキャンプ用具に通じている 　↓ ・キャンプにも興味を持つ 　↓ ・今年はキャンプもしてやろう！ 　↓ ・バックカントリーなら車でキャンプは無しだよね？ 　↓ ・リュックでキャンプ用具を背負って、自転車で行けばいいんじゃない？ 　↓ ・自転車も買うか！ なんだか自転車を買った理由がもう無理筋の気がしますが、 そんなわけでロードバイクを買いました。 週末は近所の豊平川沿いで練習しています。 まだビンディングもうまく嵌められないヒヨコですが、 最終的には札幌から旭川まで（片道約150km）を自転車で走ってきたいと思っています。 さてさて、いつになるのやら。 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜 あー、今回もニッチはCSSはお休み、、、と思ったのですが、 今しがたトラブったことをメモっておこうかと。 IE8がサポートから外れたことで、すごく便利なCSSの書き方が遜色なく使用できる状況になりました。 [CSS] .navi { width: calc(100% - 20px); } ご覧の通り、”calc”という記述の仕方で、今までできなかった数値を計算できます。 最新の各ブラウザは対応していて、IEもIE9以降であれば使用できます。 （ただし、計算を入れ子にするのは対応しているブラウザとそうでないブラウザがあるので注意！） IE9で利用できるのはいいですよね。 調子に乗って使って見たところ、あれ？ 表示が崩れている？ calcが効いていない箇所がいくつか出てきました。 原因は、display:table; によってテーブル化されたタグに calc は使えないってことのようです。 display:table; はすごく便利なんですが、 その振舞いが特殊なのでCSSを当てたりする時におかしな動きをすることが多いです。 display:table; を当てているタグに calc を使用したい場合は divなどで囲ってやり、そのdivに対して calc を効かせるととりあえずはトラブルを回避できます。 使い方に気をつければ、普通に実装してもOKな感じなので、お試しあれ。 ーーー さいとう

こんにちは、さいとうです。   気付けば12月。景色も完全に真冬のそれになりましたね。 ここ数年は、根雪になるのが早くなった気がします。 そんな訳で、雪が降れば、、、やっぱりこれでしょう！     そうです！ウインタースポーツの季節が到来しました！   私は、おもにスノーボードを楽しんでいるのですが、 先日、前田社長に「バックカントリー行かない？」と誘われました。     私の第一声は「マジですか〜！？」です。   バックカントリーとは   バックカントリーとは、いわゆるスキー場のように整地された場所を滑るのではなく、天然の雪山を滑るというものです。 便利なリフトもロッジもないどころか、まともな道すらありません。 スノーシュー（かんじき）を履いて、スキーやスノボを道具を持って、ひたすら数時間も道無き道を歩きます。 （雪山を歩いて登ることを「ハイク」といいます。） それに引き換え、下る時はあっという間です。 数時間雪山を登っても、スキー場でゴンドラに一回乗ったくらいしか滑れないでしょう。   これだけ聞くと、楽しいというより苦行です(w 滑るよりも登る方が圧倒的に長い時間を要するので、スキー場に行く感覚で参加すると痛い目に合うのが眼に見えています。 でも、キャンプで作ったカレーライスが最高に「うまい！」と思うように、 便利や快適から少し離れて、苦労して達成することもまた楽しみの一つです。   天然の雪山を滑るのは、とても魅力的です。 誰も滑っていない、まっさらのパウダースノーを堪能できます。 すでにスキー・スノーボードなどを楽しんでいる方には説明するまでもありませんが、 新雪を滑る時の浮遊感は、何ものにも代えがたい楽しさがあります。   バックカントリーの装備 人の手の入っていない雪山を行くわけですから、しっかりと装備を整えないと冗談抜きで死にます。   バックカントリーの装備で真っ先に上げられるのが、雪崩に巻き込まれた時に助ける（助けてもらう）ための「アバランチキット」です。 アバランチキットとは、一般的に以下の三点を指します。   ・ビーコン ・プローブ（ゾンデ棒ともいう） ・シャベル   ビーコンは、身につける発信・受信器で、ひとり一つずつ装備し、40〜50mくらいの範囲でお互いの位置を確認できます。 万が一、雪崩に巻き込まれ雪の下に埋もれてしまっても、このビーコンの信号をもとに探索・救助することができます。   プローブは、折りたたみ式の探り棒で、伸ばした状態だと240cm~300cmくらいになります。 この棒を雪の中に突き刺し、ビーコンで発見した雪崩で埋まった人を確認します。 また、積雪や穴の深さを計ったり、歩いても大丈夫な場所か探りを入れる時にも使います。   シャベルは、埋まった人を掘り起こす時に使います。 持ち運びしやすい折りたたみ式、または分解してコンパクトにできるものが多いです。 また、吹雪などで一時避難するとき、雪洞を掘るのにも使います。   「雪崩になんて滅多に会わないだろう」と思うかもしれませんが、巻き込まれれば一巻の終わりですからね。 アバランチキットは、バックカントリーの「三種の神器」と呼ばれています。 雪山での命綱だと考えれば、そう呼ばれる意味がわかるでしょう。   ーーー   スキー場では寒くなったらロッジに逃げ込めば寒さをしのげますが、 バックカントリーに逃げ場は無いので、徹底的な防寒対策が重要です。 特に、山をハイクする時は汗だくになりますが、その汗が冷えて我慢できない寒さに感じると、 もう動けなくなってしまって、最悪の場合、遭難することになります。 そうならない為に、上手に重ね着する必要があります。（「レイヤリング」といいます。）   レイヤリングは主に3つの重ね着で行います。   ・ベースレイヤー（汗を速やかに吸収・発散し、体を冷やさない） ・ミドルレイヤー（ベースレイヤーが発散した汗を蓄え、体を保温する） ・アウターレイヤー（風雪から体を守る防風・防水仕様、スキー・スノボウェアでOK）   特にベースレイヤーが担当する「自分の汗で体を冷やさない」というのが重要らしく、 ここを着替えるだけで雪山での快適度が格段に違うそうです。 アウトドア用のベースレイヤーが販売されていますので、こちらを着るのが間違いないです。 （ユ○クロのヒー○テックのような温感肌着はNGだそうで、汗を吸って発熱するけれど、汗を拡散できなくなって寒く感じるとのこと） ミドルレイヤーも温かいフリースの他にもう一枚、軽量のダウンジャケットもあると、いざという時助かります。   バックカントリーは行かないけどスキー場には行くっていう人にも使える技術なので、試してみてはいかがでしょうか？   ーーー   その他、バックカントリー中に食べる「飲料水・食料（行動食）」も必要になりますし、 行動食とは別に遭難時に備えて「非常食」も用意した方がいいでしょう。 怪我をした時に必要な「メディカルキット」やトイレ関連の「アメニティグッズ」、 サングラスや地図・コンパス、暗くなったときの為のヘッドライト、各種装備のスペアなどなど。 そして、これらを格納できるリュック。   道具を揃えるだけでも結構大変です（お財布的にも）。 でも、こういう新しいことを始める時にいろいろAmazonとかで調べるのは楽しいですね。         そんな訳で、チョロチョロっと準備をしています。 というかアバランチキットはもう用意しました。 今シーズンは、ヘヴィーな雪山体験ができたらいいなと思っています。     あー、いつも書いていたCSSのニッチな情報はまた今度。   ーーー さいとう

こんにちは、さいとうです。 先月7月31日、都知事選でメディアが盛り上がる中、とてもショッキングなニュースがありました。   「九重親方（元横綱 千代の富士）、死去」   ネットのニュースで見た時、何の冗談かと思いましたが、、、嘘であってくれと思いましたが、、、残念ながら本当でした。。。 アラフォー世代ならわかると思いますが、物心ついたころから大相撲で「横綱」といえば「千代の富士」でした。 力士といえば、テレビで見ていると「大きくて太った人」にしか見えない（実際の力士はスゴいですよ！体の厚み・大きさに圧倒されます！）のですが、千代の富士はローマの彫刻のような肉体美にくわえて、キリッとシャープな顔つきで、あだ名が「ウルフ」！それはすごい人気でした。   これからも未来の大関・横綱を育ててくれると思っていたんですが。 とくに北海道出身力士は現在幕内にはおらず、壊滅的な状況ですので。 享年61歳。早すぎるよ、ウルフ。。。ご冥福をお祈りいたします。   横綱「千代の富士」を偲びたい、もっとよく知りたい方に最適な施設をご紹介します。 横綱千代の山・千代の富士記念館 道南の松前町の隣にある福島町にその記念館はあります。千代の富士の出身地です。 同じく福島町出身の「千代の山」（北海道初の横綱です！）と千代の富士の銅像がお出迎えしてくれます。 札幌からはちょっと遠いですが、北海道新幹線の観光がてら、偉大なる昭和最後の大横綱の足跡を辿ってみてはいかがでしょうか？   ーーー さて、気を取り直して。 前回は擬似要素、擬似クラスについてざっくりと書きましたが、座学的な内容だったのでイマイチわかりにくかったと思います。 というわけで、以降はこれらの使用例を挙げていきたいと思います。 煩雑なHTMLを記述しないと構築できなかったデザインが、スッキリまとまりますよ。 指定した番目で改行 よく同じようなコンテンツのブロックがマス目状に繰り返すデザインがあります。 ショッピングサイトの商品一覧とか、コンテンツの目次などで見かけたことありませんか？ とりあえず、今回は繰りかえすコンテンツを[:nth-child]を使っての整列してみます。 例では contentBlockクラス を持つ ul要素の li要素 を一つのブロックに見立てて そのブロックをcssのfloatを使って2列で折返すようにしてみましょう。 [HTML] <ul class="contentBlock"> <li> <h2>タイトル01</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h2>タイトル02</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h2>タイトル03</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h2>タイトル04</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h2>タイトル05</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> <li> <h2>タイトル06</h2> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </li> </ul> [CSS] ul.contentBlock { overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.contentBlock li { float: left; width: 280px; background-color: #EEEEEE; border-top: 2px solid #FF9900; margin-left: 20px; margin-top: 40px; } あー、やっぱり。。。 単純にfloatをしただけでは、ブロックの高さが違う時に表示が崩れる場合がありますね。 せめて行ごとに頭揃えすると見栄えが良くなると思います。 このような場合は、[:nth-child]を使うのが最適です。 2列の時は、奇数のブロックがが必ず左側になるので、奇数個目のブロックに CSSで clear:both; を当てて、 強制的に奇数個目のブロックを改行してみます。 ついでに横に並んだときのスペースを空ける為に指定している margin-left:20px; は左の列には必要ないので取ってみます。 [CSS] ul.contentBlock { overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.contentBlock li { float: left; width: 280px; background-color: #EEEEEE; border-top: 2px solid #FF9900; margin-left: 20px; margin-top: 40px; } ul.contentBlock li:nth-child(2n+1) { clear: both; margin-left: 0; } li要素に :nth-child を指定しました。 :nth-childの後ろの（）に数式が入っていますが、これが何番目かを指定する式になっています。 今回2列に整列する為に奇数番目で改行する指定をするため、”2n+1”という数式を入れました。 nというのが任意の数字で、0から1、2、3というふうに整数が入ります。 nが0の時に1、nが1の時に3、nが2の時に5といった感じで、奇数を指定できます。 ちなみにもっと簡単に :nth-child(odd) と書いても奇数を指定できます。 偶数を指定する場合は、:nth-child(2n) または、 :nth-child(even) で指定できます。 きれいに整列できましたね。 ただ、2段目以降のブロックが上のブロックとくっ付きすぎないよう、li要素に margin-top:40px; が当たっていますが、 1段目には必要ないので、これも取ってみましょう。 [CSS] ul.contentBlock { overflow: hidden; list-style: none; margin: 0; padding: 0; } ul.contentBlock li { float: left; width: 280px; background-color: #EEEEEE; border-top: 2px solid #FF9900; margin-left: 20px; margin-top: 40px; } ul.contentBlock li:nth-child(2n+1) { clear: both; margin-left: 0; } ul.contentBlock li:nth-child(-n+2) { margin-top: 0; } 追加したnth-childの数式は (-n+2) になっています。 nが0の時は2、nが1の時は1、nが2の時は0になり、それ以降はマイナスの数字になってしまいますので、つまりは先頭から2番目の要素までCSSが適用されます。 先頭から3番目までの要素に適用したい場合は、(-n+3),先頭から10番目までの要素に適用したい場合は、(-n+10)になります。 逆に先頭から何番目かを飛ばして、例えば3番目以降とか指定する場合は、、、そうです！（n+3）になります。 今回は、:nth-child を使った整列をしてみました。 このように数式を使って指定するCSSは珍しいので、覚えておくといいと思います。 さいとう

こんにちは、さいとうです。 前回は、「擬似要素[::before]や[::after]にて特殊文字・機種依存文字を表示する方法」を紹介しましたが、 ［擬似要素］には他にも種類がありますし、［擬似クラス］というのも存在します。 CSS3を使ってスマートにウェブサイトをコーディングするには、これらをうまく使用することが不可欠です。 あぁ、今回も普段の生活ではおよそ接点の無いCSSの話ですね。コーディング関係ない人は 北海道名菓「白い恋人」のパッケージにもなっているオタトマリ沼から見た利尻富士の写真を見たあとでそっ閉じです。 擬似要素 前回紹介した［::before］や［::after］の他にはどんな擬似要素があるんでしょうか？ 擬似要素には以下の種類があります。 ::before …指定した要素の前にコンテンツ（テキストなど）を挿入する ::after …指定した要素の後ろにコンテンツ（テキストなど）を挿入する ::first-letter …指定した要素の最初の文字にCSSを適用する ::first-line …指定した要素の最初の行にCSSを適用する 直接HTMLにタグで指定すること無く、CSSで擬似的に指定した要素の一部に対して影響をあたえるので “擬似要素”というようです。 CSS3では指定する時にダブルコロン（::）をつけて使用します。 ですが、一部のブラウザではシングルコロンでしか動作しないため、シングルコロン（:）での使用が無難です。 正直、［::before］と［::after］以外は、ほとんど使わないと思います。 海外では［::first-letter］は一般的かもしれませんが、日本ではあまり使わないですしね。 ［::first-line］も使いどころに困る感じです。 擬似クラス 擬似要素の他にも擬似クラスというのもあります。 擬似クラスにはどんなものがあるのでしょうか。 :link :visited :hover :active :focus :checked :enabled :disabled :first-child :last-child :nth-child :nth-last-child :nth-of-type :first-of-type :last-of-type :empty :target :not うわ、面倒くs… いっぱいありますね。 指定した要素全体に対して影響をあたえるので、CSSのクラスのように振る舞うことから“擬似クラス”といいます。 全部説明するのは大変なのでザックリ説明すると、 ［:link］［:visited］［:hover］［:active］は、ご存知の通り リンク指定する時に使用します。 ［:hover］は<a>タグ以外にも使用する時があります。 例えば、入れ子のリスト<ul>を使ってCSSのみでドロップダウンメニューを作る時に、 ul.dorpmenu li > ul { display: none;} ul.dorpmenu li:hover > ul { display: block;} とすれば、親のリストにオンマウスした時にその子階層リストが表示される仕組みです。 ［:focus］［:checked］［:enabled］［:disabled］は、主にフォーム関連の指定で、 それぞれ「フォーカスが当たった時／チェックボックスがチェックされた時／フォームが有効な時／フォームが無効な時」になります。 ［:first-child］［:last-child］［:nth-child］［:nth-last-child］は、指定したタグの順番を指定してCSSを適用します。 それぞれ「最初のタグ／最後のタグ／最初から数えて○番目のタグ／最後から数えて○番目のタグ」となります。 ［:first-of-type］［:last-of-type］［：nth-of-type］は、ちょっと説明しにくいですが、 親要素タグの中に内包するの子要素の種類ごとに「最初の要素／最後の要素／○番目の要素」に適用します。 何を言ってるのか わからねーと思うが、おれも何を言っているのか わからなかった… 冗談はさておき、具体的な例をとして、 ［HTML］ <div> <p>あ…ありのまま 今　起こった事を話すぜ！</p> <p><em>『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』</em></p> <p>な…　何を言ってるのか　わからねーと思うが おれも何をされたのかわからなかった…</p> <p>頭がどうにかなりそうだった…</p> <p><span>催眠術</span>だとか<span>超スピード</span>だとか そんなチャチなもんじゃあ　断じてねえ</p> <p>もっと恐ろしいものの片鱗を味わったぜ…</p> </div> ［CSS］ div :first-of-type { color: red;} と指定すると、 親要素<div>の中にある子要素の種類は<p>、<em>、<span>とありますが、 それぞれ最初に登場するのは、 <p>あ…ありのまま 今　起こった事を話すぜ！</p> <em>『おれは奴の前で階段を登っていたと思ったらいつのまにか降りていた』</em> <span>催眠術</span> なので、これらの文字にCSSが適用されます。 あぁ、説明が長くなりました。もう少し。 ［:empty］は要素の中が空の時にCSSを適用、 ［:target］はページ内リンク等の“#“がついているリンク先の要素にCSSを適用、 ［:not］は指定した要素以外にCSSを適用します。 ［:link］［:visited］［:hover］［:active］［:focus］［:first-child］ は、従来から各種ブラウザに対応していましたが、他はCSS3となりますので、古いIEでは対応していない場合が多いです。 それでも、「偶数ごとに〜」とか「４の倍数ごとに〜」とかを指定できる［:nth-child］と、 フォームを使いやすく装飾できる［:checked］［:enabled］［:disabled］などは、 ブラウザ対応の条件次第で、これからどんどん使われていくことになると思います。 擬似要素と擬似クラスを同時に使う 場合によっては擬似要素と擬似クラスを同時に指定することもあります。 例えば、リストの最初の項目の冒頭にコンテンツを挿入する場合は以下のように記述します。 li:first-child::before { ~ } ［:first-child］が［::before］の前にありますね。 このように同時に記述する場合は、擬似クラスを擬似要素の前に書きます。 覚えておくと役に立つこともあるかもね。 うーん、説明のみだとその便利な感じが上手くお伝えできてない感じなので、 次回はこれらを使っておもしろい装飾の例を挙げてみたいと思います。（忘れてなければね）   さいとう

こんにちは、さいとうです。 えー、これからCSSのとってもニッチなことについて語らせていただきますので、 興味の無い方はこちらの写真で和んでから、そっとページを移動してください。 −−− 擬似要素[::before]や[::after]は、指定した要素内の前後に文字を挿入するCSSです。 言葉で書いてもわかりにくいですね。 [html] <p class=“text”>おすすめアイテム</p> [css] p.text::before {   content: “【NEW】”; } これをブラウザで表示した結果は、 【NEW】おすすめアイテム といった具合に、表示結果を見ると「おすすめアイテム」というテキストの前に「【NEW】」のテキストが挿入されています。

−−− では、「【NEW】」の代わりに「>」（半角の大なり記号）を入れてみましょう。 「>」はhtmlにおいてタグを指定する時に使用するため、サニタイズ（エスケープともいいます）します。 「>」をサニタイズすると「&gt;」となります。 [css] p.text::before {   content: “&gt;”; } 結果は、、、 &gt;おすすめアイテム 、、、上手く表示されませんね。 サニタイズしたテキストがそのまま表示されてしまいました。 単純なサニタイズでは表示できないようです。 これを表示するには、別の方法でサニタイズする必要があります。 その方法をご紹介します。（前フリが長くてスイマセン） −−− 以下がその手順です。 （1）サニタイズする文字列は16進数で数値文字参照を行う。 （2）& を \（バックスラッシュ）に変更する （3）#とxをそれぞれ0に変更する（または削除する） （4）;（セミコロン）を削除する 面倒くs…、手順が多いですね。 こちらもわかりにくいので、“>”を例に（1）〜（4）の手順を実践してみましょう。 （1）サニタイズする文字列は16進数で数値文字参照を行う。 いきなり何言っているのか不明な感じですが、ザックリ言うと文字を数字に置き換えるということです。 その際16進数の数字に置き換えるのでアルファベットが混じった数値になります。 16進数は（0123456789ABCDEF）で桁が繰り上がる数字です。 “>”を変換すると“&#x3e;”になります。 16進数で数値文字参照を行うには、こちらのサイトなどで簡単にできます。 ※「[3] 文字列を16進数数値文字参照に変換」で変換してください。 （2）& を \（半角バックスラッシュ）に変更する

変換した“&#x3e;”の“&”の部分を\（半角バックスラッシュ）に変換すると、“\#x3e;”になります。

〜半角バックスラッシュが入力できないという方〜 おそらく、たくさんいらっしゃるのではないかと思います。。。 Windowsでは和文フォントに半角バックスラッシュが含まれていないので入力することができません。 一般的なWindowsキーボードの「ろ」キーで、半角バックスラッシュにあたる“¥”を入れておくと良いでしょう。 （3）#とxをそれぞれ0に変更する（または削除する） 変換すると“\003e;”になります。 ふう、あと少しです。 （4）;（セミコロン）を削除する 削除すると“\003e”になります。 これをCSSに入れてみましょう。 [css] p.text::before {   content: “\003e”; } さあ、表示結果は、、、 >おすすめアイテム 今度は、上手く表示されましたか？ あまり使う機会は無いかもしれませんが、 ♥ ハートマーク（\002665）とか、 ♨ 温泉マーク（\002668）とか、 〠 郵便マーク（\003020）みたいな特殊な記号も表示できるんです。 Webフォントもじわじわと浸透してきていますが、フォントを読み込むためページの表示が重たくなりがちです。 一般的な用途の記号マークであればこの手法でも十分対応できるので、試してみる機会はあるかもしれませんよ。 −−− 擬似要素[:before]や[:after]をサポートするブラウザは、 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IEがIE8以上となっていますが、その他はほとんどすべてのモダンブラウザ対応しています。 一般的に使用しても問題ないと言えますね。 ただし、IE8は記述の仕方が他のブラウザと同じではありません。 CSS3において擬似要素を指定する時は beforeの前に“:”が2つ付きます。 p.text::before { color: #FFF;} しかし、IE8はCSS3に対応していないので、CSS2の書式で書く必要があります。 p.text:before { color: #FFF;} モダンブラウザではCSS2の書式でもとりあえず表示されますので、 IE8が主要ブラウザから外れるまでは、CSS2の書式で書いておいた方が無難かもしれません。 IE8の正式サポートは2016年1月までとなっていますので、IE8が開発環境から外れるのもそう遠くない未来ではないでしょう。 Web制作者をさんざん苦しめたIEがこれからどんどん少なくなるのは、嬉しいような少し悲しいような、、、時代の流れを感じます。 IE対応から解放されると思っているWeb制作者の皆さん、おめでとうございます！ これからは AndroidのデフォルトブラウザがIE亡き後の「困ったちゃんブラウザ」の称号を引き継ぐと思われますので、 今後とも一緒に四苦八苦しましょう。 さいとう