最終更新日:2019年09月27日CSSで要素を横に並べて表示する方法として「float」プロパティを使う方法があります。レスポンシブ・デザインに対応するサイト構築のための柔軟なレイアウトを作成するには、コードが少し複雑で分かりにくいのが難点でした。「display」プロパティの"table"や"table-cell"を使うとtableタグを使ったかのような表組みレイアウトが比較的簡単に実現できます。display:table-cell」の使い方をサンプルを元に見てゆきましょう。通常ブロックレベルのdivタグやulタグなどは以下のサンプル(dtable.html)ように縦並びでブラウザーに表示されます。#666;}</style></head><body><h1>要素を横並びにする</h1><div>一つ目のブロックレベル要素</div><div>二つ目のブロックレベル要素です。</div><div>三つ目のブロックレベル要素です。長めのテキストが入った領域です。</div></body></html>●ブラウザーの表示(通常のdivタグ)このサンプルを使ってdivタグをテーブルのように表示させてみましょう。「display:table」は<table>タグ、「display:table-cell」は<td>もしくは<th>タグと同じ使い方です。class="dtable_c">二つ目のブロックレベル要素です。class="dtable_c">三つ目のブロックレベル要素です。長めのテキストが入った領域です。</div></div></body></html>「display:table」と「display:table-cell」はセットで使われることが多いプロパティです。横並びにしたいブロックレベル全体を「table」タグと同じようにdivタグで囲み"dtable"を設定しています。3つのブロックをセルとして扱うので"dtable_c"を設定しました。この3つの要素が横並びに配置されます。「display:table」を使うとはtableタグのように要素を均等に配置することも簡単にできます。#666;}</style>先ほどの「dtable.html」のCSSを少し編集してみましょう。table」の幅(width)を指定し、「table-layout:fixed」を追加してブロックレベル要素を均等に配置しています。table-cell」はtdタグと同様に要素の縦位置の調整も可能です。「vertivcal-align」プロパティを使ってブロックレベル要素の配置を調整します。table-cell」はtableタグのセルと同じ扱いが可能です。middle」を設定して、縦位置を中央寄せに設定しました。ブロック全体(dtable)の高さ(height)と境界線の重複を解除する枠線を追加しています。港区Tweetおすすめ記事CSSで背景画像を設定する方法【background-image】CSSで背景画像を設定する方法【background-image】CSSの「background-image」プロパティを使って背景画像の設定をしてみましょう。HTMLリンクの作成ホームページ内に別ページや外部サイトなどの「リンク」を作成する場合は、アンカー【<a>】タグを...HTML入門:チェックボックスを表示させてみようHTML入門:チェックボックスを表示させてみよう「アンケート」や「お問い合わせ」フォームよく見られるチェックボックスを作成してみましょう。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。