2021-02-13

お問い合わせページの制作

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

今日からは「お問い合わせページ」の制作に入る。

お問い合わせページの制作

お問い合わせページを「CONTACT」ページとして制作する。「menu.html」を複製し「contact.html」を保存。 (P251)

<title > を編集。

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

不要なコンテンツを削除する。

id 名を変更。 (P252)

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

見出しを追加する。「header」の下にお問い合わせフォームを追加する。

      <!-- CONTACT FORM -->
      <div class="wrapper">
        <h2 class="page-title">Contact</h2>
        <form action="#">
          <div>
            <label for="name">WWW</label>
            <input type="text" id="name" name="your-name">
          </div>

          <div>
            <label for="email">メールアドレス</label>
            <input type="email" id="email" name="your-email">
          </div>

          <div>
            <label for="message">メッセージ</label>
            <textarea name="your-message" id="message"></textarea>
          </div>

          <input type="submit" class="button" value="送信">
        </form>
      </div>

ラベルは <label> タグで囲み、 for 属性をつける。 for 属性と id 属性の値を同じものにして関連付ける。

関連付けるとなにがうれしいのか？

MDNのでは、2つの利点が説明されている。

ラベルのテキストが、対応するテキスト入力欄に視覚的に関連付けられるだけではありません。プログラム的にも関連付けられます。

関連付けられたラベルをクリックして、入力欄自体をクリックした場合と同様に、入力欄にフォーカスを与えたりアクティブ化にしたりすることができます。

for 属性が必要な理由も

<label> を <input> 要素に関連付けるには、 <input> に id 属性を設定しなければなりません。そして <label> に for 属性を設定して、値を input の id と同じにします。

と説明されています。

contact.html をブラウズすると書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座通りになりません。

書籍では、送信ボタンとフッターの間に余白がある。わからないが先に進むことにする。

背景画像を表示

フォームの後ろに背景画像を設置する。

#contact {
  background-image: url(https://via.placeholder.com/2048x1365/ddd);
  min-height: 100vh;
}

背景画像の設置と同時に送信ボタンとフッターの間に余白が生まれました。

フォームの装飾

フォームの各パーツを装飾する。 (P254)

<input> タグの各属性は [] で指定できる。

form div {
  margin-bottom: 14px;
}
label {
  font-size: 1.125rem;
  margin-bottom: 10px;
  display: block;
}
input[type='text'],
input[type='email'],
textarea {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px;
  font-size: 1rem;
}
input[type='text'],
input[type='email'] {
  width: 100%;
  max-width: 240px;
}
textarea {
  width: 100%;
  max-width: 480px;
  height: 6rem;
}
input[type='submit'] {
  border: none;
  cursor: pointer;
  line-height: 1;
}

input[type='text'] 及び input[type='email'] と textarea には、それぞれ width: 100 が設定されています。

しかしブラウザでは横幅が違っています。

これは、それぞの max-width を 240px と max-width: 480px; に設定しているからです。

親要素をに対する 100% と誤解し、数時間悩んだのは内緒！

モバイル版では余白と入力フォームの幅を調整します。 (P255)

  #contact .page-title {
    margin-top: 40px;
  }

  /* フォーム */
  input[type='text'],
  input[type='email'],
  textarea {
    max-width: 100%;
  }

地図を表示

id location のついた <section> タグを追加する。必要な事柄を記入。 (P257)

Gooleマップを埋め込んで使う。

    <section id="location">
      <div class="wrapper">
        <div class="location-info">
          <h3 class="sub-title">AAAAA</h3>
          <p>
            住所：DDDEEE<br />
            FFFFFFFFF 999-99-9<br />
            GGGGG<br />
            電話：11-1234-9876<br />
            営業時間：10:00～10:10 休日：毎曜日
          </p>
        </div>
        <!-- GOOGLE MAP -->
        <div class="location-map">Googleマップ</div>
      </div>
    </section>

<div class="location-map">Googleマップ</div> の Googleマップ を書き換える。 (P258)

        <div class="location-map">
          <iframe
            src="https://www.google.com/maps/embed?pb=..."
            width="800"
            height="400"
            frameborder="0"
            style="border: 0"
            allowfullscreen=""
            aria-hidden="false"
            tabindex="0"
          ></iframe>
        </div>

見栄えを整える

Flexboxを使って店舗情報となるAAAAAと地図を横に並べる。

