今日は２カラムページの作成を行っていきます。
かなり本格的な構成のページを作れますので、ぜひご参考にしていただければ幸いです。
２カラムページとは何かというところから、具体例を交えて実際にコーディングしながら画像を見て１つずつサイト完成までを解説していきます。
目次
２カラムページとは
Webサイトのレイアウトは、Webページの見た目や配置を決めることです。レイアウトにはいろいろな種類がありますが、今回は2カラムページについて説明します。
2カラムページとは、画面を2つの縦の列に分けて、左右に異なる内容を表示するレイアウトのことです。
左側にはメインコンテンツと呼ばれる、記事や画像などの主な情報が入ります。
右側にはサイドバーと呼ばれる、メニューやカテゴリー、広告などの補足的な情報が入ります。
このように、2カラムページでは、ユーザーが興味を持ちそうな情報をメインコンテンツに集めて、サイドバーで他のページへのリンクを提供することで、サイト内での移動を促すことができます。また、情報量が多くなりすぎないことで、見やすさや読みやすさも保つことができます。
2カラムページにもデメリットはありますが、一般的によく見かけるデザインのため、ユーザーが使いやすく見やすいサイトになるでしょう。
それでは実際のサイト作りに移っていきます。
ヘッダー作成
ヘッダーは前回フルスクリーンページの作成で追加した内容のコピーを調整して作成します。
こちらについては、必要に応じて以下リンクもご参照ください。
基本は同じで、ヘッダー画像のみ設定されていないので差し込みます。
@charset “utf-8”;
/*共通*/
body{
font-family: ‘Times New Roman’, Times, serif;
color:rgb(44, 43, 43);}
/*header*/
.logo{width: 10%;background-color: black;}
.listnone{list-style: none; display: flex;gap: 20px;}
.headers{display: flex;align-items: flex-end;justify-content: space-between;padding: 3%;}
header{background-image: url(top2.jpg);background-size: cover;}
これでヘッダーは完成です。
カラムの作成
次はコンテンツを入れていく箱（カラム）を作っていきます。
以下のようになります。
- HTML
<div class=”article-aside”>
<article>
</article>
<aside>
</aside>
</div>
※<article>と<aside>の2カラムを設定します。<article>にメイン記事を、<aside>に補助メニューを設置していきます。
- CSS
/*article-aside*/
.article-aside{display: flex;}
/*article*/
article{width: 75%}
/*aside*/
aside{width: 25%;}
※<article>と<aside>をフレックスで横並びにします。そのうえで、3:1比（75%と25%）となるように定義します。
HTMLに何も記載がないので画像では表現されませんが、どのような画面になるか想像できますでしょうか？
想像してどのような画面になるか考えることが大事です。
メイン記事の作成（articleの作成）
構成は、見出し、新商品の画像、新商品の紹介、とします。
本文作成
表示する文章をHTMLに書いていきます。
<article>
<h1>新作メニュー公開です！</h1>
<img src=”top.jpg” id=”article-img”>
<h2 class=”center-word”>オレンジケーキ ~880~</h2>
<p>イタリア産のオレンジをたっぷりと使ったオレンジケーキは、ふわふわのスポンジとしっとりとしたシロップが絶妙なバランスです。</p>
<p>オレンジの皮も一緒に煮込んで作ったシロップは、オレンジの香りと酸味を引き出し、スポンジにしみ込ませています。</p>
<p>オレンジの果肉もトッピングして、オレンジの食感も楽しめます。</p>
<p>オレンジケーキは、ホイップクリームやアイスクリームと一緒に召し上がっていただくと、さらに美味しくなります。</p>
<p>イタリアオレンジの爽やかな香りと甘みが口いっぱいに広がるオレンジケーキは、おやつにもデザートにもぴったりです。</p>
<p>ぜひ一度お試しください。</p>
</article>
画像は割愛しますが、文字サイズが大きく、レイアウトも大きく崩れてしまっていますので、整えていきます。
flex要素内に画像を収める（挿入画像の大きさ調整）
まずは大きくレイアウトを壊している挿入画像の横幅をarticleで定義した横幅に収まるように調整します。
article p{text-align: center;}
商品見出しと紹介文を中央寄せ
/*article*/
article{width: 75%;text-align: center;}
#article-img{width: 100%;}
これでおさまりましたが、白抜きが目立つので、確認もかねて、一度文字部分に背景画像を挿入してみます。
背景画像の設定
背景画像の一部を切り取り、その画像を背景に設定してみましょう。
/*article*/
article{width: 75%text-align: center;background-image: url(backgroud-tile.png);}
#article-img{width: 100%;}
これで記事（article)は完成です。
サイドバーの作成
今度はサイドバーの作成です。以下の２カテゴリーで作成します。
- サイトマップ：店舗紹介、メニュー一覧、イベントスケジュール
- 店長から一言
まずはHTMLで必要要素を揃えます。
<aside>
<div class=”aside1″>
<h3>サイトマップ</h3>
<ul>
<li>店舗紹介</li>
<li>メニュー一覧</li>
<li>イベントスケジュール</li>
</ul>
</div>
<div class=”aside1″>
<h3>店長から一言</h3>
<img src=”master.png” alt=”店長” class=”master”>
<p>当店では季節のフルーツやチョコレートなど、様々な種類のケーキをご用意しております。特別な日には、オリジナルのオーダーメイドのケーキも承ります。ぜひ一度、当店のケーキをお試しください。心を込めてお待ちしております。</p>
</div>
</aside>
上記を入力すると以下のような表示になります。修正点は以下の２点。
- 画像の大きさ調整と中央配置
- 余白作成：文字が左に寄っているので適切な余白を設ける
①画像の大きさ調整と中央配置
.master{width: 50%;margin: 0 25% 0 25%;}
これで画像がサイドバーの中央に配置されました。
余白作成：文字が左に寄っているので適切な余白を設ける
/*aside*/
aside{width: 25%;}
.master{width: 50%;margin: 0 25% 0 25%;}
h3{margin: 5%;margin-top: 10%;}
li{list-style: none;margin-bottom: 5%;}
aside p{margin: 10%;}
こうなるとarticleの背景が浮いてしまうので、画像サイズ調整とbackground-imageを削除しましょう。
挿入画像の大きさ調整
背景画像の削除と挿入画像の大きさ調整を行い、全体の見栄え・バランスを整えます。
/*article*/
article{width: 75% ;text-align: center;}
#article-img{width: 80%;margin: 0 10% 0 10%;}
これで全体のバランスも取れました。最後にフッターを作っていきます。
フッターの作成
まずHTMLを記載し、CSSで背景色の設定、中央に配置で完成です。
<footer>
<p>2023 ABC Cake</p>
</footer>
/*footer*/
footer p{text-align: center;background-color: rgb(236, 233, 233);padding: 2%;}
これで完成です。
まとめ
今日もお疲れ様でした。
徐々にできるようになってきましたね。
コードそのものではなく、何がどうすればできるのかを覚えていくことが大切です。
引き続き頑張っていきましょう。
