こんにちは、フローです。
今回はレイアウトの中心部、コンテンツエリアについて書いていきたいと思います。
前回の記事はこちらです。
目次
コンテンツエリア
ウェブページ上の主要な情報が表示される領域です。
一般的に、コンテンツエリアは、サイトのデザインによって異なる場所や形状を持つことがありますが、
以下にいくつかの一般的なレイアウト例を示します。
1カラムレイアウト
1つのカラムで構成され、上から下にページの主要なコンテンツが表示されます。
これは、単純でわかりやすいレイアウトであり、主にブログや個人サイトで使用されます。
2カラムレイアウト
画面の左側には、ナビゲーションメニューやサイトのロゴなどが表示され、
右側にはページの主要なコンテンツが表示されます。
このレイアウトは、サイト内の移動を簡単にするために、よく使用されます。
3カラムレイアウト
中央にページの主要なコンテンツが表示され、
左右にはナビゲーションメニューやサイトのロゴ、広告などが表示されます。
このレイアウトは、広告収入を得るために使用されることが多いです。
フルスクリーンレイアウト
全画面を占めるレイアウトで、
背景画像や動画などをフルスクリーンで表示することができます。
主に、クリエイティブなポートフォリオやマーケティングサイトで使用されます。
以上のように、コンテンツエリアのレイアウトは、
ウェブサイトの目的やターゲットオーディエンスによって異なります。
より重要なのは、レイアウトが視覚的にわかりやすく、使いやすいことです。
カラム（column）
ウェブデザインの用語で、画面上のコンテンツエリアを複数の縦列に分割する際に使用される言葉です。
一般的に、1つのカラムには、テキスト、画像、ビデオなどの情報が含まれます。
たとえば、2カラムレイアウトでは、画面が左右に分かれ、
左側にはナビゲーションメニューやサイトのロゴ、
右側にはページの主要なコンテンツが表示されます。
この場合、左側が1つのカラムであり、右側が別のカラムになります。
カラムの数は、ウェブページのデザインや目的に応じて異なります。
1つのカラムは、シンプルなウェブサイトやブログなどのコンテンツを表示するのに適しています。
2つ以上のカラムは、複雑なウェブサイトで、さまざまな情報や機能を表示するのに適しています。
1カラムの例
1つのカラムのブログの例のHTMLとCSSのコードです。
<div class="blog-post">
<h1>記事タイトル</h1>
<p>記事の本文がここに入ります。</p>
<img src="image.jpg" alt="画像の説明">
<p>もう一つの段落がここに入ります。</p>
</div>.blog-post {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.blog-post h1 {
font-size: 28px;
font-weight: bold;
margin-top: 0;
}
.blog-post p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.blog-post img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 20px;
}この例では、
<div>ブログ記事のコンテンツエリアを、
<h1>でタイトルを、
<p>で本文を定義しています。
また、CSSを使用して、コンテンツエリアのスタイルを指定しています。
具体的には、
max-width、margin、padding、
background-color、box-shadowプロパティを使用して、
コンテンツエリアの大きさ、位置、背景色、影の設定を行っています。
また、font-size、font-weight、
line-height、margin-bottomプロパティを使用して、
記事タイトルや本文のスタイルを指定しています。
最後に、display、max-width、height、margin-bottomプロパティを使用して、
画像の表示方法とスタイルを指定しています。
2カラムの例
2カラムのウェブページの例のHTMLとCSSのコードです。
<div class="container">
<div class="left-column">
<h1>左側のコンテンツ</h1>
<p>左側のコンテンツの説明がここに入ります。</p>
</div>
<div class="right-column">
<h1>右側のコンテンツ</h1>
<p>右側のコンテンツの説明がここに入ります。</p>
</div>
</div>.container {
max-width: 960px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.left-column {
flex: 1;
padding: 20px;
background-color: #ffffff;
}
.right-column {
flex: 2;
padding: 20px;
background-color: #f2f2f2;
}
h1 {
font-size: 24px;
font-weight: bold;
margin-top: 0;
margin-bottom: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}この例では、
<div>で左側のカラムと右側のカラムを定義しています。
<div>のスタイルは、
display: flex;とflex-wrap: wrap;を使用して、
左側のカラムと右側のカラムを横並びに表示するように設定されています。
また、左側のカラムのスタイルは、
flex: 1;を使用して、右側のカラムよりも1/3の幅に設定されています。
右側のカラムのスタイルは、
flex: 2;を使用して、左側のカラムよりも2/3の幅に設定されています。
両方のカラムには、padding、background-color、
font-size、font-weight、line-height、
margin-bottomプロパティを使用して、
スタイルを指定しています。
なお、
CSSのflexプロパティは、CSS3から導入された新しいレイアウトモデルであり、
ウェブページのレスポンシブデザインにも役立つ汎用的なプロパティです。
まとめ
今回は、ウェブページの主となる部分、
コンテンツエリアの例を書きました。
最初は、あれもこれもと色々やりたくなりますが、私はシンプルイズベストで、わかりやすく使いやすいサイトが好きです。
この辺は、好みもありますし、使われる場面でもさまざまな形になります。
色んなサイトを見て勉強してみて下さい。
レッツチャレンジ！
最近のコメント