プログラミング

コーディングはインナー要素を覚えることから始まる

インナー要素、みなさん使われていますか?

私は毎日5件ほど駆け出しさんのコーディング物を確認しているのですが、皆さんスマホやタブレットの対応はかなり洗練されてきた印象です。

しかし、「インナー要素」への理解がいまいちな場合が見受けられ、これによって大画面PC表示に違和感がある場合が多いため解説します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。本業でエンジニアとしてサイト制作やシステム開発を数年行っており、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う

インナー要素とは

動きとしては以下のような感じです。

via GIPHY

インナー要素のポイント
  • 画面幅が広がってもコンテンツが広がりすぎないようにする
  • インナー要素は中央に寄せる
  • インナー要素以下のサイズのときはコンテンツ(テキストなど)が画面端につかないように余白を取る

コードとしては以下の感じです。

<section class="box">
    <div class="inner">
     <!-- ここにコンテンツ -->
    </div>
  </section>
.inner {
  width: 100%;
  height: 100%;
  max-width: 1022px;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
}

@media screen and (max-width: 767px)  {
  .inner {
    padding-right: 15px;
    padding-left: 15px;
  }
}

max-widthで最大幅を決める

これを使うことで大画面時に無限にインナー要素が広がることを防ぎます。

marginで中央寄せ

margin-right: auto; margin-left: auto; 

これでインナー要素を中央揃えにしています。

paddingはインナー要素の余白

padding-right: 20px; padding-left: 20px;

というのはインナー要素の余白で、コンテンツが画面端につかないようにします。

よくタブレットあたりでテキストが画面端に来てしまっていることがありますが、視認性が下がるため余白を確保しておきます。

@media screen and (max-width: 767px)  {
  .inner {
    padding-right: 15px;
    padding-left: 15px;
  }
}

タブレット以下ではコンテンツ幅を確保するために、余白を少し小さくすることが多いです。

インナー要素の具体例

私が出している【中級】XDデザインからのコーディング実践演習を例に見てみましょう。

このようなデザインがあります。

これを実装する際のインナー要素はどこでしょう?

ダメな例

ちゃんとインナー要素を設定しないと以下のように無限に横に広がって、ハチャメチャになります。

良い例

ヘッダーのような場合は、このようになるかと思います。

ファーストビューはこんな感じですね。

スマホのときもコンテンツが画面端につかないようにします。

インナー要素で大画面にも対応させよう!

最近はスマホ・タブレット以上に大画面PC幅での崩れを指摘することが多いので、インナー要素を記事にしました。

暗黙の了解的に自分も過去覚えましたが、これから使いこなしていってほしいです。

あなたに是非読んでほしい記事です!