【今日学んだこと】HTML CSS Webデザイン

今日は、Webデザインの勉強をしました。

今日の内容をまとめていきたいと思います。

 

★今日の内容

■「header」部分の作成
Webサイトの全ページ共通となる部分なので、最初に作成。

〇HTMLに「header」部分を記述
index.htmlの<body>タグ内に<header>記述する。
続いてその中に<h1>タグでロゴ画像を、<nav>タグでナビゲーションメニューとなるリストを書いていく。
ロゴの画像は「images」フォルダーを作成し、その中に保存。

CSSファイルの準備
css」フォルダーを作成し、その中に「style.css」という名前のCSSファイルを新規作成。
このstyle.cssにスタイル記述。

〇共通部分の記述
CSSファイルの1行目には「@charset "UTF-8";」を書き、コードの文字化けを防ぐ。
続いて<html>タグに文字サイズを100%と指定する。
これにより、ブラウザーのデフォルトの文字サイズやユーザーが設定した文字サイズが正しく反映されるようになる。
<img>タグに「max-width: 100%;」を指定することで、画像が親要素よりも大きくなることを防ぐ。

〇ロゴのサイズと余白の調整
ロゴ画像が大きいままなので、サイズを指定。
記述した共通部分のCSSの下に書き足していく。

〇ナビゲーションメニューの装飾
ナビゲーションメニューに文字サイズや余白などの装飾を加えていく。
ポイントは「display: flex;」を使って中の<li>タグを横並びにする点。
「a:hover」はリンクテキストにカーソルを合わせたときに適用される疑似クラスと呼ばれるもの。カーソルを合わせたときの装飾を指定できる。

〇ロゴとナビゲーションメニューを横並びにしよう
「page-header」クラスにFlexboxで横並びに設定。
「justify-content: space-between;」も書くことで両端に設置できる。

〇コンテンツの最大表示幅を設定
コンテンツ全体を囲むボックスに最大幅を指定。
これにより、大きな画面でも違和感なく閲覧できるようになる。
CSSに「max-width」で最大幅を指定。「margin: 0 auto;」を指定すると、ボックスを画面の中央に配置できる。
左右に「padding」をつけておくと、スマートフォンの狭い画面幅で見ても余白ができて見やすくなる。

 

 

■コンテンツ部分の作成
ホームページの顔となるメインコンテンツ部分を作成。
背景画像を大きく打ち出して、印象的なページに仕上げていく。

〇文章とボタンを設置
まずはページの中心部分に配置する文章とボタンを作成。
HTMLの<header>タグの下に<div>部分を作成。
さらに、ここに見出しとなる<h2>タグと、本文となる<p>タグ、リンク先となる<a>タグを追加。
CSSの「text-align: center;」で画面の中央に文章を配置。
その他、余白や文章のフォントサイズを指定。
続けてCSSで見出しやボタンの指定。
見出しやボタンは他のページでも利用するので、わかりやすいようコメントアウトをつけてまとめておくとよい。
「border-radius」は四角形の角を丸めるためのプロパティ、「:hover」はカーソルを上に重ねたときに適用される疑似クラスと呼ばれるもの。

〇画面いっぱいに背景画像を設置しよう
ホーム全体に背景画像を設置する。画像を「images」フォルダーに保存しておく。
HTMLに追加する。記述していた「header」部分と<div>部分を新たに<div>タグで囲む。
その<div>タグに背景画像を当てる。
CSSで「background-size: cover;」を指定して、画像の縦横の比率を保ったまま画面いっぱいに広げる。
また、この指定は他のページでも使いまわしたいので、クラスとして設定する。
CSSに追加する。ホームで表示したい背景画像を指定する。
「min-height: 100vh;」とすることで、画面の表示領域の高さいっぱいに画像を広げる。

 


■ファビコンの用意
Webサイトの制作時に設置を忘れがちなファビコン。ホームページができた段階で用意しておくとよい。

〇ファビコンとは
Webサイトをブックマークしたり、タグ表示した際にサイトの横にちょこんと表示されている小さなアイコンのことを「ファビコン」という。
ファビコンは実際に表示されるのは16px四方とかなり小さいが、とても大切。
複数のタブを開いているときや、ブックマークリストの中から選ぶとき、ユーザーがひと目見てどのサイトか区別できる。

〇どんなデザインのファビコンがよいのか
多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンのデザインとして採用されている。
ロゴが長方形だったり、テキストのみのデザインだったりする場合は、そのブランドを連想させるアイコンを作る。
そのアイコンをファビコンとして利用することでWebサイトのデザインに生かすことができる。
ファビコンは小さく、サイズ制限がある分、テーマカラーを利用したり、シンプルな図形を使って、わかりやすくデザインすることがポイント。

〇ファビコン用の画像を用意
IllustratorPhotoshopなどのグラフィックツールを使ってファビコン用のファイルを作成。
サイズは縦横32px以上の正方形で、保存形式はPNG形式にするとよい。

〇HTMLの「head」内でファビコンを読み込む
例)作成したファビコン画像を「favicon.png」という名前で「images」フォルダーに保存。
index.htmlの「head」内に<link rel="icon" type="image/png" href="images/favicon.png">を追加。

〇ファビコンの生成サービスを使う
高解像度ディスプレイや異なるデバイスに対応させるにはもう少しコードを書き足す必要がある。
全てに対応する画像の作成や、コードの記述を楽にしたいときは、「RealFaviconGenerator」というWebのサービスを利用してみるとよい。


■ フルスクリーンページのカスタマイズ例
〇背景画像にブレンドモードで色を重ね合わせる
グラフィックツールに搭載されている「描画モード(ブレンドモード)」機能は複数の画像や色を様々な手法で重ね合わせ、独特の効果を生み出す。
ブレンドモードはCSSでも実装できる。
background-blend-modeプロパティを使い、値に加えたい効果の名前を指定すれば利用できる。
▲主な値
multiply・・・乗算
screen・・・スクリーン
pverlay・・・オーバーレイ
darken・・・暗く
lighten・・・明るく
color-dodge・・・覆い焼きカラー
color-burn・・・焼き込みカラー
hard-light・・・ハードライト
soft-light・・・ソフトライト
difference・・・差の絶対値
exclusion・・・除外
hue・・・色相
saturation・・・彩度
color・・・カラー
luminosity・・・輝度

〇背景をグラデーションカラーにする
グラデーションはbackground-imageプロパティに「linear-gradient」の値を使い、「,」で区切って異なる色を指定。
直線上に伸びるグラデーションではなく、円形のグラデーションを実装するには「radial-gradient」を使う。

〇背景画像にブレンドモードでグラデーションカラーを重ね合わせる
背景画像にグラデーションカラーを重ね合わせることもできる。
「background-blend-mode」でブレンドモードを指定するところは変わらない。
background-imageプロパティで背景画像とグラデーションカラーを「,」で区切って両方指定するところがポイント。

 

 

 

以上です!