三男パパのHP更新奮闘記

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--:-- | EDIT | TOP

<dl><dt><dd>を使った横並びリストと隣接兄弟セレクタ



アホみたいに暑い日が続きますが、皆さまいかがお過ごしですか。

最近コーディングが楽しくて楽しくてしかたがない三男パパ(@knob_papa)です。
ご無沙汰しています。

さてさて、ここ最近、オムライス部*1仲間のWebクリエイター@woot_radioさん(近影=ビックリマン風シール画像*2)に、Facebookのメッセージを介していろいろとHTMLやらCSSの深いところを教授してもらっています。そこで初めて知った<dl><dt><dd>タグ(深くない?w)を使って簡易的な表を作ろうとしているときに、隣接兄弟セレクタなるものを習得したので、忘れないようにという備忘録的エントリを。

… のつもりだったのですが、書いているうちにノリノリになってきて、めっちゃ長くなっちゃいましたw

HTMLと最終目標形

タグ名を覚えるには、それぞれのタグが何の略語かということを知るのがいちばん手っ取り早いと思っています。今回はそれぞれ、dl=definition list、dt=definition term、dd=definition description です。これでもう絶対に忘れることはありませんw

では、まずはHTMLから。
<dl>
	<dt>アクセス</dt>
	<dd>★</dd>
	<dt>蔵書数</dt>
	<dd>★★★★★</dd>
	<dt>快適さ</dt>
	<dd>★★★</dd>
</dl>
これを素のまま(CSSを適用せずに)表示するとこんな感じになります。
アクセス
蔵書数
★★★★★
快適さ
★★★

こいつを使って、最終的にこんな表を作ってみようというわけです。
アクセス
蔵書数
★★★★★
快適さ
★★★

<dl><dt><dd>とfloatを使った横並びリスト

まずは、"float: left"を使って<dt>の右側に<dd>が回り込むようにします。

このときのポイントは、セレクタdt内に回り込み解除のプロパティ"clear: both"(この場合は"float: left"しか設定していないので"clear: left"でもOK)も記述するという点です。もちろんこれは、自身の回り込みを解除するのではなく、1つ前のセレクタdtの回り込みを解除するという役割を持たせるためです*3

で、最終<dt>の回り込みを解除するために<dl>にもclear属性を設定。<dd>にはデフォルトでmarginが設定されているのでそれを0に。第1段階はこれで完了です。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
}
dd {
	margin: 0;
	padding-left: 7em;
}
ここまででできればこんな具合になります。
アクセス
蔵書数
★★★★★
快適さ
★★★
次は、こいつにborderを設定していきます。

疑似クラス:last-childを使おうとするも…

上に示した最終形を見ればお分かりの通り、最終的には、
  • 周りのborderは2px
  • 行間と列間のborderは1px
という表にします。

ここで何も考えずに、セレクタdlに"border: 2px solid #ddd;"というプロパティを、セレクタddに"border-bottom: 1px solid #ddd;"というプロパティを追加してみると…
(本題と関係ありませんが、セレクタdtに"border-right: 1px solid #ddd;"も追加しています)
アクセス
蔵書数
★★★★★
快適さ
★★★
こんな表ができあがります。
ですが… 表示がおかしいのがわかりますか?

dlに設定したborderと、最下部のddに設定したborder-bottomとが合わさって、表の最下部だけ3pxのborderになってしまっています。もちろん、dlのborderを各辺ごとに設定すれば解決するのですが(最初はそうしていました)、いまいちスマートじゃないですよね…。

ここで思い出したのが、かの神サイト「ドットインストール」で教わった疑似クラス:last-childでした。「これ使えるんじゃね?」と喜び勇んで書いたCSSがこちら。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	border: 2px solid #ddd; /*追加プロパティ*/
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
	border-right: 1px solid #ddd; /*追加プロパティ*/
}
dd {
	margin: 0;
	padding-left: 7em;
	border-bottom: 1px solid #ddd; /*追加プロパティ*/
}

/*疑似クラスを使って追加したセレクタ*/
dd:last-child {
	border: none;
}
カ・ン・ペ・キでした!

Google ChromeやFirefoxでは…。

敵はIE

な、なんですって!?
IE(Microsoft Internet Explorer)では疑似クラス:last-childが使えないですと!?

話の展開的に大方の予想はついたかと思いますが、またまた「敵はIE」状態です。Windows XPに搭載されているIE8でさえも疑似クラス:last-childが使えないというんですから、これはもう完璧にお手上げ状態です。

困り果ててTwitterでつぶやいたところ、またまた神降臨。これまたしょっちゅうCSSに関するアドバイスをくださる@cazukiさんが、ご自身のブログエントリを紹介してくださったのです*4
How nice of those around me!!

該当エントリをお読みになればわかるかと思いますが、私が入り込んでしまった袋小路から脱出する方法が詳細に載っています。というか、<ul>と<dl>の差違だけで、それ以外はほぼ同じ状態です。「今度こそ解決だ!」と信じて疑わなかったこのときの私を誰も責めることはできないでしょう…。

最後の罠

さて、@cazukiさんのエントリを読んでもうトンネルを脱出した気になっていた私は、意気揚々と<dd>のborder-bottomをborder-topに変更し、CSSの最後に"dd:first-child { border: none; }"と書き加えました。これでバッチリと鼻歌交じりにプレビューしたところ…
アクセス
蔵書数
★★★★★
快適さ
★★★
なぬぅぅぅ???
今度は最上部のborderだけが3pxになっちゃってます。
えっ!? dd:first-childはどこに行っちゃったの!?
(言葉を失いその場に呆然と立ち尽くす四十男子…)

