Layoutはウェブページのレイアウト構築に役立ちます。Layoutで置き換えられるでしょう。Layoutで置き換えるのが良いとはいえません。Layoutには、それぞれ特徴があるためです。特徴を使い分けていくことで、保守性の高いコーディングができるでしょう。Layoutの特徴と使い分け方をサンプルを通して紹介します。Layout入門」を参照ください。Layoutの特徴を見てみましょう。Floatfloatにleftやrightを指定された要素は、その包含ブロックの左・右に浮動し、後続する要素は回り込みます。印刷物でよくあるような、写真にテキストが回り込むようなレイアウトをつくれます。Flexbox要素を整列させます。整列する方向や整列順、整列の折り返しの指定が可能で、整列した要素を伸縮することもできるので、ウェブアプリで必要とされるUIのレイアウト(ツールバーなど)に役立ちます。Flexboxについて詳しくは、記事「初心者でも始められるFlexbox入門」を参照ください。Layoutテーブル組みのように揃った行・列に要素を配置します。要素の順番やフローは無関係に、要素の配置される位置を指定できます。ページの領域を分割するようなレイアウトに役立ちます。Layoutの特徴を理解したところで、実践的なサンプルを通して使い分けを考えていきましょう。上図のようなシンプルなウェブサイトのレイアウトをつくっていきます。アイテムのHTML記述は、タイトル、ナビゲーション、セクション1、セクション2、サイドバー、フッターの順番です。次のデモも合わせてご覧ください。Layoutでつくります。Layoutはページ全体など、ある程度大きな領域を分割するのに向いています。Layoutを使うことで、全体のレイアウトに関わるCSSをグリッドコンテナーにまとめて指定できるというメリットもあります。2という値を指定しています。これはgrid-column-startの位置から数えて2本後の列のグリッドラインまでグリッドアイテムを配置するという指定です。グリッドアイテムの終了位置をグリッドラインで指定せず、開始位置からの距離で指定するほうがレイアウトをつくりやすいので覚えておくと便利でしょう。開始位置(grid-column-start)もspanを使って終了位置からの距離で指定できます。grid-row-end(start)のときも同じです。Flexboxを使っています。幅が決まっていないアイテムを均等に整列させるときはFlexboxが便利です。余白を割り振っています。セクション1のテキスト回り込みセクション1のテキストを回り込ませるレイアウトではFloatを使っています。Layoutでもテキストが回り込んでいるような見た目に近づけることはできますが、回り込ませることができるのはfloatの特徴です。特別な理由がなければ、回り込みのレイアウトはFloatと考えてよいでしょう。Layoutを使っています。Layoutを使いました。Layoutではauto-fillやminmaxが使えるため、レスポンシブサイト等の幅が伸縮するレイアウトの調整がしやすくなります。サンプルのまとめ今回のサンプルでは次の使い分けをしています。Layoutは分割・格子などプロパティの特徴をキーワードとして覚えておくと使い分けの判断がしやすいかもしれません。Layoutを使わず、テーブルレイアウトや要素をインラインにしても要素を横ならびにはできます。レイアウトをつくる方法がいろいろある中で、プロパティをどう使い分けるかはつくる人の考え方やレイアウトのつくり方によって異なるでしょう。Layoutという新しいやり方でレイアウトするのがかっこいい」という意見も正しいと思いますが、CSSプロパティの特徴を知り適材適所で使っていくのがもっとも望ましいでしょう。平成30年6月9日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。