【HTML/CSS】グリッドレイアウトで2列の記事集を制作する

# 1. はじめに
HTML/CSSを勉強して1ヶ月も経っていない人間による備忘録です。
間違い、冗長なコードがあります。
最適方法やアドバイスなどコメントいただけると幸いです。

## 1-1. この記事のやりたいこと
・2列の記事集を作成
・高さはスクリーンに合わせる
・行列にはグリッドレイアウトを用いる
・画面外の要素はスクロールで表示
![記事一覧完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/990f5cab-4b2b-c144-6923-92c14f6187a8.png)

## 1-2. 得た知識
* [水平方向に中央揃えにする3つの方法。](#2-1-3-ポイント)
* [フレックスボックスとグリッドレイアウトの使い分け](#2-2-3-ポイント)
* [暗黙のトラック](#2-2-3-ポイント)
* [スクロールバー](#2-3-3-ポイント)
* [floatとflexboxの使い分け](#2-4-3-ポイント)
* [calc()関数](#2-5-3-ポイント)
* [ブロックレベルのリンクを作成する](#2-6-3-ポイント)

## 1-3. 記事作成までにやったこと
Progate：HTML/CSS、一周
Udemy：ちゃんと学ぶ、HTML/CSS + JavaScript、セクション3まで
HTML&CSSとWebデザインが1冊できちんと身につく本：流し読み
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 ：流し読み

## 1-4. 開発環境
ブラウザ　：GoogleChrome（100.0.4896.88）

スクリーン解像度：1920×1080

## 1-5. この記事の注意事項
・わかりやすいよう
　background-colorやborderなどを指定していますが、
　目的以外のコードは割愛しています。

・前回からコードの変更がないことろも割愛しています。

ってことで、それでは作っていくっ！！

# 2. 実装
<!-- ------------2-1------------ -->
## 2-1. 領域を作成
### 2-1-1. やりたいこと
・画面中央に記事集の領域を配置する
![記事一覧_領域.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/a8c1babe-fa9d-d507-3907-f2bd55f112c7.png)


### 2-1-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <main class="article-list-wrapper">
    記事集の領域
  </main>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .article-list-wrapper {
   height: 100vh;　　
   width: 600px;

   margin: 0 auto;
}
```
</details>

### 2-1-3. ポイント

どないして、真ん中にもってこればええんや？

水平方向に中央揃えにするには、3つの方法がある。

:::note
インライン要素を中央揃えにする(text-align: center;)
:::
:::note
ブロックレベル要素を中央揃えにする(margin: 0 auto;)
:::
:::note
フレックスアイテムを中央揃えにする(justify-content: center;)
:::

今回は、1つの領域確保のため、
「margin: 0 auto;」を使用していくっ

### 2-1-4. 参考文献
[【初心者・独学】margin: 0 auto;で要素を中央揃えにする。](https://koshian-toast.com/margin-auto/)
<!-- ------------2-1------------ -->
<!-- ------------2-2------------ -->
## 2-2. グリッドレイアウトを用いて2列n行に並べる
### 2-2-1. やりたいこと
・2列n行に並べる
![記事一覧_スクロール表示.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/10a9bb20-257c-1153-5c52-cabfa8bba18f.png)


### 2-2-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <main class="article-list-wrapper container">
    <div class="article-list-item">
    </div>
　　　・
　　　・
  </main>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .container {
   display: grid;
   grid-template-columns: 260px 260px;
   /*grid-template-rows: repeat(100,140px);*/
   grid-auto-rows: 140px;
   gap: 10px;
  
   justify-content: center;
 }
```
</details>

### 2-2-3. ポイント
まず、要素を並べるにあたって
フレックスボックスを用いるべきか、
グリッドレイアウトを用いるべきか、どっちな～んだい？

:::note
**フレックスボックスとグリッドレイアウトの使い分け**
1次元に要素を配置するのはFlexboxが適している。
2次元に要素を配置するのはGridが適している。
:::

なるほど！ほなGridでいきましょか

:::note
**グリッドレイアウトの指定方法**
display: grid;
:::
:::note
**列の定義**
grid-template-columns: 幅の数値;
幅の数値の数＝列の数
:::
:::note
**行の定義**
grid-template-rows: repeat(回数,　行の高さ);
:::

:question:あらかじめ繰り返す回数を100とかにして、
　あとからアイテムを追加した際も同じ高さになるようすべきか。
　しかし、これやとスクロール設定時に100要素分の無駄な余白ができてしまう。
　（2列なので実際は50要素分の高さ）

　今後、子要素数が増えたときに毎回繰り返し回数も増やすのは面倒であり、
　子要素が増えるたびに自動で高さを揃えるにはどうしたらええんや？
　⇒grid-auto-rowsを使う

:::note
**暗黙のトラック**
grid-auto-rows: 行の高さ;
:::

用意したトラックよりも要素が多い場合、
自動でトラックが拡張される。⇒暗黙のトラック


:::note
**行・列の余白を定義**
gap: 数値;
:::


### 2-2-4. 参考文献
[CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説](https://coliss.com/articles/build-websites/operation/css/css-grid-vs-flexbox-which-should-you-choose.html)
[HTML&CSSとWebデザインが1冊できちんと身につく本](https://www.amazon.co.jp/HTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8C1%E5%86%8A%E3%81%A7%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%E6%9C%AC-%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88-%E6%9C%8D%E9%83%A8-%E9%9B%84%E6%A8%B9/dp/4297125102/ref=asc_df_4297125102/?tag=jpgo-22&linkCode=df0&hvadid=553954433678&hvpos=&hvnetw=g&hvrand=12266084422123572068&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9053270&hvtargid=pla-1465238908295&psc=1&th=1&psc=1)
[grid-auto-rows](https://developer.mozilla.org/ja/docs/Web/CSS/grid-auto-rows)

<!-- ------------2-2------------ -->
<!-- ------------2-3------------ -->
## 2-3. 画面外の表示をスクロールで表示させる
### 2-3-1. やりたいこと
・Y軸のみスクロール
・スクロールバーは未表示
![記事一覧_スクロール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/9a6676d8-8f2b-b082-430e-bc8dc93aa56a.png)

### 2-3-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <main class="article-list-wrapper container article-list-scrol">
    <div class="article-list-item">
    </div>
　　　・
　　　・
  </main>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .article-list-scrol {
   overflow-y: scroll;
 }

 .article-list-scrol::-webkit-scrollbar {  
   display: none;
 }

```
</details>

### 2-3-3. ポイント

:::note
**はみ出てしまう部分をスクロールさせる**
overflow: scroll;
:::

Y軸方向のみの場合は、overflow-y
X軸方向のみの場合は、overflow-x

:::note
**スクロールバーを未表示にする**
 .article-list-scrol::-webkit-scrollbar {  
   display: none;
 }
:::

ブラウザごとに記述方法が異なる


### 2-3-4. 参考文献
[スクロールバー＋スクロールバーカスタマイズ](https://digitor.jp/textbook/html-scrollbar/)
<!-- ------------2-3------------ -->
<!-- ------------2-4------------ -->
## 2-4. 図と記事を追加する
### 2-4-1. やりたいこと
・図の右にテキストを並べる
・あふれたテキストはスクロールで表示
![記事一覧_記事.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/70015d43-014c-cb23-ec83-10070128cd2c.png)


### 2-4-2. コード
<details><summary>HTML</summary>

```markdown:HTML
    <div class="article-list-item">
      <img class="article-list-img" src="./imgs/no_image_tate.jpg">
      <p class="article-list-text article-list-scrol">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .article-list-item {
  padding: 10px;
}

.article-list-img {
  height: 100%;
  width: 40%;
}

.article-list-text {
  font-size: 3px;
  height: 100%;
  width: 60%;
  float: right;
  padding-left: 10px;
  overflow-y: scroll;
}
```
</details>

### 2-4-3. ポイント
テキストを図の右に並べたいんやがどないしよ

:::note
**floatとflexboxの使い分け**
テキストの回り込みはfloat
横並びはflexbox
:::

### 2-4-4. 参考文献
[floatとflexboxの使い分け](https://corecolors.net/css13/)
<!-- ------------2-4------------ -->
<!-- ------------2-5------------ -->
## 2-5. 見出し作成
### 2-5-1. やりたいこと
・見出しの追加
・幅は、アイテム2つ+間
・calc()関数を使う
![記事一覧完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1300e92e-e875-4176-9802-b41f059b7282.png)


### 2-5-2. コード
<details><summary>HTML</summary>

```markdown:HTML
  <main class="article-list-wrapper article-list-scrol">
    <h1 class="article-list-header">記事一覧</h1>
    <div class="container">
    </div>
  </main>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .article-list-header {
   font-size: 20px;
   padding: 10px;
   width: calc(260px * 2 + 10px);
  
   margin: 0 auto 5px;
 }
```
</details>

### 2-5-3. ポイント

:::note
**calc()関数**
プロパティの値に計算式を使える
:::

いちいち電卓をたたかなくてよい

### 2-5-4. 参考文献
[calc()関数](https://zero-plus.io/media/css-calc/)

<!-- ------------2-5------------ -->
<!-- ------------2-6------------ -->

## 2-6. ブロックレベルのリンクを作成する
### 2-6-1. やりたいこと
・テキストにカーソルを合わせたとき飛べるようにする
![記事一覧完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/1300e92e-e875-4176-9802-b41f059b7282.png)

### 2-6-2. コード
<details><summary>HTML</summary>

```markdown:HTML
      <div class="article-list-item">
        <a href="#">
          <img class="article-list-img" src="./imgs/no_image_tate.jpg">
          <p class="article-list-text article-list-scrol">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
        </a>
      </div>
```
</details>

### 2-6-3. ポイント

:::note
**リンク**
a href="～"
:::

### 2-6-4. 参考文献
[ブロックレベルのリンクを作成する](https://gray-code.com/html_css/making-the-link-of-block-level/)


# 3. まとめ
グリッドレイアウトで2列の記事集を作ってきた。

## 3-1. 得た知識
* [水平方向に中央揃えにする3つの方法。](#2-1-3-ポイント)
* [フレックスボックスとグリッドレイアウトの使い分け](#2-2-3-ポイント)
* [暗黙のトラック](#2-2-3-ポイント)
* [スクロールバー](#2-3-3-ポイント)
* [floatとflexboxの使い分け](#2-4-3-ポイント)
* [calc()関数](#2-5-3-ポイント)
* [ブロックレベルのリンクを作成する](#2-6-3-ポイント)