#location {
  padding: 4% 0;
}
#location .wrapper {
  display: flex;
  justify-content: space-between;
}
.location-info {
  width: 22%;
}
.location-info p {
  padding: 12px 10px;
}
.location-map {
  width: 74%;
}

Flexboxはどこに効果を及ぼすのか？

セレクタは #location .wrapper と定義しました。これは子孫結合子です。

子孫結合子

2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。

htmlでは次のように記述しました。

    <section id="location">
      <div class="wrapper">
        <div class="location-info">
          <!-- 店舗情報 -->
        <div class="location-map">
          <!-- Google map -->

<div class="location-info"> と <div class="location-map"> がFlexアイテムになります。

justify-content: space-between; は <div class="wrapper"> の左右端に配置される。 .wrappe のデスクトップ版の横幅は、 1100px です。

.wrapper {
  max-width: 1100px;

.location-map の width: 74%; は、「news.html」の article の width: 74%; とデザインの統一感をもたせるためだと思われます。

SNS プラグインの挿入

snsという id のついた <section> タグを用意する。 (P260)

sns-box クラスのついた <div> タグを用意する。

    <!-- SNS PLUGIN -->
    <section id="sns">
      <div class="wrapper">
        <div class="sns-box">
          <h3 class="sub-title">Facebook</h3>
          Facebookプラグイン
        </div>

        <div class="sns-box">
          <h3 class="sub-title">Twitter</h3>
          Twitterプラグイン
        </div>

        <div class="sns-box">
          <h3 class="sub-title">YoutTube</h3>
          YoutTubeプラグイン
        </div>
    </section>

スタイリングを行います。

#sns {
  background-color: #faf7f0;
  padding: 4% 0;
}
#sns .wrapper {
  display: flex;
  justify-content: space-between;
}
#sns .sub-title {
  margin-bottom: 30px;
}
.sns-box {
  width: 30%;
}

#sns .sub-title セレクタの下線が色 #0bd になっているは、見出しの装飾を継承しているからです。本当は、レンダリング結果をみて検証ツールで判明しました。

すでに300行近いスタイルの設定を覚えておくなど不可能。設計段階での検討をしっかりやる必要があるのだろう。

YouTube動画のコード取得

FacebookとTwitterのプラグインを使うにはアカウントが必要。今回はYouTube動画のみを埋め込みます。

YoutTubeプラグインを置き換える。

          <iframe width="560" height="315" src="https://www.youtube.com/embed/nzp3c_QH_a0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

スマートフォン版では要素を横並びにする。

@media (max-width: 600px) {
  ...
  #location .wrapper,
  #sns .wrapper {
    flex-direction: column;
  }
  .location-info,
  .location-map,
  .sns-box {
    width: 100%;
  }
  .sns-box {
    margin-bottom: 30px;
  }
}

店舗情報、地図、各種SNS プラグインを flex-direction: column; で縦に並べる。

  #location .wrapper,
  #sns .wrapper {
    flex-direction: column;
  }

  .location-info,
  .location-map,
  .sns-box {
    width: 100%;
  }

width: 100%; モバイル版でスタイリングする前は、デスクトップ版の width: 22%; で幅が設定されている。

モバイル版で改めて width: 100%; とすることで縦長に配置された店舗情報を横いっぱいに広げた。

OGPの設定と外部メディアのカスタマイズについては、今回は扱わない。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でのWebデザインを一通り終えた。

まとめ

覚えたこと

positionプロパティの relative/absolute の意味を理解した
Flexboxの親子関係が把握できるようになった

もっと積み重ねが必要なこと

girdレイアウトの使いこなし
レスポンシブデザインへの理解
そもそもタイポ、スペルミスの削減

フロントエンドの知識不足を痛感し、かつて挫折した書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座を再度、手に取り学習を行った。

知識は少しは増えた。不足している事柄を明確にすることができた。

知識が忘却の彼方に消えないように学びを継続しなければ...

続編にあたるほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座に期待してます。

2021-02-12

タイル型レイアウト

HTML&CSS と Web デザイン入門でWebデザインを学ぶ。

タイル型レイアウトとは

タイル型レイアウトとは、画像や四角形の要素を並べたレイアウトのこと(P228)。整った印象になる。

「MENU」ページではCSSグリッドを使ってレスポンシブ対応させる。

ファイルを準備

「news.html」を複製し、「menu.html」を作成する。 (P232)

複製したので、「news.html」には viewport の記述が存在する。

編集する

