模写中級 #003 ジムサイトの交互配置レイアウト

模写中級 #003 は、ジムのランディングページを題材に「画像とテキストを左右交互に並べるレイアウト」をFlexboxだけで組み切る課題です。この並べ替えは、企業サイトのサービス紹介でも通販の商品ページでも必ず出てくる定番の型で、ここを一度自分の手で通しておくと、以降の模写で迷う時間がはっきり減ります。

逆に言えば、この課題は「見た目を似せる」ことがゴールではありません。左右の入れ替えをどこで指定するかを決め、画面幅が狭くなったときに縦積みへ正しく戻せるところまでが範囲です。

この課題で作るもの

作るのは「Quest Gym」という架空のフィットネスジムの1ページ完結型ランディングページです。ページを上から下へ、次の5ブロックで構成します。料金表や予約フォームは含みません。ジムサイトでよくある「特徴を3つ並べて、最後に相談へ誘導する」という一本道の構成だけを扱います。

完成見本は実際にブラウザで開けます。まず見本をひと通りスクロールし、画面幅を狭めたときに何がどう変わるかを見てから、自分のエディタに戻ってください。見本のHTMLとCSSはブラウザの検証ツールから読めますが、最初から答えを読むと課題になりません。詰まってから開くのが効果的です。

完成見本サイト　Quest Gym（模写中級 #003）

今回の学習ポイントは2つだけ

このページには覚えどころがいくつもありますが、中級課題として意識するのは2つに絞ってかまいません。残りは初級課題までで扱った内容の組み合わせです。

ポイント1・画像とテキストを左右交互に並べる

特徴カードは「画像が左・文章が右」「画像が右・文章が左」を交互に繰り返します。この交互配置を実現する方法は2つあり、どちらか一方だけを使うのが鉄則です。

1. HTMLの書く順番を、カードごとに入れ替える
2. HTMLの順番は全カードで固定し、CSSの flex-direction: row-reverse で見た目だけ反転する

MDNは row-reverse の挙動を「開始線と終了線を入れ替えることで並びを反転する」と説明しています（MDN「Ordering flex items」・2026年8月2日取得）。つまり1と2は同じ結果を狙う別々の手段であり、両方を同じカードに掛けると反転が2回起きて元に戻ります。

これは机上の話ではありません。2026年8月2日時点の完成見本サイトを、ビューポート1280×900のChromiumで実測したところ、3枚の特徴カードの座標は次のようになりました。

2枚目には反転用のクラスが付いているのに、3枚とも座標が完全に一致しています。2枚目はHTMLの書き順も入れ替わっており、そこへさらに row-reverse が掛かって、反転が打ち消し合っている状態です。クラス名が交互配置を意図しているのに画面上は交互になっていない、という食い違いがそのまま残っています。

この課題では、実際に左右が入れ替わる形をゴールにしてください。見本のコードをそのまま写すと交互になりません。推奨するのは前述の2番、つまりHTMLの順番は全カードで「画像→文章」に固定し、CSSだけで偶数枚目を反転するやり方です。書き順が揃うのでカードを増減しても壊れません。

ただしCSSで見た目を反転しても、キーボードのタブ移動の順番と読み上げの順番はHTMLに書いた順のままです。MDNも「見た目（CSS）の順序が重要な場合、スクリーンリーダーの利用者は正しい読み上げ順にアクセスできない」と明記しています（MDN「flex-direction」・2026年8月2日取得）。HTMLの順番を全カードで揃えておけば読み上げ順も一定になるので、この点でも2番が有利です。

ポイント2・CTAブロックを幅で潰さない

最後の相談セクションは「文章」と「CTAボタン」を横に並べます。ここで初級との差が出るのは、画面幅が変わったときに、どちらを縮ませてどちらを守るかを指定するという考え方です。ボタンは押す対象なので縮ませてはいけません。

役割の分け方は次の3つです。文章側に flex: 1 を与えて余白を吸わせ、min-width でそれ以上細くならない下限を決めます。ボタン側には flex-shrink: 0 を与えて縮小の対象から外します。そして親に flex-wrap: wrap を置き、下限に達したら自動的に縦積みへ折り返させます。

見本サイトで同じ測定をすると、この仕組みが数字で見えます。ビューポート幅を変えながらCTAボタンの実寸を測ると、1280pxでも375pxでも252×70pxのまま変わりません。一方で文章ブロックは、幅800pxのとき500pxから468pxへ縮んでいます。縮んでいるのは文章側だけ、という配分が意図どおり効いている証拠です。

折り返しが起きる地点も測れます。見本は768px以下でメディアクエリが縦積みに切り替えるため、そのままでは min-width の効果が見えません。検証ツールで768pxのメディアクエリを外して測り直すと、幅620pxではまだ横並び（文章288px）、幅610pxで折り返しに変わりました。文章の下限280pxに届かなくなった時点で折り返す、という挙動がそのまま出ています。「画面幅がいくつになったら」ではなく「中身が入らなくなったら」で切り替わるのがこの書き方の利点です。

HTMLの骨格をどう組むか

完成コードは載せません。ここで示すのは特徴カード部分の入れ子だけです。3枚とも同じ形で書き、クラスも同じにします。反転用のクラスは付けません。

<div class="feature-list">
  <article class="feature-card">
    <div class="feature-image"><img ... /></div>
    <div class="feature-content"><h4>...</h4><p>...</p></div>
  </article>
  <!-- 2枚目・3枚目も全く同じ順番で書く -->
</div>

そのうえで、交互配置と縦積みの切り替えをCSS側だけで行います。要になるのは次の4行です。メディアクエリの中で、反転を指定したときと同じセレクタを使って上書きしている点に注目してください。理由は次の章で説明します。

