flexboxで複数カラム横並び
- 生成AIで、テキストコンテンツを作成
- 生成AIは、リートンを使用
プロンプト（生成AIへの指示）
少年がスペインを旅する物語を200文字程度で作成してください。
少年の名はタケル。彼は夏休みを利用して、憧れのスペインを旅することに決めた。初めての海外旅行に胸を躍らせながら、彼はバルセロナの街に降り立った。青空の下、カサ・ミラやサグラダ・ファミリアの美しさに圧倒され、思わず息を呑む。 タケルは地元の市場で新鮮なタパスを味わい、フレンドリーな店主と会話を楽しんだ。彼はスペイン語を少し勉強していたので、簡単な挨拶や注文ができたことに自信を持った。市場の賑わいの中で、彼は異国の文化に触れ、心が躍るのを感じた。
HTMLコーディング
- 見出しのない構造のため、divタグでレイアウトの記述のみ
- 親ボックスと子ボックスが、してしやすいようにクラス名を付与
<main class="main"> <div class="container"> <div class="wrapper"> <p>少年の名はタケル。彼は夏休みを利用して、憧れのスペインを旅することに決めた。初めての海外旅行に胸を躍らせながら、彼はバルセロナの街に降り立った。青空の下、カサ・ミラやサグラダ・ファミリアの美しさに圧倒され、思わず息を呑む。</p> <p>タケルは地元の市場で新鮮なタパスを味わい、フレンドリーな店主と会話を楽しんだ。彼はスペイン語を少し勉強していたので、簡単な挨拶や注文ができたことに自信を持った。市場の賑わいの中で、彼は異国の文化に触れ、心が躍るのを感じた。</p> </div><!-- /.wrapper --> </div><!-- /.container --> </main>
CSSコーディング
- Flexboxで２カラムにする（横並び）
@charset "UTF-8"; /* ----------------------------------------- reset ----------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } /* ----------------------------------------- body ----------------------------------------- */ body { background-color: #fff; color: #333; font-style: 16px; font-family: sans-serif; line-height: 1; } /* ----------------------------------------- layout ----------------------------------------- */ .container { width: 90%; max-width: 800px; margin: 50px auto; } .wrapper { display: flex; gap: 20px; padding: 20px; border: 2px dashed #999; } p { padding: 20px; background-color: #f0f0f0; text-align: justify; line-height: 1.7; }
幅を可変にする
- 特にスマートフォンでの読みやすため、左右の空きを設定
.container { width: 90%; /* スマートフォンでの最小幅 */ max-width: 800px; /* PCでの最大幅 */ margin: 50px auto; }
この２行をまとめて記述するときに、min()関数を使います。
横並びのポイント
- 親ボックスに「display: flex;」を設定すると、子ボックスはすべて横並びの状態になります
- この時点では、子ボックス同士の空きはありません
- 「gap: 20px; 」で設定すると、子ボックスの幅が自動計算されて、空きが優先されます
.wrapper { display: flex; gap: 20px; /* カラム間の空きを20pxに */ }