MENUページ用にタイトルを編集する。

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

不要な部分を削除

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

id名を変更

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

見出し部分を変更

ページの見出しや紹介文を追加。 (P233)

    <!-- MENU CONTENS -->
    <div class="menu-content wrapper">
      <h2 class="page-title">Menu</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde aliquam magni ducimus eveniet
        maxime id voluptatum rerum quisquam atque!
      </p>
    </div>

背景画像や見出しの高さ、余白などを指定する。

#menu {
  background-image: url(https://via.placeholder.com/2048x1365/ccf);
  min-height: 100vh;
}
.menu-content {
  max-width: 560px;
  margin-top: 10%;
}
.menu-content .page-title {
  text-align: center;
}
.menu-content p {
  font-size: 1.125rem;
  margin: 10px 0 0;
}

モバイル版では余白のみ調整する。

  /* MOBILE MENU */
  .menu-content {
    margin-top: 20%;
  }

コンテンツを用意する

画像とテキストは item クラスの <div> タグで囲む。 (P236)

さらに9つの item を gird クラスのついた <div> タグで囲む。

    <!-- GRID CONTAINER & ITEM -->
    <div  class="wrapper grid">
      <div class="item">
        <img src="https://via.placeholder.com/620x460/4ff" alt="" />
        <p>1.イメージキャプションイメージキャプション</p>
      </div>
      ...
      <div class="item">
        <img src="https://via.placeholder.com/620x460/4ff" alt="" />
        <p>9.イメージキャプションイメージキャプション</p>
      </div>
    </div>

画像とテキストが縦に並ぶ。

CSSグリッドを使う

grid クラスに対して display: grid; を指定する。 (P237)

 /* 3*3 GRID */
.grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 6%;
  margin-bottom: 50px;
}

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座の記述 1fr 1fr 1fr; は、 repeat(3, 1fr); と書くことができる。

  grid-template-columns: 1fr 1fr 1fr;

これで「1:1:1」の割合で1列に3つの要素を横に並べられる。画面幅に合わせて自動で伸縮する。

gap: 26px; で要素同士の余白を指定する。

レスポンシブ対応

repeat関数 を使った repeat(3, 1fr); は、ここで説明されていました。 (P238)

要素幅の最小値最大値の指定

スマートフォン版では画像が小さすぎる。minmax を使って最小値と最大値を指定する。 (P239)

  grid-template-columns: repeat(3, minmax(240px, 1fr));
  /* grid-template-columns: repeat(3, mimmax(240px, 1fr)); */

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のような表示になりません。

時間が溶ける。

minmax を mimmax とタイポ！ VSCode は何も警告してくれない。

幅に合わせて折り返し

auto-fit を使えば要素を折り返しながら親要素の余ったスペースが埋まる。 (P240)

grid-template-columns: repeat(atuo-fit, minmax(240px, 1fr));

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のような表示になりません。

見本では、1列の画像の表示数がレスポンシブ対応している。

テキスト比較ツール difff《ﾃﾞｭﾌﾌ》で比較。違う点は...

コメントの書き方
border-bottom の solid 属性を2番めに書くか3番めに書くか
background を background-color と書いている
background-image 画像を外部サービスで取得している

上記の点なのだが？今度ばかりは、原因がわからない。

挫折！

見本のCSSコードをコピーして background-image セレクタの url 属性値を書き換えて乗り切ることにする。

タイル型レイアウトのカスタマイズ

時間が溶けることが多いです。それでも、頑張って書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習を続けるよ。

サイズ違いの要素を配置

同じ大きさで配置していた要素の中に、目立たせたい部分のみ大きく表示させる。 (P242)

大きく表示したい要素へ新しく big-box クラスを追加する。

    <div class="wrapper grid">
      <div class="item big-box">

大きいサイズのグリッドアイテムを指定

今回はグリッドラインの1から3番めを指定する。 (P243)

始まりのライン/終わりのライン」のようにスラッシュで区切って grid-column: 1 / 3; と記述する。

縦のラインも grid-row: 1 / 3; と記述する。

