パソコン

【10分スタディ】ホームページ超入門#2 3段2列のレイアウト

2021年4月2日

<3段2列のレイアウトに挑戦しよう>

3段2列のレイアウト作るには?

次のような3段2列のレイアウトを作ってみましょう。

 

HTMLとCSS?

3段2列のレイアウトを作るには、HTMLとCSSが必要です。

HTMLは構造、CSSはデザインを担当し、セットで使用します。

構造とデザイン、担当を分けることによって、それぞれのメンテナンス性が向上します。

 

フォルダの作成

htmlという名前のフォルダを適当な場所に作ります。

 

「htmlフォルダ」の中にcssという名前のフォルダを作成します。

 

「htmlフォルダ」内に「sample2.html」を作成します。(内容は後で入力します)

 

「cssフォルダ」の中に「style.css」を作成します。(内容は後で入力します)

 

レイアウトに名前を付ける

レイアウトの各エリアに名前を付けます。

これを元に htmlファイルと cssファイルを作成します。

 

htmlファイル

sample2.htmlの内容です。間違えないように入力をお願いします。(コピペでも大丈夫です)

 html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>3段2列レイアウト</title>
</head>
<body>
<div class="wrapper">
<div class="header">ヘッダー</div>
<div class="mainArea">
<div class="main">メイン</div>
<div class="sidebar">サイドバー</div>
</div>
<div class="footer">フッター</div>
</div>
</body>
</html>
  • <link rel="stylesheet" href="css/style.css">
    htmlファイルの外にあるcssファイル style.css を呼び出します。
  • <div class=""></div>
    style.css内のクラスを呼び出します。
  • 使用していないタグ
    headerタグ、mainタグ、footerタグ、id は使用していません。

 

cssファイル

 css
body {
margin: 0;
background-color: #fbf5f3;
}
.wrapper {
max-width: 800px;
margin: 0 auto;
}
.header {
text-align: center;
height: 200px;
background-color: #ffdcdc;
}
.mainArea {
display: flex;
}
.main {
flex: 1;
text-align: center;
height: 400px;
background-color: #dcffdc;
}
.sidebar {
width: 200px;
text-align: center;
background-color: #e4d9ff;
}
.footer {
text-align: center;
height: 100px;
background-color: #a9f0d1;
}

 

body

  • margin: 0;
    body周囲のマージンをゼロにします。
  • background-color: #fbf5f3;
    バックカラーを#fbf5f3にします。

 

.wrapper

  • max-width: 800px;
    wrapperの横幅の最大値を800ピクセルにします。
  • margin: 0 auto;
    マージンの上下をゼロに、左右をautoにします。左右が同じautoなので、ブラウザの幅が変わっても左右の余白は常に同じになります。よってwrapperはセンタリングされます。

 

.header

  • text-align: center;
    文字をセンタリングします。
  • height: 200px;
    高さを200ピクセルにします。

 

.mainArea

  • display: flex;
    display:flexを設定するとflexboxと呼ばれるレイアウトモードを使用することができます。

 

.sidebar

  • width: 200px;
    サイドバーの幅を200ピクセルにしています。

 

.main

  • flex: 1;
    mainの幅を、wrapperの幅から sidebarの幅を引いた値にします。

 

まとめ

sample2.htmlとstyle.cssの入力と保存は終わりましたか。

sample2.htmlをダブルクリックしてください。

間違いがなければ、バックカラーのみですが3段2列のページが表示されていると思います。

 

HTMLだけだと、3段2列のレイアウトは作るのに少し悩んでしまいます。

しかしCSSを使うことによって、難易度はかなり低くなります。

 

wrapperとmainAriaを使うことによって、子要素を制御しやすくなります。

特に子要素を2列にするため、mainAriaのdisplay: flex;は必須です。

 

wrapperの子要素は、header、mainAria、footerです。

wrapperの幅が変わった場合、子要素も自動的に変わります。

 

mainAriaの子要素は、main、sidebarです。

mainAriaの幅が変わった場合、sidebarの幅は固定ですが mainの幅は伸縮します。

 

3段2列のレイアウトはどうでしたか?思ったほどは難しくなかったと思います。

お役に立てれば幸いです。

ここまで読んでいただき、ありがとうございます。

もっと見る?
【まとめ】パソコン初心者向け★フォトショップから小技まで

パソコンはいつも使っているけど意外と知らないことも。便利な機能が見つかるかも!

-パソコン
-

© 2021 すべての初心者たちへ<オールビギナーズ>