インター、コンテイナーについて

Webサイトをコーディングし始めた方が最初にぶつかる壁が「コンテンツの中央揃え」です。
基本どのWebサイトにも利用される考え方でデザインやレイアウトの肝となる部分なので、この記事を読んで理解しましょう。
重要な部分ではありますが、簡単に流用できるので内容を理解し、テンプレート化してコーディングに役立ててください。

コンテンツの中央揃えを知ろう

ここでいうコンテンツの中央揃えというのは、下の画像のようにWebサイトのコンテンツが入る部分をウィンドウ幅に関わらず真ん中に位置させることを指します。

例えば、この場合は青色でハイライトされた部分がインナー要素というものを用いて、コンテンツを中央に寄せた部分を表したものになります。
※インナー要素についてはこの後説明します。

コンテンツの中央揃えに使うClass名

前項でも出てきたインナー要素とは、中央揃えのために入れ子構造にしたdivのことを言います。divにClass名を付与するのですが、Class名は下記2つのどちらかを用いて表現することが多いです。

inner
container

本プランではinner(インナー)を使います。この後の説明でも引き続きインナー要素と表記します。

インナー要素があると何が違うのか

インナー要素はサイトをレスポンシブ対応させるために必要になります。Webサイトにインナー要素が設定されていないと画面幅が広くなった時に要素が左右に散ってしまい見にくくなってしまいます。なので、コンテンツをインナー要素の中に入れることで画面幅が変わってもコンテンツが中央に寄せられ見やすくなります。

インナー要素がない場合　PC版

インナー要素がない状態で画面幅が広がってしまうと以下の画像のようなレイアウトになってしまうので見にくいです。（画面幅2000px）

コードで見ると以下のようになります。

インナー要素がある場合　PC版

インナー要素があると画面幅が広がっても要素が中央寄せになります。（画面幅2000px）

コードで見ると以下のようになります。クラスにinnerが入っているのが確認できます。

インナー要素がない場合　SP版

インナー要素を設定していない状態だと左右に余白がないので、レスポンシブ時にコンテンツの終わりが分かりにくいです。

インナー要素がある場合　SP版

インナー要素を設定している状態だと左右に余白がつくのでレスポンシブ時もコンテンツの終わりが分かりやすいです。

コンテンツの中央揃えの書き方

コンテンツの中央揃えの書き方は下記のようになります。

//style.scss
.inner {
  width: 100%;
  max-width: 1024px;
  padding-right: 16px; //右側の余白
  padding-left: 16px;　//左側の余白
  margin: 0 auto; //中央寄せ
}

この時にmax-widthの値はインナー要素の幅＋左右の余白に設定します。
インナー要素の幅 = 992px
左右の余白 = 16px X 2 = 32px
max-width = 992px + 32px = 1024px

実際のコードは以下のようになります。

<div><div class="inner"> ここにコンテンツが入る </div> </div>

簡単なボタンを作ってみよう

ここで学んだインナーを含めて簡単なボタンを作ってみましょう。以下のリンクに今回使うファイルが入っているのでダウンロードしてください。
ファイルをダウンロードしたら以下の手順で、指定のフォルダに配置するようにしてから実践してみてください。

作業ファイルをダウンロード(リンクをクリックして、右上に出てくる三点ポチを押してみてください)
「inner」フォルダを作成
１でダウンロードした作業ファイルを「inner」フォルダに以下の画像のように格納
VSコードでフォルダまたはファイルを開く

【目的】
インナー、コンテイナーについて理解する

【リンク】
・作業ファイル
index.html
stylesheet.css

・完成ファイル
index.html
stylesheet.css

【完成イメージ】
見本サイトの通り検証ツールで、ウィンドウ幅1280px表示にした時に、ボタンが中央に寄った状態にしてください。