カラムページのカスタマイズ

HTML&CSSとWebデザイン入門を今日教科書としてWebデザインを学習中。

「NEWS」ページのレイアウトをカスタマイズする。 (P223)

1. 3カラムに変更
2. 表示するカラムの順番を変更する

3カラムレイアウトに設定

news.html を開き <div class="news-contents wrapper"> 内に ad クラスのついた <div> タグと画像を追加する。 (P233)

      </aside>
      <!-- AD -->
      <div class="ad"><img src="https://via.placeholder.com/120x600" alt="広告" /></div>
    </div>

窮屈なので article セレクタの横幅を縮める。

/* 記事部分 */
article {
  width: 60%;
  /* width: 74%; */
}

カラムの順番を変える

現状、左からメインエリア、サイドバー、バナー画像の順に並んでいる。 (P225)

左からバナー画像、メインエリア、サイドバーの順に変更する。

今しがた追加した縦長の画像を左端にするということ。

article {
  width: 60%;
  order: 2;
}
...
aside {
  width: 22%;
  order: 3;
}
...
/* 広告 */
.ad {
  order: 1;
}

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座には、記述はありませんが、モバイル表示に切り替えるとバナー広告の表示位置がページトップの大きな画像とニュースコンテンツの間に表示される。

大きくスクロースするのは、訪れたユーザには負担が大きそうです。

モバイル表示では <div class="ad"> を非表示にしておきます。

  .ad {
    display: none;
  }

本来なら、グラフィックデザイナーに横長の広告を発注することになります。 もしくはFigma を勉強するか？時間が...