.big-box {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

画像の高さを揃える

大きい画像と小さい画像の高さを揃える。 (P244)

.big-box img {
  height: 94%;
  width: 100%;
}

確かに高さは揃った。では, 94% の理由はなんだろう？画像や余白の高さを計測したがわからない。

トリミング

指定したサイズからはみ出した部分を object-fit プロパティでトリミングする。 (P244)

  object-fit: cover;

ダミー画像を使用しているためスタイリングの効果がわからない。

レスポンシブ対応

スマートフォン表示ではちぐはぐな大きさで並べられているのを修正する。 (P245)

  .big-box {
    grid-column: auto;
    grid-row: auto;
  }
  .big-box img {
    height: 100%;
  }

2021-02-11

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

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

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

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

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 を勉強するか？時間が...

2021-02-09

レスポンシブ対応

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

レスポンシブWebデザインとは、表示領域の幅によって見え方がかわるようにデザインされたWebサイトのこと。 (P216)

カラム数を1カラムにしたり、メニュー用のアイコンをタップすることで、ナビゲーションメニューを表示させる方法がある。 (P217)

viewportの設定

viewportとは、様々なデバイスにおける表示領域のこと。 (P218)

    <meta name="viewport" content="width=device-width, initial-scale=1">

VSCodeでEmmetを使うと自動で入力される呪文のことですね。

メディアクエリーの基本

メディアクエリーは、Webページが表示された画面サイズに合わせて適用する、CSSを切り替え機能。 (P218)

@media (max-width: 600px) {
  h1 {
    color: #0bd;
  }
}

上記の記述では、0から600pxの範囲の画面サイズに足して <h1> のテキストの前景色の色を指定している。

文字サイズと余白を調整

モバイル版の全ページ共通部分を「style.css」の一番下に記述する。 (P219)

/* MOBILE STYLE 0-600px*/
@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }

  /* MOBILE HEADER */
  .main-nav {
    font-size: 1rem;
    margin-top: 10px;
  }

  /* MOBILE HOME */
  .home-content {
    margin-top: 20%;
  }
}

コンテンツを縦並びにする

デスクトップバージョンでは、ロゴとナビゲーションメニューをFlexboxを使って横に並べた。スマートフォンバージョンでは縦に並べる。 (P220)

  .page-header {
    flex-direction: column;
    align-items: center;
  }

いいえ、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座の通りに縦並びになりません。

CSSを見直したり、ブラウザの表示をリロードしたり...

数時間が溶ける。

「index.html」は縦並びになっている
「news.html」に変化なし
viewport を「news.html」に追加するのを忘れていた

わかってしまえば簡単なことです。

すべてのページでレスポンシブ対応するので、すべてのページに viewport を追加するの必要があるのは当然です。

今回は書籍に従ってEmmetを使わなかった。 viewport の大切さが身にしみた。多分一生忘れない！

続いてnewsページのメインエリアとサイドバーを縦に並べる。

@media (max-width: 600px) {
  ...
  /* NEWS */
  .news-contents {
    flex-direction: column;
  }
  article,
  aside {
    width: 100%;
  }
}

縦並びになりました。しかし、コンテンツを横幅いっぱいに広げる width: 100%; が効いていません。

数時間が溶ける。

VSCodeの「Live Server」でWebサイトの見栄えを確認している。

「html」ファイルをブラザにドロップすると width: 100%; が効いた状態で表示された。

VSCodeの「Live Server」を停止し、VSCodeを起動し直す。 width: 100%; が効いた状態で表示された。

「setting.json」の設定の一部。

  "files.autoSave": "onFocusChange",

Chrome拡張の「Clear Cache」で時々キャッシュを削除している。「ファイルのURLへのアクセスを許可する」がONになっていない。

これが原因？

「ファイルのURLへのアクセスを許可する」をONにして width: 100%; を別の数値にして上書き保存。リアルタイムで変更が反映された。

でも今まではリアルタイムで変更が反映されていました。

post-xxx クラスの文字サイズや余白の調整を行います。 (P221)

タイトル、日付、カテゴリのスタイルがスッキリした。

@media (max-width: 600px) {
  .page-title {
    font-size: 2.5rem;
  }
  ...
  aside {
    margin-top: 60px;
  }
  .post-info {
    margin-bottom: 30px;
  }
  .post-date {
    width: 70px;
    height: 70px;
    font-size: 1rem;
  }
  .post-date span {
    font-size: 0.875rem;
    padding-top: 2px;
  }
  .post-title {
    font-size: 1.375rem;
  }
  .post-cat {
    font-size: 0.875rem;
    margin-top: 10px;
  }
  .post-title,
  .post-cat {
    margin-left: 80px;
  }
}

レスポンシブ対応難しいすぎるでしょ！今日はふてくされて寝る。

2021-02-08

