カラムは画面の縦の列です。2カラムは二つの列へ内容を分ける配置で、左に記事、右に補足を置く例があります。二つの段落を無条件に横へ分ける意味ではありません。読者が先に知るべき答えは本文へ、その答えを助ける関連案内は補足へ置きます。

架空の印刷案内なら「依頼前にそろえるもの」が本文、「受付前の注意」が補足です。画面が広いときは同時に見せ、狭いときは本文のあとに注意を置きます。注意が申込みに必須なら、本文にも必要な位置で示します。右の欄へ追い出すことで重要な条件を隠さないでください。

MDNのGridは、行と列へ要素を配置するCSSの仕組みです。ここではそのうち二つの列だけを使います。表形式の数値を表すtable要素や、文章の段組みを作るcolumnsとは目的が違います。余白を何度も入力して列を作る方法は、文字の大きさが変わると崩れます。

この章の根拠：出典1出典3

作業用にtwo-column-demoという空のフォルダーを作り、プレーンテキストを保存できるエディターを開きます。次のHTMLをindex.html、次章のCSSをstyle.cssとして、UTF-8で同じ場所へ保存します。文書作成ソフトの書式付き文書や、index.html.txtになったファイルでは確認できません。

HTMLはmainを先、asideをあとに書き、両方をpageというクラスを付けたdivで囲みます。Gridで横へ並べる対象は、このdivの直下の二つの要素です。リンクのhrefにある#notesは、同じページのid="notes"へ移る指定です。外部への送信や申込み処理はありません。

index.htmlをブラウザーで開くと、CSSがない段階でも本文のあとに補足が読めます。見た目を取り去っても意味がつながることを先に確認します。既存のWordPressへこの全文を投稿本文として貼らないでください。テーマが既に持つheadやmainと重なります。実サイトへの組込みは、テーマの構造と編集権限を確かめた別作業です。

この章の根拠：出典1出典3

CSSの値の後ろには長さの単位を付けます。remはページの基準となるhtml要素の文字サイズを1とする単位で、18remはその18倍です。pxはCSSのピクセルという単位で、端末の実際の点といつも一対一とは限りません。基準の文字サイズが変わればremの幅も変わるので、文字を大きくした表示でも確認します。

style.cssへ次のCSSを保存して、ブラウザーを再読込みします。display:gridだけでは二つの列はできません。標準の状態は1列にし、メディアクエリーの中で二つの列幅を指定しています。gapは列と行の間隔、paddingは領域内の余白です。

minmax(0,1fr)は、本文の列に残りの幅を使わせ、縮むときの下限を0にする指定です。長いURLなどが列を押し広げないよう、mainとasideにもmin-width:0と折返しを指定しています。画像を加えるときはmax-width:100%で領域内へ収めます。高さを固定して文章を切り捨てる方法は使いません。

50remと18remはこの見本の選択値です。すべての端末で正しい基準ではありません。実際の見出しや補足の長さを入れ、本文が窮屈になる幅で切替値を調整します。meta viewportがないと、携帯のブラウザーが想定より広い表示領域として扱い、切替が意図と違う場合があります。

この章の根拠：出典1出典2出典4

比較のため、作業用のCSSを複製してから、pageの列指定を720px 280pxへ変えてみます。二つの列だけで1000pxになり、さらに余白が必要です。375pxの画面では領域からはみ出します。元の完成例へ戻し、幅の小さいときは列指定を付けない方法に直します。この比較は練習用ファイルの中だけで行います。

CSSのorderや配置番号を使えば、見た目の順序をHTMLと変えられます。しかしTabキーで移る順番や読み上げの順番まで同じになるとは限りません。見出しの説明より先にその説明へのリンクが読まれるなど、意味が変わる配置は避けます。W3CのMeaningful Sequenceは、意味に影響する内容を理解できる順序にすることを説明しています。

補足を必ず右に置く規定はありません。商品比較のように二つの情報を対等に比べるなら、本文と補足という役割自体が合わないこともあります。左右の装飾だけを入れ替える前に、狭い幅で上から読むときの問いと答えがつながるかを確かめてください。

この章の根拠：出典1出典2出典3

CSSが全く効かなければ、index.htmlとstyle.cssが同じ場所にあるか、hrefの綴りと実ファイル名が一致するかを確認します。大文字小文字を区別する公開環境もあります。更新を保存したあと、ブラウザーを再読込みします。開いているファイルが別の複製ではないかも確認してください。

CSSは読み込めるのに2列にならなければ、幅が50rem未満なのか、pageのクラスを囲みに付け忘れたのか、閉じ括弧を落としたのかを見ます。開発者ツールでpageを選択し、適用されるgrid-template-columnsを確認します。既存サイトで試す場合は、テーマの同名クラスや後から読むCSSが上書きする可能性があります。学習例には問題がなくても、テーマ内の確認は別に必要です。

320px程度の狭い幅、幅を広げた状態、文字を拡大した状態で本文を最後まで読みます。Tabキーでリンクへ移り、枠が見えることも確かめます。表を加える場合は必要な列を保ったまま表の領域だけを横に送れる方法などを検討し、ページ全体をはみ出させないでください。これは確認項目であり、コードだけでアクセシビリティ適合を保証するものではありません。

この章の根拠：出典1出典2出典3

完成例では印刷依頼の準備がmain、受付前の注意がasideです。狭い幅ではこの順序で縦に読み、十分な幅で可変の本文列と18remの補足列へ分かれます。列数が変わっても原稿を二重に持たないため、更新時の食い違いを減らせます。

実サイトへ移す前に、練習ファイルで保存・再読込み・幅の切替・キーボード操作を確認します。WordPressや他のCMSではテーマの領域とCSSの競合、編集できる場所、変更前のバックアップを担当者と確かめます。本稿のファイルは実際の問い合わせを受け付けず、公開用の完成サイトでもありません。

次の記入表には、実際の本文と補足、確認した幅、崩れた具体的な内容を残します。「2カラムにしたい」だけで相談するより、「本文の長いURLが375pxであふれる」のように現象を伝えると、変更する箇所を確かめやすくなります。

この章の根拠：出典1出典2出典3