コンテンツ
このページの汎用的なレイアウトパターンを組み合わせることで、多くのコンテンツを構成できます。
横２段（ハーフ）：画像付き
構造から見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
アクセシビリティを前提にした設計
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
<div class="flex gap-8">
<section class="line-2">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-2">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
</div>
※画像が不要な場合は、イメージタグを削除してください。
横２段（ワイド）：画像付き
アクセシビリティを前提にした設計
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
<section class="flex gap-8 flex-row-reverse">
<div class="line-3-wide">
<h3 class="text-3xl mb-4">見出し</h3>
<p>
テキスト
</p>
</div>
<div class="line-3">
<img width="" height="" src="" alt="" class="autoImg">
</div>
</section>
※左右反転する場合は、画像とテキストの順序を入れ替えます。
横３段
構造から見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
アクセシビリティを前提にした設計
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
公開後の更新しやすさも重視
更新担当者の負担を減らしながら、情報を継続的に発信(font-semibold)できる構造を意識して設計しています。
<section class="flex gap-8">
<section class="line-3">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-3">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-3">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
</section>
横４段
構造から見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
アクセシビリティを前提にした設計
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
公開後の更新しやすさも重視
更新担当者の負担を減らしながら、情報を継続的に発信(font-semibold)できる構造を意識して設計しています。
公開後の更新しやすさも重視
更新担当者の負担を減らしながら、情報を継続的に発信(font-semibold)できる構造を意識して設計しています。
<section class="flex gap-8">
<section class="line-4">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-4">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-4">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-4">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
</section>
横３段（変則）
構造から見直すWeb改善
見た目だけを整えるのではなく、情報設計や導線を含めて全体を設計することで、長く運用できるWebサイトを目指します。
アクセシビリティ
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
前提にした設計
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
<div class="flex gap-8 keep-row">
<section class="line-2">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-2 flex gap-4">
<section class="line-2">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
<section class="line-2">
<h3 class="text-3xl mb-4">見出し</h3>
<img width="" height="" src="" alt="" class="autoImg">
<p>
テキスト
</p>
</section>
</section>
</div></pre>
横４段（変則）
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
読みやすさや操作しやすさ(font-medium)を整えることで、利用環境に左右されにくい情報提供を実現します。
<section class="flex gap-8 keep-row">
<div class="line-3">
<img width="650" height="443" src="common/images/sample/noimage.jpg" alt="サンプル画像" class="autoImg">
<p>
読みやすさや<span class="font-medium">操作しやすさ(font-medium)</span>を整えることで、利用環境に左右されにくい情報提供を実現します。
</p>
</div>
<div class="line-3-wide flex gap-4">
<section class="line-3">
<img width="650" height="443" src="common/images/sample/noimage.jpg" alt="サンプル画像" class="autoImg">
<p>
読みやすさや<span class="font-medium">操作しやすさ(font-medium)</span>を整えることで、利用環境に左右されにくい情報提供を実現します。
</p>
</section>
<section class="line-3">
<img width="650" height="443" src="common/images/sample/noimage.jpg" alt="サンプル画像" class="autoImg">
<p>
読みやすさや<span class="font-medium">操作しやすさ(font-medium)</span>を整えることで、利用環境に左右されにくい情報提供を実現します。
</p>
</section>
<section class="line-3">
<img width="650" height="443" src="common/images/sample/noimage.jpg" alt="サンプル画像" class="autoImg">
<p>
読みやすさや<span class="font-medium">操作しやすさ(font-medium)</span>を整えることで、利用環境に左右されにくい情報提供を実現します。
</p>
</section>
</div>
</section>
リファレンス
| 属性名 | 用途 | 値 |
|---|---|---|
.flex |
Flexレイアウトを適用 | display:flex |
.flex-row |
横並び | row |
.flex-row-reverse |
横並び（逆順） | row-reverse |
.flex-col |
縦並び | column |
.flex-wrap |
折り返しあり | wrap |
.flex-nowrap |
折り返しなし | nowrap |
.justify-start |
左寄せ | flex-start |
.justify-center |
中央揃え | center |
.justify-between |
均等配置 | space-between |
.items-start |
上揃え | flex-start |
.items-center |
中央揃え | center |
.items-stretch |
高さを揃える | stretch |
.gap-2 |
要素間余白（小） | 8px |
.gap-4 |
要素間余白（中） | 16px |
.gap-8 |
要素間余白（大） | 32px |
.line-2 |
2カラム幅 | 50% |
.line-3 |
3カラム幅 | 33.333% |
.line-4 |
4カラム幅 | 25% |
.keep-row |
SP時も横並びを維持 | keep layout |