サイドバーを作る

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

<aside> タグの中にサイドバーに掲載するコンテンツを書き加える。 (P213)

      <aside>
        <h3 class="sub-title">カテゴリー</h3>
        <ul class="sub-menu">
          <li><a href="#">VVVVV</a></li>
          <li><a href="#">WWWWWWWW</a></li>
          <li><a href="#">XXXX</a></li>
          <li><a href="#">YYYYY</a></li>
        </ul>

        <h3 class="sub-title">Lorem, ipsum dolor.</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto ad neque, possimus
          numquam aliquam ut atque iste fuga libero reprehenderit, temporibus asperiores.
        </p>
      </aside>

見出しに下線をつける、文字サイズや余白を調整する。

.sub-title {
  font-size: 1.375rem;
  padding: 0 8px 8px;
  border-bottom: 2px solid #0bd;
  font-weight: normal;
}

文章に padding で内側に余白をつけて見やすくする。

aside p {
  padding: 12px 10px;
}

カテゴリーリストの装飾

list-style: none; でリスト項目マーカーを非表示する。 (P214)

.sub-menu {
  margin-bottom: 60px;
  list-style: none;
}
.sub-menu li {
  border-bottom: 1px solid #ddd;
}
.sub-menu a {
  color: #432;
  padding: 10px;
  display: block;
}
.sub-menu a:hover {
  color: #0bd;
}

<a> タグに display: block を加えクリック範囲をリスト項目いっぱいまで広げる。

.sub-menu a:hover では、マウスカーソルが重なったとときのスタイリングを行う。

NEWSページが完成した。

2021-02-07

2カラムレイアウト

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

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

2021-02-04

フルスクリーンWebサイトの制作

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

フルスクリーンWebサイトの制作

画像や動画などのメインビジュアルを画面全体を使って表示するレイアウトのこと。 (P174)

head部の記述

HTML の骨組みを記述する。 (P178)

meta 情報 title 、CSSファイルの読み込みを行う。

書籍が発行されて時と Google Fonts の使い方が変わっているようです。フォント名のみ書籍に合わせておきました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学ぶWebサイト制作">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Philosopher:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Basic Web Design</title>
</head>
<body>
</body>
</html>

読み込み順は、「1.リセットCSS」、「2.Google Fonts」、「3.これから指定するCSS」と指定できる。

header部分を作ろう

ロゴ画像読み込みと、ナビゲーションメニューの作成を行う。 (P180)

<h1> タグで ima タグを囲む。 <nav> タグでリストを囲みナビゲーションメニューとする。

    <header class="page-header">
      <h1>
        <a href="index.html"
          ><img class="logo" src="http://placeholder.pics/svg/418x116" alt="placeholder.pics"
        /></a>
      </h1>
      <nav>
        <ul class="main-nav">
          <li><a href="news.html">News</a></li>
          <li><a href="menu.html">Menu</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

著作権保護のため「image:https://placeholder.pics/」へリンク。

書籍掲載のsvg画像のサイズはW209px/H58px。

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座には、「画像が画面いっぱいに表示され」と書かれている。

なぜか再現できなかった。しかたがないので、2倍のW418/H116のリンクに切り替えた。

イメージ

CSSファイルの準備

cssフォルダを作成し、その中に「style.css」を作成。 (P181)

@charset "utf-8";

html {
  font-size: 100%;
}
body {
  font-family: 'Yu Gothic Medium', '游ゴシック Medium', YuGothic, '游ゴシック体',
    'ヒラギノ角ゴ Pro W3', sans-serif;
  line-height: 1.7;
  color: #432;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}

<img> タグに max-width: 100% と指定。これで画像が親要素より大きくなることを防ぐことができる。

ロゴサイズと余白調整

ロゴサイズを指定。 (P182)

.logo {
  width: 210px;
  margin-top: 14px;
}

ナビゲーションメニュー装飾

HTMLに <ul class="main-nav"> と記述した。 main-nav クラスに対しスタイリング。 (P182)

.main-nav {
  display: flex;
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 34px;
  list-style: none;
}
.main-nav li {
  margin-left: 36px;
}
.main-nav a {
  color: #432;
}
.main-nav a:hover {
  color: #0bd;
}

ロゴとナビゲーションを横に並べる

ロゴを左。ナビゲーションを右に配置。 (P183)

ロゴとナビゲーションの親要素は <headr class="page-header"> 。

.page-header {
  display: flex;
  justify-content: space-between;
}

display: flex; でナビゲーションメニューが画像の真横に移動する。

justify-content: space-between; で <header> 内の子要素である <h1>' と` が左右両端に割り振られる。

この理解であってるかな？

コンテンツの最大表示幅を設定

ロゴとナビゲーションメニューが離れ過ぎなので調整 (P184)

<header> に wrapper を追加。

    <header class="page-header wrapper">

.wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 4%;
}

