Nagashima Laboratory

CSSによるページレイアウト1（flex）

HTML+CSSによるレイアウトの進め方

  • HTMLの記述
    • 構造に関わるタグ（header,nav,main…）の入力
    • リスト、本文、リンク、画像など、必要な要素の挿入
  • CSSの記述（全体の配置）
    • サイト全体のサイズ決め、ブラウザに対する中央配置
    • 横並びの配置
    • 各エリアのサイズ決め、余白
  • CSSの記述（細かな装飾）
    • 文字、色、境界線…

レイアウト１：フレックスボックスを使ったレイアウト

フォルダ：layout_sample_01

  • 実際の制作作業に近い形で行うため、最終的な完成形のサンプルコードを入力するのではなく、少しずつ追記しながら、レイアウトを完成させていきます
  • 下記のコードを一度に入力するのではなく、都度、ブラウザーで表示を確認しながら進めます

【準備】

①[HTML] HTMLに必須のコードを記述します

Visual Studio Codeを使っている場合は「 ! + tabキー」でも入力できます

▼index.htmlへの追記

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
  • viewportは、レスポンシブ対応のための記述ですが、この作例では画面サイズに応じたレイアウト変更の設定は含まれません

その後、<head>に下記の一文を追加し、style.cssをリンクします

▼index.htmlへの追記

<link rel="stylesheet" href="style.css">

②[HTML] 構造に関するタグを記述します

▼index.htmlへの追記

<body>
  <div id="wrap">
    <header>
        <nav>

        </nav>
    </header>

    <main>
      <section>

      </section>
      <section>

      </section>
      <section>

      </section>
    </main>

    <footer>
      
    </footer>
  </div><!-- #wrap-->
</body>
  • header内にnavが含まれる構造にしています
  • HTMLでのコメントアウトは、<!-- --> を使います
  • ここでは</div>の後ろに使用しています

③[HTML] テキスト、リスト、画像などを挿入

▼index.htmlへの追記

<body>
  <div id="wrap">
    <header>
      <h1>Site Title</h1>
      <nav>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
      </nav>
      <div class="main-visual">
        <img src="images/main-visual.png" alt="メインビジュアル">
      </div>
    </header>

    <main>
      <section>
          <h2>article01</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, explicabo quisquam eligendi fugiat ad fuga, vero! Esse fuga ex, asperiores quisquam consequatur, velit architecto nostrum modi, sunt autem similique rerum.</p>
      </section>
      <section>
          <h2>article02</h2>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, explicabo quisquam eligendi fugiat ad fuga, vero! Esse fuga ex, asperiores quisquam consequatur, velit architecto nostrum modi, sunt autem similique rerum.</p>
      </section>
      <section>
        <div class="container">
	  <div class="column-img">
	    <img src="images/square.png" alt="">
	  </div>
	  <div class="column-text">
	    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, explicabo quisquam eligendi fugiat ad fuga, vero! Esse fuga ex, asperiores quisquam consequatur, velit architecto nostrum modi, sunt autem similique rerum.</p>
	  </div>
	</div>
      </section>
    </main>
    <footer>
      <p>&copy; SampleSite </p>
    </footer>
  </div>
</body>
  • Lorem ipsum…は、英文のダミーテキストです
  • &copy; を入力することで、マルシー（©）が表示されます

④[CSS] 背景色をつける

▼style.cssへの追記（色は一例です）

@charset "UTF-8";

header {
  background: #EEE;
}

section {
  background: #FFF;
}

footer {
  background: #333;
}
  • @charsetでは、文字コードをutf-8に指定しています
  • font-familyやコメントなどに日本語名が含まれる際、文字化け防止になります
  • 本来は背景色の設定は最初に行う必要はありませんが、今回は先に背景色をつけることで、各エリアがどこを表しているのかをわかりやすくします
  • background: #333;と、background-color: #333; は同義です
  • #333と#333333は同義です。2桁ずつ同じ数字が続くときは、一桁ずつ省略して書くことができます。　例：#001122→#012

⑤[CSS] HTMLタグの不要な装飾をリセット +  画像を幅100%に

元々HTMLタグには、固有のmarginやpaddingが設定されています。自分でレイアウトを組むときには、不要であったり、自分で設定した余白がわかりづらくなる問題があります。そこで、初期設定をリセットして制作をするという手法があります。

marginやpaddingのほか、リストの装飾やリンクの下線などもリセット対象にすることが多い項目です

ここでは全ての画像に共通して適用したい項目を同時に設定しています

▼style.cssへの追記

@charset "UTF-8";

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

header {
...
}
  • * は、すべてのセレクタに対して有効になる設定です
  • 画像に対しては、幅を100%（親要素のサイズに合わせる設定）にし、高さはautoに設定しています。これにより、縦横比を変化させずに、幅に合わせて高さを調整できるようになります
  • vertical-alignは垂直方向の配置を表しますが、ここでは画像下に生じる余白を取るために使用しています

