display tableを上手に使おう

display:tableはテーブルを作る時に役に立つだけではありません。
table-cellどうしがぴったり重なりあう性質や、vertical-align:centerが使える性質を使えば実にさまざまな用途で役に立ちます。
今回はdisplay:tableで下の二つのパーツを作ってみました。

  1. 検索フォーム
  2. アイコン付きヘッドライン

検索フォーム

検索

おなじみの検索フォームはdisplay:tableをつかって表現できます。

CSS

.cs-input-group {
  display: table;
}
.cs-input-group-btn {
  display: table-cell;
  padding: 5px;
  background-color: #eee;
  border: 1px solid #333;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.cs-input-group-form {
  border: 1px solid #333;
  border-right: none;
  display: table-cell;
  height: 37px;
}
.cs-input-group-form-full {
  width: 100%;
}

HTML

<div class="cs-input-group">
	<input class="cs-input-group-form" />
	<span class="cs-input-group-btn">検索</span>
</div>

アイコン付きヘッドライン

今回一番お見せしたいサンプルがこちらのアイコン付きヘッドラインです。タイトルがどんなに長くなってもアイコンは常に縦方向に対して真ん中に表示されます。これはvertical-align:centerを使っているためです。
また、cs-iconHeadline-titlewidth:100%を指定していますが、display:tableの性質上、アイコン部分のセルはつぶれません。これも魅力的ですね。

タイトルが入ります

タイトルが長くなったとしてもアイコンは常に縦方向に対して真ん中に表示されます。

CSS

.cs-iconHeadline{
    	display:table;
	margin-bottom:10px;
	border:1px solid #333333;
}
.cs-iconHeadline-icon{
    	display:table-cell;
	vertical-align:middle;
	padding-right:10px;
	padding-left:10px;
	color:#FFFFFF;
    	background-color:#008CBA;
}
.cs-iconHeadline-title{
   	display:table-cell;
	font-size:24px;
	width:100%;
    	padding:5px;
}

HTML

<div class="cs-iconHeadline">
	<span class="cs-iconHeadline-icon fa fa-flag"></span>
	<p class="cs-iconHeadline-title">タイトルが長くなったとしてもアイコンは常に縦方向に対して真ん中に表示されます。</p>
</div>

堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

Home
Next entry →