CSS displayプロパティの使い方3例
スタイルシートのdisplayプロパティって結構重宝します。
いくつか例を。
display:inline-block;
記事の一覧をタイル形式で並べる場合などにfloat:leftではなくdisplay:inline-block;を使うとclear:bothが必要なくなるので便利。
これは詳しいサイトがあるのでこちらでどうぞ。
http://ja.learnlayout.com/inline-block.html
display:block;
インライン要素をブロックにして表示する。
リンクをボタンのように表示するときに便利。
display:block;なしで表示した場合。display:block;なしで表示した場合。display:block;なしで表示した場合。
↑＜a href=”” style=”background:#33f;color:#fff;text-align:center;padding:10px 20px;border-radius:10px;”＞↑
display:block;ありで表示した場合。display:block;ありで表示した場合。display:block;ありで表示した場合。
↑＜a href=”” style=”background:#33f;color:#fff;display:block;text-align:center;padding:10px 20px;border-radius:10px;”＞↑
ボタンっぽいリンク
click here
click here
↑＜div style=”width:200px;margin:0 auto;”＞↑
↑＜a href=”” style=”background:#33f;color:#fff;display:block;text-align:center;padding:10px 20px;border-radius:10px;”＞↑
display:table-cell;
テーブルのtd要素のように表示する。
ブロック要素の中で縦位置をしていしたいときに便利。
縦位置の指定はvertical-alignで指定出来るのですが、このvertical-alignはインライン要素とテーブルセルでしか効かない。
なので＜div＞（＝ブロック要素）の中で縦位置してい出来ないのですが、display:table-cell;を指定することで解消できます。
↑＜div style=”width:400px;height:300px;border:1px solid #666;text-align:center;vertical-align:middle;”＞↑
↑＜div style=”width:400px;height:300px;border:1px solid #666;text-align:center;vertical-align:middle;display:table-cell;”＞↑
その他にもdisplayプロパティはたくさんあります。
私はまだ使いこなせませんが、覚えるとサイトでの表現の幅が広がりそうです。
関連記事
