はじめに！

今回筆者は初めて記事を書くのでわかりにくい部分があるかもしれませんがご了承ください！
わかりづらいなどありましたら是非コメントをお願いします！
ではさっそく説明に入っていきたいと思います！

前提

この記事は以下の人にオススメです！

楽にレイアウトを横並びにさせたい人！
HTMLのみを用いてレイアウトを横並びにさせたい人！
bootstrapのGrid(グリッド)システムを使ってみたいひと！

Gritシステムは様々な方法を用いてレイアウトを自在に変えることもできますが、今回は初心者の方のために簡単にレイアウトを横並びにする方法を紹介します！
もしGridシステムを用いて様々なことをしてみたいという方は、ネットで調べると様々な記事があると思うので是非そちらも調べてみてください！

1.bootstrapを導入する！

bootstrapを導入していない人は先にbootstrapの導入から行います！
導入を既に済まされている方は、2.Grid(グリッド)システムとは？進んでもらって大丈夫です！

ではさっそくbootstrapの導入から始めていきます！
まずは下のbootstrap公式サイトのリンクにアクセスしてください！
bootstrap公式サイト

下記のようなサイトが表示されたと思います！

次に真ん中のダウンロードと書かれたボタンをクリックします！
そして右上の「Bootstrap v5.0」と書かれたボタンをクリックすると、一番下の方に「All versions」と表示されると思うのでクリックし、verの【4.3】をクリックします！
(筆者は自身のサイトを作成する際に様々なバージョンを試してみましたがバージョン4.3が一番スムーズに導入することができたの当記事でも使用しています！)

下記のような画面が表示されるので真ん中の【CSS】と書かれた下のコードをコピーし、VSコードの方にペーストしていきます！

ペーストする場所としては、下記のようにviews/layouts/application.html.erbの中の<head></head>タグの中であればどこでも構いません！👍

app/views/layouts/application.html.erb

 <head>
    <title>○○○</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
#↑1行上のコードが先ほどコピーしたものになります！
  </head>

これでbootstrapの導入は完了しました！✨✨

2.Grid(グリッド)システムとは？

次にGritシステムとは何かを簡単に説明していきます！
Gridシステムとは一言でいうと、レイアウトをHTMLのみで自在に変えられるものと覚えてもらえれば大丈夫です！

基本的にHTMLはVSコードで箱を横に並べようとしても縦に並んでしまいます！そこでCSSのdisplay :flexなどの他のレイアウトを横並びにする方法もありますが、この場合HTML・CSS両方を用いなければなりません💦

ですがGridシステムを用いるとHTMLのみで簡単にレイアウトを横並びに表示することが可能になります！👀✨ではさっそく実際にGridシステムを導入してきましょう！

3.実際にGrid(グリッド)システムを導入する！

まずは左のサイドバーの Layout の中の Grid をクリックします！すると下記のような画像が表示されると思います！
基本的にbootstrapでは How it works の下に基本的な使い方が説明されてあるので時間があれば読んでみてください！

今回の記事では最初にも述べたように一番基本的な使い方を説明させてもらいます！
今回は横並びの箱を3つ作成することを想定して実際に説明します！

<div class="container">
  <div class="row">
    <div class="col-4">
      1つ目の箱
    </div>
    <div class="col-4">
      2つ目の箱
    </div>
    <div class="col-4">
      3つ目の箱
    </div>
  </div>
</div>

上記のようなコードを記述することで下記画像のように3つの箱が横に並んでいるレイアウトを作成することが可能になります！少しわかりづらかったのでそれぞれの箱の背景に色を付けてみました！このようにみるとちゃんと箱が横にならんでいることが見てわかります！
ちなみに<div class=col></div>の数を減らしたり増やしたりすることで、横並びにしたい箱の数を調整することも可能です！

Gridシステムを使用する上でのポイントは3つの【container】・【row】・【col】というクラスです！
これらのクラスがそれぞれの役割を果たしGridシステムが成り立っています！なのでこれらのクラス名は簡単に変えないようにしましょう！

それぞれのクラスの役割とは

container：Gridシステムの一番外の大枠を担っている
row：箱を横並びにする際の列の枠になっている！そのためrowの数を調整することで列の数の増減を調整することが可能です！
col：横並びになる箱の枠を担っている！上記でも述べたようにcolの数を調整することで横並びにしたい箱の数を調整することができます！

おそらく文字だけではわかりづらいと思うので少しイラストを用いて説明します！
下記の画像を見てください！

このように3つのクラスがそれぞれの役割を担ってGridシステムが成り立っていることがわかると思います！

4.箱のサイズの変更の仕方！

次に箱を横に並べた際に現状だとすべての箱のサイズが均等になっていると思うのでそのサイズの変更方法について解説しようと思います！
みなさん上記のコードを見た際にクラス名colの後ろの4という数字に違和感を覚えませんでしたか？そうです！これがサイズを変更するための指標になっています！

<div class="col-4">

しかし単純にこの数字を大きくすればいいというわけではありません💦

Gridシステムでは画面全体の大きさを12としています！
そのため12を超えると2行に分かれて箱が表示されてしまうので注意してください！
下のコードの場合は箱が3つありそれぞれのサイズが4なので3×4=12で一行に収まるようになっています！

<div class="container">
  <div class="row">
    <div class="col-4">
      1つ目の箱
    </div>
    <div class="col-4">
      2つ目の箱
    </div>
    <div class="col-4">
      3つ目の箱
    </div>
  </div>
</div>

そのため一番左の箱を大きく表示したい際には、colの後ろの数字を8などに書き換えてみましょう！
その場合は、一行に表示する際に全体の数字の合計が12にならなければいけないので注意してください！(今回は一番左以外の数字はそれぞれ2とします！)
一番左の箱のサイズを8に書き換えた画像が下記になります！

このようにしてはこのサイズも簡単に変更することができるのがGridシステムの扱いやすポイントでもあります！👀✨

最後に！

ここまで読んでいただきありがとうございます！
いかがでしたでしょうか？初めて書くということもありわかりづらかったと思いますが、これを機にbootstrapなどを用いて楽にレイアウトや機能を実装してもらえればと思います！

修正補足依頼、アドバイス等ございましたらお願いします！
では失礼します！