1. はじめに

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

1-1. この記事のやりたいこと

・2列の記事集を作成
・高さはスクリーンに合わせる
・行列にはグリッドレイアウトを用いる
・画面外の要素はスクロールで表示

1-2. 得た知識

水平方向に中央揃えにする3つの方法。
フレックスボックスとグリッドレイアウトの使い分け
暗黙のトラック
スクロールバー
floatとflexboxの使い分け
calc()関数
ブロックレベルのリンクを作成する

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-1. やりたいこと

・画面中央に記事集の領域を配置する

2-1-2. コード

HTML

HTML

  <main class="article-list-wrapper">
    記事集の領域
  </main>

CSS

CSS

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

   margin: 0 auto;
}

2-1-3. ポイント

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

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

インライン要素を中央揃えにする(text-align: center;)

ブロックレベル要素を中央揃えにする(margin: 0 auto;)

フレックスアイテムを中央揃えにする(justify-content: center;)

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

2-1-4. 参考文献

【初心者・独学】margin: 0 auto;で要素を中央揃えにする。

2-2. グリッドレイアウトを用いて2列n行に並べる

2-2-1. やりたいこと

・2列n行に並べる

2-2-2. コード

HTML

HTML

  <main class="article-list-wrapper container">
    <div class="article-list-item">
    </div>
　　　・
　　　・
  </main>

CSS

CSS

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

2-2-3. ポイント

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

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

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

グリッドレイアウトの指定方法
display: grid;

列の定義
grid-template-columns: 幅の数値;
幅の数値の数＝列の数

行の定義
grid-template-rows: repeat(回数,　行の高さ);

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

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

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

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

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

2-2-4. 参考文献

CSS Gridが適しているレイアウト、Flexboxが適してるレイアウトを詳しく解説
 HTML&CSSとWebデザインが1冊できちんと身につく本
 grid-auto-rows

2-3. 画面外の表示をスクロールで表示させる

2-3-1. やりたいこと

・Y軸のみスクロール
・スクロールバーは未表示

2-3-2. コード

HTML

HTML

  <main class="article-list-wrapper container article-list-scrol">
    <div class="article-list-item">
    </div>
　　　・
　　　・
  </main>

CSS

CSS

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

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

2-3-3. ポイント

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

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

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

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

2-3-4. 参考文献

スクロールバー＋スクロールバーカスタマイズ

2-4. 図と記事を追加する

2-4-1. やりたいこと

・図の右にテキストを並べる
・あふれたテキストはスクロールで表示

2-4-2. コード

HTML

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>

CSS

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;
}

2-4-3. ポイント

テキストを図の右に並べたいんやがどないしよ

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

2-4-4. 参考文献

floatとflexboxの使い分け

2-5. 見出し作成

2-5-1. やりたいこと

・見出しの追加
・幅は、アイテム2つ+間
・calc()関数を使う

2-5-2. コード

HTML

HTML

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

CSS

CSS

 .article-list-header {
   font-size: 20px;
   padding: 10px;
   width: calc(260px * 2 + 10px);
  
   margin: 0 auto 5px;
 }

2-5-3. ポイント

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

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

2-5-4. 参考文献

calc()関数

2-6. ブロックレベルのリンクを作成する

2-6-1. やりたいこと

・テキストにカーソルを合わせたとき飛べるようにする

2-6-2. コード

HTML

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>

2-6-3. ポイント

リンク
a href="～"

2-6-4. 参考文献

ブロックレベルのリンクを作成する

3. まとめ

グリッドレイアウトで2列の記事集を作ってきた。