.feature-card { display: flex; align-items: center; }
.feature-card:nth-child(even) { flex-direction: row-reverse; }

@media (max-width: 768px) {
  .feature-card,
  .feature-card:nth-child(even) { flex-direction: column; }
}

残りのセクション（ヒーロー、利用者の声、相談、フッター）は、この考え方の応用で組めます。利用者の声のカードも左右交互ですが、アイコンと本文という2要素の並びなので、特徴カードと同じ形でそのまま通用します。

つまずきポイント

以下は、この課題を実際に組んで再現できた症状だけを挙げています。

2番目が中級らしい引っかかりどころなので補足します。CSSの詳細度では、クラスと擬似クラスが同じ列で数えられます（MDN「Specificity」・2026年8月2日取得）。したがって .feature-card:nth-child(even) はクラス列が2、.feature-card は1です。詳細度が高いほうが勝つため、あとから書いたメディアクエリでも上書きできません。

この状態を実際に作って測ると、幅700pxでも幅320pxでも2枚目だけが row-reverse のまま残り、文章ブロックの左端が-109pxになりました。画面の左外へはみ出しているという意味です。ここで紛らわしいのは、左方向のはみ出しでは横スクロールバーが出ない点です。スクロールバーが無いから大丈夫、と判断せず、文字が切れていないかを目で確認してください。

完成条件・自分で合否を判定する

「なんとなく似た」で終わらせないために、判定できる形にした合格ラインを5つ置きます。すべてブラウザの検証ツールだけで確認できます。カッコ内は見本サイトを実測した値です。

3番目の横溢れは、検証ツールのコンソールに次の1行を貼れば数字で出ます。2つの値が一致していれば横方向のはみ出しはありません。ずれていたら、幅を px で固定した要素か、画像の最大幅指定の抜けを探してください。

const de = document.documentElement;
console.log(de.scrollWidth, de.clientWidth);

2番目の縦積みは、カードを選択して算出値のスタイルで flex-direction を見るのが確実です。3枚のうち1枚だけ値が違っていれば、その1枚に効いているセレクタが上書きを跳ね返しています。ここまで分かれば原因は絞れているので、詳細度の比較だけして次へ進んでください。

次の課題と関連記事

中級は番号順に進めると難易度が上がっていきます。ひとつ前の課題は 模写中級 #002 です。まだの場合はそちらを先に終わらせてから戻ってくると、今回のFlexboxの話が読みやすくなります。

この課題の合格条件を満たせたら、次は 模写中級 #004 へ進んでください。他のレベルも含めて一覧から選びたい場合は 模写コーディング課題の一覧 にすべて並んでいます。

Flexboxの指定そのものに自信がないときは CSSテクニックのまとめ を先に読むと手が止まりにくくなります。また、模写に入る前に見本のどこを観察すべきかを整理しておきたい場合は デザインカンプを作る前に押さえるルール が参考になります。

よくある質問（FAQ）

Q. 交互配置はFlexboxとGridのどちらで作るべきですか？

この課題ではFlexboxで作ってください。カード1枚の中で「画像と文章」という2要素を横に並べるだけなので、1方向の並びを扱うFlexboxが素直に収まります。Gridは行と列の両方を同時に制御したいとき、たとえばカード内の要素が3つ以上あって縦横の位置をまとめて決めたい場合に選ぶと効果が出ます。

Q. 見本サイトのカードが交互になっていないのはなぜですか？

反転指定が二重に掛かって打ち消し合っているためです。2枚目のカードはHTMLの書き順が「文章→画像」と入れ替わっており、そこへCSSの row-reverse がさらに適用されるため、結果として1枚目・3枚目と同じ並びに戻っています。この課題では実際に左右が入れ替わる形をゴールにしてください。

Q. row-reverseを使うとアクセシビリティに影響しますか？

見た目の順序とキーボード操作・読み上げの順序がずれる点に影響します。MDNは、視覚的な順序が重要な場合にスクリーンリーダー利用者が正しい読み上げ順にアクセスできなくなると説明しており、仕様も反転値を正しい書き順の代用にしないよう求めています。今回のようにHTMLの書き順を全カードで揃えたうえで見た目だけ左右を入れ替える使い方であれば、読み上げ順は一定に保たれます。

Q. スマホ幅で1枚だけレイアウトが崩れるときはどこを見ますか？

崩れているカードを選択して、算出値の flex-direction が他の2枚と違っていないかを最初に確認してください。1枚だけ row-reverse のまま残っていれば、メディアクエリの指定がセレクタの詳細度で負けています。メディアクエリの中でも反転時と同じセレクタを並べて上書きすれば解消します。

Q. 見本と完全に同じ見た目にならないと合格ではありませんか？

色や余白の数値が数px違う程度であれば合格として構いません。この課題で見るのは、完成条件の表に挙げた5項目、つまり交互配置・縦積みへの切り替え・320pxでの横溢れ・CTAボタンの実寸・キーボード操作です。写真素材も手元のもので代用してかまいませんが、縦横比が大きく違うとカードの高さが変わるため、近い比率のものを選ぶと見比べやすくなります。

Q. 所要時間の目安を大きく超えてしまいます。進め方が悪いのでしょうか？

目安の3〜5時間はセクション数とCSS量から見積もった数値で、計測値ではありません。超えること自体は問題ではありませんが、1箇所で1時間以上止まっているなら進め方を変えたほうが早く終わります。そのセクションだけを新しいHTMLファイルに切り出し、他のCSSが混ざらない状態で組み直すと原因が絞り込めます。