書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学ぶWebデザイン。

2カラムレイアウト

カラムとは列のこと。垂直方向にコンテンツをグギってレア言うとすることを カラムレイアウト と呼ぶ。 (P198)

コンテンツ量が多いニュースサイトやブログサイトの見せ方に適する。

カラム幅の比率

メインエアリ2対サイドバー1または、3:1の割合が多い。 (P199)

HTMLファイルの編集

「news.html」ファイルを作成し、「index.html」のコードをコピー。タイトルを変更する。

    <title>Full Screen Web - NEWS</title>

ホームページのコンテンツを削除する。 ID 名を「news」に変更。 (P204)

    <div id="news" class="big-bg">

見出し部分を追加

      <div class="wrapper">
        <h2 class="page-title">News</h2>
      </div>

CSSで装飾

「index.html」で読み込んだ「style.css」に追加していく。 (P204)

#news {
  background-image: url(https://via.placeholder.com/2048x628/f0f8cd);
  height: 270px;
  margin-bottom: 40px;
}
#news .page-title {
  text-align: center;
}

フッターを作成

</body> タグのすぐ上にフッターを記述する。

    <!-- FOTOTER -->
    <footer>
      <div class="wrapper">
        <p><small>&copy; 2021 Test Site</small></p>
      </div>
    </footer>

<small> タグは免責や著作権などの注釈を表すタグ。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習している。著作権は著者及び出版社に属する。

コードの再利用は許可されている。「テキスト原稿」の利用は認められていない。

どちらに従うべきかわからない。今回はこのような記述を行う。

© は丸付きCとしてレンダリングされる。

footer {
  background-color: #432;
  text-align: center;
  padding: 26px 0;
  margin-top: 50px;
}
footer p {
  color: #fff;
  font-size: 0.875rem;
}

レイアウトの骨組み

Flexboxを使ってメインエリアとサイドバーを横に並べる。 (P207)

    <!-- NEW CONTENS -->
    <div class="news-contents wrapper">
      <article>メインエリア部分</article>

      <aside>サイドバー部分</aside>
    </div>

<div class="news-contents wrapper"> が　Flexコンテナ 。その中に <article> と <aside> の2つが Flexアイテム

<article> と <aside> の幅を「%」で指定する。 (P208)

/* 記事部分 */
article {
  width: 74%;
}
/* サイドバー */
aside {
  width: 22%;
}

2つのFlexアイテムを足すと「96%」。残りの「4%」はブラウザの両端の余白に分割されるのだろうか？

横並びにするために .news-contents に対し flexを使用。

/* ニュースコンテンツ コンテナ */
.news-contents {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

検証ツールでResponsiveモード、横幅1100pxに設定して「96%」の疑問を観察する。

Visual Inspectorで確認すると「44px」と表示された。

分割されて「2%」ではなく、そのまま「44px」！?検証方法が間違ってる?

space-between は、2つのFlexアイテムを両端揃えにする。3つ以上の場合は、均等に配置される。

「4%」は、HTMLタグで宣言されていない余剰。余剰はFlexアイテムではないので分割されないのか!

　メインエリアを作る

記事上部に表示するタイトル等の部分を作成する。 (P209)

      <article>
        <header class="post-info">
          <h2 class="post-title">Lorem ipsum dolor sit amet.</h2>
          <p class="post-date">3/30 <span>2021</span></p>
          <p class="post-cat">カテゴリー： XXXXX</p>
        </header>
      </article>

日付の装飾

<p class="post-date"> を囲っている <header class="post-info"> をスタイリング。 (P209)

.post-info {
  position: relative;
  padding-top: 40px;
  margin-bottom: 40px;
}

position: relative; と記述したことで <header class="post-info"> からの相対位置で配置する準備が整った。

日付部分をスタイリング。 (P210)

日付部分 <p class="post-date"> の配置基準は、 <header class="post-info"> です。

.post-date {
  background-color: #0bd;
  border-radius: 50%;
  color: #fff;
  width: 100px;
  height: 100px;
  font-size: 1.625rem;
  text-align: center;
  /* 絶対位置指定に切り替え */
  position: absolute;
  top: 0;
  padding-top: 10px;
}

私の頭では一度に理解できない。コメントを入れておきました。

position: absolute; で絶対値 top: 0; の位置、すなわち <header class="post-info"> の上端から「0」の位置に配置される。

さらに padding-top: 10px; と余白を入れ日付部分を下に下げる。下が詰まりすぎ!ですが、この後調整するようです。

月日と年の間に水平線を入れる。 (P210)

.post-date span {
  font-size: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  padding-top: 6px;
  display: block;
  width: 60%;
  margin: 0 auto;
}

font-size: 1rem; とするこで <span>2021</span> を小さくする。

display: block; で年部分が月日の下に落ちる。

日付のスタイリングは難しい。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座を見ずにスタイリングできる日は来ないと言い切れる。

タイトルとカテゴリーの装飾

日付部分をスタイリングしたことにより、タイトルとカテゴリーに重なっている。 (P211)

.post-tile {
  font-family: 'Yu Mincho', 'YuMincho', serif;
  font-size: 2rem;
  font-weight: normal;
}
.post-title,
.post-cat {
  margin-left: 120px;
}

画像と本文を追加

<header class="post-info"> の下に画像と本文を書き加える。 (P212)

      <article>
        <header class="post-info">
          <h2 class="post-title">Lorem ipsum dolor sit amet.</h2>
          <p class="post-date">3/30 <span>2021</span></p>
          <p class="post-cat">カテゴリー： XXXXX</p>
        </header>
        <img src="https://via.placeholder.com/2048x1365/fff0f5" alt="placeholder.comから拝借" />
        <p>
          1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi sunt repellat enim
          molestiae impedit corporis dignissimos a voluptates quaerat, quidem accusantium asperiores
          aperiam quibusdam pariatur incidunt earum magni repudiandae quisquam expedita, natus
          voluptatum? Corporis at et odio dicta ab voluptate, consequatur nemo possimus. Quisquam
          repudiandae quod ad est eos!
        </p>
        <p>
          2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi sunt repellat enim
          molestiae impedit corporis dignissimos a voluptates quaerat, quidem accusantium asperiores
          aperiam quibusdam pariatur incidunt earum magni repudiandae quisquam expedita, natus
          voluptatum? Corporis at et odio dicta ab voluptate, consequatur nemo possimus. Quisquam
          repudiandae quod ad est eos!
        </p>
        <p>初心者に優しいHTML&CSSの書籍！</p>
      </article>

画像と本文に余白を足す。

article img {
  margin-bottom: 20px;
}
article p {
  margin-bottom: 1rem;
}

記事部分はこれで完成とのことです。