今日からはHTML＆CSSの基礎を使って少しずつページを作成していきます。
今日はまず、フルスクリーンページの特徴を学んだあとで、フルスクリーンページのヘッダーを作っていきます。
よくある参考書ではコードがすでに書いてあって、それを順番に打ってみる学習になることがほとんどです。
しかし、自分でこうしたいからこうするんだという形で試行錯誤すること方がはるかに学習効率は高まります。
効率が悪く見えても、悩んで苦労して進めていくと先が見えます。その点に注意して一緒に学習していきましょう。
目次
フルスクリーンページとは
まず今から作っていくフルスクリーンページについての解説です。
フルスクリーンページは、ウェブサイトの最初に表示される部分、つまりファーストビューで、スクリーン全体に写真や動画を表示するページのことを指します。このデザインは、視覚的なインパクトが大きく、ユーザーの興味を引きつける効果があります。そのため、多くのウェブサイトがこの手法を採用しています。スクリーン全体に広がる写真や動画は、訪問者の目を引きつけ、ウェブサイトのメッセージを強力に伝えることができます。
フルスクリーンページの例
ダイナミックな第一印象でユーザーの心をつかむこと間違いなしだと思います。
次の項目ではフルスクリーンページのメリットとデメリットを説明します。
フルスクリーンページのメリットとデメリット
フルスクリーンページは、ウェブサイトのデザインにおいて非常に効果的な手法であり、そのメリットとデメリットがあります。
メリット：
- 大胆で斬新なレイアウトが可能：全画面をナビゲーションエリアとして使用することで、スプリットレイアウトを取り入れたり、背景画像を使用したリッチなナビゲーションを作ることができます。これにより、ユーザーに強い印象を与え、サイトのブランドイメージを高めることが可能です。
- レスポンシブとして機能しやすい：フルスクリーンページは、デバイスの画面サイズに関係なく一貫した体験を提供します。これは、モバイルデバイスでは表示領域が狭いため特に有効です。PCでもフルスクリーンナビゲーションであるため、ブレイクポイントで小難しいレイアウト変更をあまりすることなくレスポンシブ表示の移行が可能です。
デメリット：
- ナビゲーションの中身が見えない：フルスクリーンページでは、通常、ナビゲーションメニューの項目は初めてページを訪れたユーザーには見えません。これは、ユーザーが必要な情報を素早く見つけることを難しくする可能性があります。
- 見る側にとっても制作側にとってもハードル高め：フルスクリーンページのデザインと実装は一般的なウェブページよりも複雑である可能性があります。これは、制作側にとっては追加の時間と労力を必要とし、見る側（特に技術的な知識が少ないユーザー）にとっては使いづらい結果をもたらす可能性があります。
これらのメリットとデメリットを理解し、適切な場面でフルスクリーンページを使用することが重要です。全画面表示は視覚的に魅力的で、ユーザーの注目を引くことができますが、一方でユーザビリティやアクセシビリティに影響を与える可能性もあります。そのため、ウェブサイトの目的やターゲットユーザー、コンテンツの種類などを考慮して、最適なデザインを選択することが重要です。
ヘッダーの作成
それではいよいよコーディングです。順を追って作っていきましょう。
目標は以下のイメージ。
ロゴ、店名、メニューリンク、問合せフォームリンクの４項目を一列に配列したよく見る形のデザインです。
ロゴと店名はヘッダー要素、メニューリンクと問合せフォームリンクはナビゲーションメニューとして書いていきましょう。
HTML＆CSSファイルの作成とHTML基本設定
任意のフォルダ内にHTML＆CSSのファイルを作成し、VSCodeで書いていきます。
まず、いつもの通りで、HTMLファイルに以下のコードを書いていきましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>ABC Cake</title>
<meta name=”description” content=”ABC CakeのHP”>
<link rel=”stylesheet” href=”20230919_フルスクリーンページの作成.css”>
</head>
CSSファイルはこの時点で入力は不要です。よく参考書では文字フォントの設定などをしていますが、まずは要素を入れてから整えていく方がビジュアルとしてわかりやすいです。
ヘッダー要素の準備
次はヘッダーに記載する要素を<body>に書いていきましょう。
必要な要素は、以下の通り。
見出し：ロゴイメージ（logo.jpg;同一フォルダ内保管）、店名
ナビゲーションメニュー：menuと問合せフォーム
※サンプル画像
◆回答
<body>
<h1><img class=”logo” src=”logo.jpg”>ABC Cake</h1>
<nav>
<ul class=”listnone”>
<li>menu</li>
<li>contact</li>
</ul>
</nav>
</header>
まずは赤字無しのものができてくると思いますが、ここからデザインをつけていくので、ロゴ、navそれぞれにまずは名称を設定しています。
現時点では以下のイメージ。
必要な要素の準備はできましたが、まだまだ完成は遠いです。
見出し・ロゴサイズ調整
次に見出しとロゴの調整をしていきます。CSSファイルでの作業です。
コードは以下の通り。
@charset “utf-8”; /*文字化け防止*/
/*header*/
.logo{width: ５%;}
５％のロゴサイズはものによって変わりますが、大きさ調整をすると以下のようになります。
大きすぎる画像が調整されるだけで大分整いました。
ナビゲーションメニューの設定
次はナビゲーションメニューの設定です。
リストの中点を消し、横に並べる作業です。以下のコードになります。
.listnone{list-style: none; display: flex;}
結果は↑の通りですが、文字が近すぎますね。そこで間を設けるコードを追加していきます。
.listnone{list-style: none; display: flex;gap: 20px;}
結果は以下の通り。間ができました。
大分整ってきました。次はいよいよヘッダーとナビゲーションメニューを同じ行に入れ込む作業です。
ヘッダーとナビゲーションメニュー
まず、ヘッダー要素とナビゲーション要素をflexで並べるためにHTML内でclass設定をします。
<header class=”headers”>
<h1><img class=”logo” src=”logo.jpg”>ABC Cake</h1>
<nav>
<ul class=”listnone”>
<li>menu</li>
<li>contact</li>
</ul>
</nav>
</header>
これで、並べ替えの準備は整いました。以降はCSSでの設定です。
.headerに対して、順番に要素を足していきましょう。※①～③は便宜上ふっています。
.headers{①display: flex;②align-items: flex-end;③margin: 0 auto;}
順番に、以下のように調整が進みます。
①横に並べる
②ヘッダーとナビゲーションの下ぞろえ
③左右余白どり、完成
以上でヘッダーは完成です。
まとめ
いかがだったでしょうか？
要素をそろえて、そこに合わせる形でコーディングをすることで、考える力、結果を想像する力、がむしゃらに手を動かす力が身に付きます。
効率化は結果が100%想像できるようになってから練っていけばよくとにかく自分で考えてアウトプットしていくことが大事だと思います。