ここは、デザインの経験を積まなければ、「よい表示位置」がわからない。

たしかにスタイルを適用する前は、ロゴやナビゲーションメニュが端に表示されバランスが悪いと感じる。

私なら、次のように記述して満足するんじゃないかな？

.page-header {
  display: flex;
  justify-content: space-around;
}

コンテンツ部の作成

背景を大きく打ち出して、印象的なページに仕上げる。 (P185)

中心部に配置する文章とボタンを作成。

    <!-- CONTENTES -->
    <div class="home-content wrapper">
      <h2 class="page-title">Lorem ipsum dolor sit</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
      <a href="menu.html" class="button">メニューを見る</a>
    </div>

.home-content {
  text-align: center;
  margin-top: 10%;
}
.home-content p {
  font-size: 1.125rem;
  margin: 10px 0 42px;
}

text-align: center; でコンテンツを中央に配置。

margin の top に 10px 。bottom に '42px` を指定し、余白を取る。

見出しやボタンのスタイリングを行う。 (P187)

/* 見出し */
.page-title {
  font-size: 5rem;
  font-family: 'Philosopher', serif;
  text-transform: uppercase;
  font-weight: normal;
}

/* ボタン */
.button {
  font-size: 1.375em;
  background-color: #0bd;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}
.button:hover {
  background-color: #0090aa;
}

.button:hover 。 :hover は擬似クラス。マウスカーソルを重ねた時のスタイルを指定できる。

背景画像を設置

ホーム全体に背景画像を設置。 (P188)

    <div id="home" class="big-bg">
      <!-- HEADER -->
      <header class="page-header wrapper">
      ....
        <a href="menu.html" class="button">メニューを見る</a>
      </div>
    </div>

ホーム全体に設置するので、 <body> 直下から </body> 直前までを <div> タグで囲む。

.big {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

background-size: cover; で画像の縦横比を保持。

background-position: center top; で左右中央、上基準で配置。

#home に背景画層を指定。 min-height: 100vh; で表示領域の高さいっぱいに広げる。 (P189)

#home {
  background-image: url(https://via.placeholder.com/2048x1365/fffacd);
  min-height: 100vh;
}
#home .page-title {
  text-transform: none;
}

ファビコンを読み込む

グラフィックツールを使って、縦横32px以上の正方形で作成し、PNG形式で保存する。 (P191)

今回は ICOOON MONO で入手。

    <!-- ICOOON MONO より https://icooon-mono.com/ -->
    <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon" />

ダークモードを使っているユーザもいるのでファビコンの色選択は慎重に!

P193からのカスタマイズ例は「後で読んでおく」。

お問い合わせページの制作

背景画像を表示

フォームの装飾

地図を表示

見栄えを整える

SNSプラグインの挿入

YouTube動画のコード取得

まとめ

タイル型レイアウトとは

ファイルを準備

編集する

見出し部分を変更

コンテンツを用意する

CSSグリッドを使う

レスポンシブ対応

要素幅の最小値最大値の指定

幅に合わせて折り返し

タイル型レイアウトのカスタマイズ

サイズ違いの要素を配置

大きいサイズのグリッドアイテムを指定

画像の高さを揃える

トリミング

レスポンシブ対応

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

カラムの順番を変える

viewportの設定

メディアクエリーの基本

文字サイズと余白を調整

コンテンツを縦並びにする

カテゴリーリストの装飾

2カラムレイアウト

カラム幅の比率

HTMLファイルの編集

CSSで装飾

フッターを作成

レイアウトの骨組み

メインエリアを作る

日付の装飾

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

画像と本文を追加

フルスクリーンWebサイトの制作

head部の記述

header部分を作ろう

CSSファイルの準備

ロゴサイズと余白調整

ナビゲーションメニュー装飾

ロゴとナビゲーションを横に並べる

コンテンツの最大表示幅を設定

コンテンツ部の作成

背景画像を設置

ファビコンを読み込む

SNS プラグインの挿入

　メインエリアを作る