はじめに

railsアプリの基本機能が実装できて
さあ、UIブラッシュアップに着手しよ！と思った時に
「レイアウトどうすればいいか分からん…」という状況になった。

webデザインに関する情報は、ネット・書籍でも豊富にあったが
それゆえに情報整理ができなくなってしまった。

ただ、最終的に私が個人的に合う
レイアウト作成法に出会えたので、まとめておく。

Flexbox or Grid？

レイアウトを構想している初期段階は
自分のアプリには、flexboxかgridのどちらを使うのが良いのだろう…
と考えていた。

デザインの主流は、flexboxという記事や参考動画も多かったので
基本的にはflexboxを使うべき！
gridは表示させるコンテンツ量が多くなった時に
効果的な応用技だろ！くらいに思っていた。
（楽天やAmazonなどの商品ラインナップを表示させるみたいなイメージ）

でも、整理がしやすいように両方の技術を併用するのも
個人的には有りではないかと思う。

役割の違い

情報収集していく過程で
両者にはそれぞれ役割に違いがあることが分かった。
お互いの強みを適材適所で使い分けるのが良いということらしい。

ざっくり違いを整理すると

flexbox : 1次元のレイアウト

　　　例）対象グループ内のブロック要素を
　　　　　・縦方向に中央揃えにする
　　　　　・横方向に対してコンテンツの間に均一に空白を空ける

grid : 2次元のレイアウト

　　　例）対象グループ内のブロック要素を
　　　　　横列の１列目150px、２列目300px、３列目150px ...
　　　　　縦列の１列目150px、２列目300px、３列目150px ...　で表示させる
　
ということかなーと解釈。

考えたレイアウト

前置きを前提に、私が勝手に分かりやすい思うレイアウトは

まず、大枠をGridで作る
その後、各ブロック要素をFlexboxで整える

となった。

実装

まず、application.html.erbでレイアウトの基本構成を整える。
（ヘッダー、ナビゲーションバー、メイン、フッターを
renderで別ファイルを参照する構成にしている。）

app/views/layouts/application.html.erb

〜〜省略〜〜

<body>
  <header>
    <%= render 'layouts/header' %>
  </header>

  <nav>
    <%= render 'layouts/navigation' %>
  </nav>

  <main>
    <%= yield %>
  </main>

  <footer>
    <%= render 'layouts/footer' %>
  </footer>
</body>

次に、基本構成の中の_header.html.erbは

１、ロゴ
２、ログイン・ログアウト・サインインの各リンク

といった２つのブロック要素で構成しておく。

app/views/layouts/_header.html.erb


<div>
 <%= link_to image_tag('logo.png', id: 'logo', alt:"〇〇"), "サイトURL"%>
</div>


<div>
 <ul>
   <% if logged_in? %>
     <li><%= link_to "ログアウト", logout_path, method: :delete %></li>
   <% else %>
     <li><%= link_to "ログイン", login_path %></li>
     <li><%= link_to "サインイン", signup_path %></li>
   <% end %>
 </ul>
</div>

最後に、custom.scssでデザインを整える。

まず、Gridでアウトラインを構成する。

１、display: grid;を宣言して
　　grid-template:で縦と横の幅を決定して
　　視覚的にアウトラインを構成する。

２、grid-area: ブロック要素;で
　　application.html.erbで構成したレイアウト（header、main、nav、footer）に
　　grid表内で命名した名前と紐付ける。

続いて、Flexboxでヘッダー内の
ブロック要素の並び方を変更する。

デフォルトではブロック要素が縦並びになるが、
ロゴは左側、各リンクは右側という具合に横並びに表示されるように変更する。

display: flex;を宣言して
justify-content: space-between;で
ブロック要素の間にスペースが空くように設定する。
（※header{}内にコード記載）

app/assets/stylesheets/custom.scss


body{
 display: grid;
 grid-template:
  "..... ...... ...... ...... ...... ...... .....  " auto
  "header header header header header header header" 150px
  "..... ...... ...... ...... ...... ...... .....  " 10px
  "..... navbar ...... main   main   main   .....  " 200px
  "..... ...... ...... main   main   main   .....  " 10px
  "..... footer ...... main   main   main   .....  " 150px
  "..... ...... ...... main   main   main   .....  " 1fr
  "..... ...... ...... ...... ...... ...... .....  " auto
   /10px  200px  10px   1fr    10px   200px  auto;

 header{
  grid-area: header;
  display: flex;
  justify-content: space-between;
 }

 main{
  grid-area: main;
 }

 nav{
  grid-area: navbar;
 }

 footer{
  grid-area: footer;
 }
}

完成イメージ

ざっくりは下記のような感じになるはず。

この図でいうレイアウト自体はGridで
各ブロック要素（ヘッダー等）はFlexboxで
構成するのが個人的に配置しやすかったということ。

終わりに

初学者のため、現状の気づきでまとめている。

今のところ

また、flexboxに関する参考記事が多い理由は

１、flexboxだけでもレイアウト構成が可能なため
　　・方向性を変更（縦→横並び）
　　・余白を入れる（要素に均一にスペースを空ける）
　　・要素を折り返しさせる
を全体のレイアウトに適用させる方法

２、gridがflexboxより新しい技術なため

だと思っている。

途中でもっと良い書き方に気づけば、情報を更新する。

最後までお読みいただき、ありがとうございました！

flexboxとgridを併用してレイアウトを作る