フルスクリーン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からのカスタマイズ例は「後で読んでおく」。
