Webページのデザイン 要素を横並びにする方法

　プログラミングスクールに通い始めて、１ヶ月ほど経ち、簡単なwebページの制作技術がついてきてので、こちらにまとめていきます
　分かりにくい点や説明に不備があれば、ご指摘ください。

　今回はwebページ製作における要素を横並びに配置する方法をご紹介します。以下に作成したサンプルページを載せておきます。

• Webページ　サンプル

要素の横並びにしているのはヘッダーとフォーム、サイドコンテンツとメインコンテンツの部分です。

1.ヘッダーのアイコンを横並びにする方法

HTML

  <div class = header>
    <div class = icons>
      <div class = icons__icon>
        <p><i class="fas fa-trash fa-3x fa-fw"></i></p>
      </div>
      <div class = icons__icon>
        <p><i class="fas fa-cog fa-3x fa-fw"></i></p>
      </div>
      <div class = icons__icon>
        <p><i class="fas fa-plus fa-3x fa-fw"></i></p>
      </div>
    </div>
  </div>

SCSS

.header{
  height: 100px;
  padding: 0 40px;
  background-color: blue;
}
.icons{
  color: white;
  text-align: right;
  &__icon{
    display:inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    margin-top: 30px;
  }
}
//※リセットCSSとしてress.cssを使用

　headerの中にアイコンの入れ物としてdivタグを並べ、その中にiconを設置。クラス名は※BEMに基づき設定しました。各アイコンはfontawesomeを使用しています。

本題の横並び方法についてですが、ここではインライン要素に対して有効なtext-alignを活用しています。icons__iconはブロック要素divであるため、そのままではtext-alignが効きません。そこで、display:inline-blockとすることでインラインブロック要素に変化し、横並びを実現しています。

※BEM
　BEM（Block Element Modifier）は、独特な命名規則（MindBEMding）で有名な設計思想。
3つの要素をBlock__Element--Modifierのように結合してclass名を決める。公式では、Elementはアンダースコア2つ（__）で結合、Modifierはハイフン2つ（--）で結合する規則になっている。

命名規則　参考
https://qiita.com/buchiya4th/items/127282088f5a9ad56152
https://qiita.com/yuta_web/items/6f2aa6b69e70b0b9f86c
http://getbem.com/

参考
https://saruwakakun.com/html-css/basic/relative-absolute-fixed
https://qiita.com/nezurika/items/5b278c1e134056157164

次回、サイドコンテンツとメインコンテンツに対する横並びの方法を記載します。