ええ。もちろん調べましたとも。
その前に30分ほど無駄な試行錯誤をしたことは誰にも言えませんがねw
で、ようやく以下の結論に到達。
<dl>内では<dt>と<dd>に区別はなく、両方とも同じ子要素として扱われる。したがって、dt:first-childとdd:last-childは存在するが、dd:first-childとdt:last-childというのはあり得ない。
疑似クラスタさん、いったいどういうことですか?いくら似ているからって、<dt>と<dd>を区別しないなんて…。まるで、一卵性双生児を1年間教え続けたにもかかわらず、結局区別できないまま終わってしまった私みたいじゃないですか!w

困りましたね…。せっかくあと一歩のところまで来たのに、これじゃ結局元の木阿弥です…。

隣接兄弟セレクタ

ここであきらめきれない私は、さらにググること数十分。ついに、発見しました!
隣接兄弟セレクタ
CSSに「A + B { プロパティ: 値; }」と表記することにより、セレクタAの直後にあるセレクタBにのみプロパティを適用することができる
いやー、まったく知りませんでしたよ*5
でも、これで今度こそ本当に解決です。

ということで、最終的なCSSがこちら。
dl {
	clear: both;
	margin-top: 10px;
	width: 13em;
	border: 2px solid #ddd;
	background-color: #fff;
}
dt {
	float: left;
	width: 4em;
	clear: both;
	padding: 0 1em;
	border-right: 1px solid #ddd;
}
dd {
	margin: 0;
	padding-left: 7em;
	border-top: 1px solid #ddd; /*border-bottomから変更*/
}

/*追加した隣接兄弟セレクタ*/
dt:first-child + dd {
	border: 0;
}
いやぁ、おかげさまでかなり濃密な時間を過ごせましたよw

まとめ

ということで、今回のまとめ。
  • <dl>中では、<dt>も<dd>も同じ子要素として認識されているので、first-childは<dt>しかあり得なく、last-childは<dd>しかあり得ない
  • floatは相変わらず難しい
  • 隣接兄弟セレクタはぜひ覚えておくべき!
  • IEなんてこの世から消え去ってしまえばいいのに!w
  • みんな!Chromeにしようよ!

なお、今回新たに覚えたテクニックを使ったページはこちらです。ぜひご覧になってみてください。

編集後記

それにしても、コードをブログ内に記述するのは、なかなの手間ですねぇ。もっとスマートな方法があるような気もするのですが…。初めて<pre>というタグを知ったのはなかなかの収穫でした。また、こういう複雑なエントリを書くときは、やはりテキストエディタ*6が便利ですねぇ。つくづく実感しました。

そういえば、「HTML&CSSとの闘い」などとブログサブタイトルで謳っているくせに、HTMLやCSSに関するエントリは初ですなw ひどいwww

興味がない人にとってはちんぷんかんぷんなエントリだとは思いますが、私の大好きな言葉"ペイ・フォワード(Pay it forward)*7"的な役割を果たせるエントリになれば幸いです。

追記:2012.07.18

Facebookで@cazukiさんから「ブログ内でソースコードを書くなら、SyntaxHighlighterを使うのがいいですよ」というアドバイスを頂き、SyntaxHighlighterを導入してみました。これはすごい!ソースコードが格段に見やすくなりましたね!
ちょっとググれば素人でも簡単に導入できるイージーさですので超おすすめです!
@cazukiさん、アドバイスありがとうございました!

*1 :
TwitterやFacebookで知り合ったオムライス好きの人たちが集まって、みんなでオムライスを食べに行くという、類い希なる部活動です。部長はケータイカイガーの@nenzabさん。私は結構な頻度で参加しているのですが、まったくエントリを書いてません!w 食べ終わったら満足しちゃうんですよねwww ま、そのうちに。
*2 :
@woot_radioさんオリジナルのビックリマン風キラキラシールです。かなり本人そっくりですw キラキラしているためスキャンが非常に難しかったです。本物のシールはもっときれいですよ。
*3 :
偉そうに書いていますが、この回り込み解除に関してはすべて@woot_radioさんに教わった内容の受け売りですw
*4 :
そのあとで「あとはieをぶっちするとか…」というWebクリエイターらしからぬリプライをくださったのはナイショってことでw
*5 :
私はHTML・CSSともに完全に独学で勉強したのですが、調べてみたところ、やはり私が使っているCSSハンドブックには載っていませんでした。これはいろんなところで応用できそうなセレクタ指定方法ですね。
*6 :
現在、テキストエディタはNoEditorというフリーソフトを、HTMLエディタはez-HTMLというフリーソフトを使っています。
*7 :
日本語訳は「恩送り」といった感じですかね。「誰かから受けた恩をその人に返すのではなく、別の人に送る」という意味です。とあるJaveScriptのコードに頭を悩ませていた私を助けてくださった@taguchiさんからこの言葉を頂いたときの感動は忘れられません。詳しくはまた別のエントリ(近日執筆予定)で。

関連記事
05:50 | Trackback : 0 | Comment : 0 | EDIT | TOP
Comment







(編集・削除用)


管理者にだけ表示を許可
Trackback
http://mains1011.blog24.fc2.com/tb.php/455-d6529d20
検索フォーム
スポンサーリンク
なかのひと

三男パパ

Author三男パパ

Twitter@knob_papa
FacebookNobuyasu Kamata
Instagramknobpapa
生まれ東京都
住み処埼玉県

独学で自社関連のWebサイトを作っています。こんなサイトとか、あんなサイトとか。お暇ならどうぞ。

on-line:/total:

カテゴリ

openclose

最新記事
メールフォーム
ご意見・ご感想をお寄せください

お名前:

メアド:

件名:

本文:

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。