CSSfacebookTweethatenaline2019.06.10レシピレイアウトサムネイル画像とテキストのコンテンツを横並びにする記事一覧などでよく見かける、サムネイル画像とテキストが横並びになったレイアウトを作成する方法について解説します。この記事のポイントコンテンツのレイアウト方法が分かるフレックスボックスでコンテンツをレイアウトするfloatプロパティでコンテンツをレイアウトする目次サムネイル画像付きの一覧を作るフレックスボックスを使うfloatプロパティを使うサムネイル画像付きの一覧を作る今回は次のようなレイアウトの作り方を解説していきます。表示例このようなレイアウトで表示する方法として、主に次の2つの方法があります。フレックスボックスを使うfloatプロパティを使う2つの方法の使い分け方としては、フレックスボックスが未対応のブラウザ(IE9以前)も対応する必要がある場合はfloatプロパティを使う方法を、それ以外はフレックスボックスを使う方法がオススメです。フレックスボックスを使うdisplayプロパティのフレックスボックスを使った方法です。class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。class="text_excerpt">画像とテキストコンテンツを左右に並べたレイアウト。画像とテキストコンテンツを左右に並べたレイアウト。top;}フレックスボックスが便利なポイントは、画像部分の幅が決まっていると右側のテキストコンテンツがあるエリアの幅が自動的に決まるところです。20px;」と設定しています。すると、右側のテキストコンテンツエリアには左側の120pxを引いた幅が設定されます。次のようなイメージです。コンテンツの幅のイメージ表示幅にバリエーションがあるレスポンシブ対応もしやすくオススメの方法です。floatプロパティを使う続いて、floatプロパティを使った方法です。表示例HTMLは先ほどと同じため省略し、CSSのコードのみ記載します。hidden;」を指定します。続いて、子孫要素にあたるfigure要素とテキストコンテンツを囲むdiv要素に、それぞれfloatプロパティを適用します。figure要素には縦横のサイズを「100px」で指定していますが、div要素側では横幅のみ「100%」として具体的なサイズを指定していません。120px;」を指定しています。この「120px」は画像の横幅である100pxと、テキストコンテンツとの余白である20pxを足した数字です。このように具体的な数字を画像側のみに指定するような設計にすると、右側のテキストコンテンツ側には具体的な横幅のサイズを指定する必要がなくなるため柔軟性があります。上記のフレックスボックスのように右側のサイズは左側の画像サイズに応じて決まるので、レスポンシブ対応も画像サイズのみ気にするだけでレイアウトをコントロールすることができます。親要素の幅が固定であれば、画像とテキストコンテンツの幅、それぞれの余白(親要素と子孫要素の余白と、画像&テキストコンテンツの余白)をきっちり計算して同様の表示を行うことも可能です。460px;}左右のコンテンツの幅をpx単位で指定する場合は、親要素と余白の幅を差し引いた幅をそれぞれに指定します。幅の合計値が固定であることを念頭に置いているため、レスポンシブ対応のような表示幅が変則的な場合は扱いづらい方法です。こちらの記事は役に立ちましたか?GoodBadありがとうございます。よろしければ、あわせてフィードバックや要望などをご入力ください。コメント送信コメントありがとうございます!運営の参考にさせていただきます。)PHP2019-11-16フォームの基本構造を作成するPHP2019-11-16はしご高など旧字体漢字の文字化けを防ぐRECOMMEND人類を前に進めたいチームラボ代表・猪子寿之さんと評論家・宇野常寛さんによる、チームラボの目指す「境界のない世界」についての対談がまとまった一冊。内容はもちろん、フルカラーで写真も綺麗でした。