⑥[CSS] header/navの装飾

▼style.cssへの追記

header {
  background: #EEE;
}

header h1 {
  text-align: center;
  padding: 1rem;
}

nav ul {
  padding-bottom: 1rem;
  margin: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
  margin: 0 10px;
}

nav ul li a {
  font-weight: bold;
  color: #333;
}
  • liに display: inline-block; を指定することで横並びにしています

補足：インラインとブロック

⑦[CSS] mainの装飾

▼style.css への追記（paddingやmarginの数値は一例です）

<!-- section の前後に追加-->

main {
  padding: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

section {
  background: #FFF;
  padding: 20px;
}

.container{
  display: flex;
  gap: 20px;
}

.column-img {
  flex: 1;
}

.column-text {
  flex: 2;
}
  • .container内の画像とテキストを横並びにさせるために、display: flex; を使用しています（flexの詳細は後述）
  • flex:1;とflex:2; によって、サイズの割合を指定しています。ここでは、画像：テキストが1:2の比率になるようにしてます
  • gapはflexアイテム間の余白の設定です

⑦[CSS] footerの装飾

▼style.css への追記

footer {
  background: #333;
  color: #FFF;
  text-align: center;
  padding: 1rem;
  width: 100%;
}

配置に関するCSSプロパティ

  • flexbox
  • position（絶対配置・相対配置）
  • float（回り込み）
  • grid（グリッドシステム)

Flexbox（Flexible Box Layout Module）

display: flex;を指定した要素（親要素）は、その内部の要素（子要素）を横でも縦でも逆順でも自由に配置することができます

（このとき、親要素のことを、flex containerと呼び、横並びになる要素（子要素）をflex itemと呼びます）

▶基本的な使い方

横並びにしたい要素の親要素にdisplay: flex;を指定します

【応用】テキストと画像の位置を左右逆にする

HTMLには手を加えずに画像とテキストの位置を変更します

▼style.cssへの追記

.container{
  display: flex;
  gap: 20px;
  flex-direction: row-reverse;
}

【応用】フッターを常に画面下部に固定する

フッターはコンテンツエリアのあとに来る部分を指しますが、コンテンツ量が少ないとフッターの下に空白ができてしまいます。常に下部に固定し、見栄えをよくします。

▼style.cssへの追記

body {
  height: 100%;
}

#wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

<!--中略-->

main {
  padding: 1rem;
  flex-grow: 1;
}
  • サイト全体を囲む#wrapをflexボックスにし、高さの最小値（min-height）を、100vh（viewport height: 画面の高さをあわらす単位、%で記述）にすることで、コンテンツが少ない場合にも高さが保たれるようにします
  • flex-grow: 1; は、コンテンツが少ない場合に、mainを引き延ばして余白をうめる役割をしています

positionによる配置

座標を指定して位置を決める方法です。

タイトルロゴ、アイコンなど、部分的な要素について、ブラウザ・header・footerなどを基準に位置を決める場合に用います。通常サイト全体の構造決めには使用しません。

▶基本的な使い方

基準となる要素に、position: relative; を設定します。

例えば、<header>内に、ロゴを固定するのであれば、headerに対して、relativeを指定します。

その上で、<header>内にある、固定したい要素に対して、position: absolute; を設定し、top, right, left, bottom のうち、２つを使って、位置を指定します。（左右の位置と、上下の位置を指定する）

詳しくは、下記ページ（レイアウト2）で解説しています。

→CSSによるページレイアウト2

floatによる配置

文字の回り込みを指定するプロパティです。flexboxが一般化する前まではレイアウトの主流だった方法です。現在では、本来通りの用途で、画像の回り込み設定したり、部分的なレイアウト設定に使われることがあります。

▶基本的な使い方

左寄せにしたい要素に、float: left;、右寄せにしたい要素に、float: right; をすることで、次に来る要素が回り込みます。回り込ませたくない場合は、clear: both; を指定します。

親要素からのはみ出しを防ぐには、親要素側に、overflow: hidden; を設定します。

▼index.htmlへの追記例

<article>
<p><img src="images/sample.png" alt="画像"></p>
<p>・・・・・・・</p>
</article>

▼style.cssへの追記例

article img {
  float: left;
}

article {
  overflow: hidden;
}

CSS Gridによる配置

格子状のマス目をつくり、マス目の上に自由に配置する方法です。

→各ブラウザの対応状況（Can I Use）

▶基本的な使い方

親要素にdisplay: grid;を指定した上で、各要素には、マス目上の使いたいエリアを指定します。詳しくは、下記ページ（レイアウト3）で解説しています。

→CSSによるページレイアウト3

参考リンク

() Category: 資料 Tags: