CSSクックブック ―Webデザインのための活用テクニック集
- 作者: Christopher Schmitt,株式会社ドキュメントシステム
- 出版社/メーカー: オライリージャパン
- 発売日: 2005/02/28
- メディア: 大型本
- 購入: 3人 クリック: 27回
- この商品を含むブログ (29件) を見る
CSSの本を読み終えました。ページ数もあまりなく、特に収穫が大きくはありませんでしたが、案外誰でも知ってそうで自分が知らなかった箇所を発見できたので良かったです。
HTMLにブロック要素とインライン要素が存在するのことは知っていましたが、スタイルシートで操作できることを知りませんでした。設定は下のようになります。
display : block display : inline
これが効果的に紹介されているテクニックとしてリストを横に並べてメニューなどに利用するものがあります。
通常のリストを表示するとブロック要素のため<li>タグごとに改行が入ります。
<ul> <li>Google</li> <li>Yahoo!</li> </ul>
そこでCSSで<li>タグをインライン要素に変更してしまえば改行がなくなるので横に並ぶという訳です。
<ul> <li style="display:inline">Google</li> <li style="display:inline">Yahoo!</li> </ul>
HTMLの構造を綺麗に書こうとすると、レイアウト用のテーブルなどを避けたくなりますが、上記の例はいかにもぴったりな使い方です。
当然リスト以外でもスタイルを適用できるので<div>タグをインライン要素に変更すれば改行を無効にすることもできます。（その場合は<div>ではなく<span>を使うべきですが）
アウトライン要素とインライン要素、良い復習が出来ました。