MENU
技能検定AI対策

02ホームページ中級講座 ナビゲーションの作成(CSS)

Webサイト制作 ホームページ中級講座
目次

HTMLマークアップファイルの確認

今回は、下記のページで作成したHTMLを使います。

あわせて読みたい
01 ホームページ中級講座 ナビゲーションの作成(HTML) 今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。 下記の...

デフォルトのスタイルシート

HTMLをブラウザでプレビューする際、各ブラウザにはそれぞれデフォルトのスタイルシートが設定されています。検証ツールのCSSセクションを見ると、「ユーザーエージェントスタイルシート」と記載されている部分が、それに該当します。このスタイルシートは、ブラウザが独自に適用するデフォルトのデザインルールを示しています。

body要素
h1要素
ul要素

これまでの練習では「ユーザーエージェントスタイルシート」を意識せずにCSSを記述していました。しかし今回は、デフォルトのスタイルがデザインに影響を与えないように、まずオリジナルのCSSでデフォルトスタイルをリセットし、その上で新たなデザインを上書きする方法でCSSを記述します。

リセットCSS

ウェブブラウザには、あらかじめ「デフォルトのスタイル」が設定されています。これをユーザーエージェントスタイルシート（User Agent Stylesheet）と呼びます。ブラウザによっては<h1>タグの文字サイズが異なったり、<ul>に自動的に余白やリストマーカーが付くことがあります。

リセットCSSは、このデフォルトスタイルを「ゼロにする」ためのCSSです。リセットすることで、ブラウザごとの見た目の違いをなくし、デザインを統一して設定しやすくします。

リセットCSSの例

/* 簡易リセットCSS */
* {
    margin: 0; /* 余白をゼロに */
    padding: 0; /* パディングをゼロに */
    box-sizing: border-box; /* 幅と高さの計算を統一 */
}

body {
    line-height: 1.5; /* 読みやすい行間を設定 */
    font-family: Arial, sans-serif; /* ベースフォントを統一 */
}

a {
    text-decoration: none; /* リンクの下線をリセット */
    color: inherit; /* リンクの色を親要素に合わせる */
}

ul,
ol {
    list-style: none; /* リストのマーカーをリセット */
}

デフォルトスタイルの違いをリセット

  • リストマーカー（<ul>や<ol>）が消える。
  • タグ間の不要な余白がゼロになる。
  • 全ての要素のパディングが消える。

リセットCSSを簡単に導入

リセットCSSを手書きするのが大変な場合は、すでに公開されているリセットCSSを利用するのもおすすめです。

  • Eric Meyer’s Reset CSS
    簡潔で基本的なリセットCSS。
  • Normalize.css
    リセットするだけでなく、必要なスタイルを補完する「モダンなリセットCSS」。

HTMLに適用

<head>
    <link rel="stylesheet" href="reset.css"> <!-- リセットCSSのリンク -->
    <link rel="stylesheet" href="style.css"> <!-- オリジナルCSS -->
</head>

リセットCSSを適用した後、自分のオリジナルのCSSを呼び出すようにしましょう。

Sanitize.css

Webサイトを作成する際、リセットCSSをそのまま使うこともあれば、Normalize.cssをダウンロードして必要に応じてカスタマイズする場合もあります。
私自身は、Sanitize.cssをカスタマイズして使うことが多いです。Sanitize.cssは、基本的なリセットに加え、アクセシビリティやモダンブラウザ向けのスタイルも整備されており、さらにカスタマイズすることでプロジェクトに最適化しやすいのが特徴です。

Sanitize.cssとは？

Sanitize.cssは、Normalize.cssをベースに、よりモダンなブラウザ対応やアクセシビリティに配慮したCSSライブラリです。　Sanitize.css

  1. モダンブラウザのサポートを重視。
  2. デフォルトスタイルの修正だけでなく、必要な標準スタイルを補完。
  3. カスタマイズがしやすい構造。

超簡易版　全章セレクタ

全章セレクタとは、CSSのユニバーサルセレクタ（*）を使い、全ての要素にスタイルを一括で適用します。最も簡単なリセットCSSの形です。今回のコードはこちらを使っています。

* {
    margin: 0;
    padding: 0;
}
  • margin: 0;: すべての要素の外側の余白をゼロにします。
  • padding: 0;: すべての要素の内側の余白をゼロにします。

bodyに背景画像を設置する

bodyに背景画像を設定すると、ウェブサイト全体に統一感を与えることができます。body要素に背景画像を使います。今回は、レンガ模様を使い、背景に「繰り返しパターン」を適用します。

/* 全要素の余白とパディングをリセット */
* {
    margin: 0;
    padding: 0;
}

/* HTML要素全体の基準フォントサイズを設定 */
html {
    font-size: 100%;
}

/* 背景画像と文字スタイルの設定 */
body {
    background-image: url(bk.jpg); /* レンガ模様の背景画像を適用 */
    background-repeat: repeat; /* 画像を繰り返して全体に敷き詰める */
    background-size: auto; /* デフォルトサイズのまま表示 */
    font-size: 16px; /* 基本の文字サイズ */
    line-height: 1.7; /* 行間を設定 */
    font-family: sans-serif; /* シンプルなフォントを適用 */
}

/* 見出しを中央揃え */
h1 {
    text-align: center;
}

/* コンテンツ部分の設定 */
.contents {
    width: 80%; /* コンテンツ幅を80%に設定 */
    margin: 1em auto 0; /* 上に1emの余白を取り、中央揃え */
    border: 6px double #4C1B00; /* 枠線にダブルラインを適用 */
    background: rgba(255, 255, 255, 0.8); /* 背景を半透明の白に設定 */
}

/* ヘッダー部分のスタイル */
header {
    border-bottom: 6px double #4C1B00; /* 下枠線にダブルラインを適用 */
}

/* ヘッダー内の見出し */
header h1 {
    font-size: 1.75em; /* 見出しのサイズを調整 */
    padding: 1rem 0; /* 上下に余白を設定 */
}

background-image: url(bk.jpg);

  • bk.jpgという画像をbody要素の背景として使用。
  • ファイル名を正確に指定する必要があります。

background-repeat: repeat;

  • 背景画像を繰り返して全体に敷き詰めます。
  • 必要に応じて、no-repeatやrepeat-x（横だけ繰り返す）、repeat-y（縦だけ繰り返す）に変更可能です。

background-size: auto;

  • 背景画像のサイズをそのまま表示します。
  • 必要に応じて、cover（全体を覆う）やcontain（全体を収める）も利用可能です。

半透明の背景

  • .contents部分ではrgba(255, 255, 255, 0.8)を使用して、背景を半透明の白に設定しています。
フォルダにbk.jpgを配置

背景画像は、素材サイトなどでダウンロードしてフォルダに準備しておきましょう。

header内のul要素にナビゲーションのCSS

ナビゲーションは、ホームページのheaderやfooterに設置され、他のページへリンクするための目次として利用されることが一般的です。

ナビゲーションを横並びにする理由

多くのウェブサイトでは、ナビゲーションを横に並べて見やすく整えています。このデザインは視覚的にスッキリしており、ユーザーがアクセスしやすくなるためです。

しかし、HTMLの<li>要素は通常「ブロック要素」なので、デフォルトでは縦に並びます。

横並びにする方法：display: flexを使う

header ul {
    list-style-type: none; /* リストマーカーを削除 */
    display: flex; /* 子要素を横並びにする */
    justify-content: space-between; /* 子要素の間隔を均等に配置 */
    padding: 0; /* デフォルトの余白を削除 */
    margin: 0; /* デフォルトの余白を削除 */
}

header ul li {
    width: 33.3%; /* 各項目を等間隔で配置 */
    text-align: center; /* テキストを中央揃え */
    border-right: 1px solid #fff; /* 区切り線を追加 */
}

header ul li:last-child {
    border-right: none; /* 最後の項目には区切り線を付けない */
}
header ul li a {
    color: #fff; /* リンクの色 */
    text-decoration: none;/* アンダーライン */
    padding: 1rem 0;/* 上下の余白 */
    display: block;/* 余白のところもクリックされるため*/
}
  • 親要素である<ul>に対してdisplay: flexを指定します。
  • 子要素である<li>が自動的に横並びになります。
  • justify-contentで子要素の配置を調整します。
  • space-betweenを使うと、子要素の間に均等なスペースが作られます。
  • 子要素の<li>に必要なスタイルを指定します。
  • 各ナビゲーション項目を均等に配置するためにwidthを設定します。
  • 境界線を付けることで、区切りをわかりやすくできます。

::last-child を使って不要な線を消す

最終行に線があると、デザイン的に不要な要素が残ってしまいます。こういった細かい部分まで丁寧に整えることで、完成度の高いデザインが実現できます。::last-childを使えば、追加のクラスを付けることなく、HTMLの構造に基づいて特定の要素をカスタマイズできるのが便利です。

header ul li:last-child {
    border-right:none;
}

li:last-childとは？

ul要素の中で最後に配置された<li>要素にのみ適用される擬似クラス。この場合、「Map」という文字列が含まれる<li>が対象。

ここまでのプレビュー

リンクにhoverを設置

グローバルナビゲーションは、前回の「01 ホームページ中級講座 ナビゲーションの作成(HTML)」でその必要性とユーザビリティについて解説しました。
今回は、「クリックできる場所」であることをユーザーに視覚的に示す方法を学びます。リンクにマウスカーソルを置いたときに背景色や文字の色を変えることで、リンクとして認識しやすくします。

これには、CSSの:hover擬似クラス使用します。

:hover 擬似クラス

CSSでは、リンクや要素の状態をスタイルとして指定するために「擬似クラス」を使用します。代表的なものを以下にまとめました：

  • a:link　ユーザーがまだ訪問していないリンク。
  • a:visitedユーザーがすでに訪問したリンク。
  • a:hoverユーザーがカーソルを要素の上に置いたときに適用される。
  • a:activeユーザーがリンクをクリックしている瞬間に適用される。
  • a:focus　フォーム要素やリンクにキーボード操作やタップでフォーカスが当たったとき。

上記の擬似クラスの中でも誘導によく使われるのが:hoverです。

header ul li a {
    background: #9C6221; /* デフォルトの背景色 */
    color: #fff; /* デフォルトの文字色 */
    text-decoration: none; /* 下線を削除 */
    padding: 0.5em 0; /* 余白を設定 */
    display: block; /* リンクをブロック要素に変換（クリック範囲を広げる） */
}

header ul li a:hover {
    background: #4C1B00; /* マウスオーバー時の背景色 */
    color: #FFD700; /* マウスオーバー時の文字色 */
}
  • backgroundとcolorでデフォルトの背景色と文字色を設定。
  • text-decoration: none;でリンクの下線を削除。
  • マウスがリンク上に置かれたとき、backgroundとcolorを変更して視覚的なフィードバックを与えます。
  • 例えば、背景色を濃いブラウン（#4C1B00）にし、文字色をゴールド（#FFD700）に設定。

display: block;の活用　a要素をブロック要素にすることで、リンク全体がクリック可能になり、ユーザーの操作性が向上します。

アクセシビリティ　a:focus

a:focusも合わせて設定すると、キーボード操作でリンクを選択した場合にも視覚的なフィードバックが得られます

header ul li a:focus {
    outline: 2px solid #FFD700; /* フォーカス時の外枠を設定 */
}

その他の擬似クラス

擬似クラスは、特定の状態にある要素にCSSを適用できるセレクタの一種です。例えば、:hoverや:visitedなどがよく使われます。

代表的な擬似クラス

  1. :link
    • 未訪問のリンク要素に適用。
  2. :visited
    • ユーザーがすでに訪問したリンク要素に適用。
  3. :hover
    • 要素にマウスを置いた際に適用。
  4. :active
    • 要素がクリックされている状態で適用。
  5. :nth-child(n)
    • 親要素内で、その子要素がn番目である場合に適用。
      例: li:nth-child(3) → 3番目の<li>要素。
  6. :nth-child(even)
    • 親要素内で、その子要素が偶数番目の場合に適用。
  7. :nth-child(odd)
    • 親要素内で、その子要素が奇数番目の場合に適用。
  8. :last-child
    • 親要素内で、最後の子要素に適用。
  9. :first-child
    • 親要素内で、最初の子要素に適用。

最終的なCSS

/* 全要素の余白とパディングをリセット */
* {
    margin: 0;
    padding: 0;
}

/* HTML要素全体の基準フォントサイズを設定 */
html {
    font-size: 100%;
}

/* 背景画像と文字スタイルの設定 */
body {
    background-image: url(bk.jpg);
    /* レンガ模様の背景画像を適用 */
    background-repeat: repeat;
    /* 画像を繰り返して全体に敷き詰める */
    background-size: auto;
    /* デフォルトサイズのまま表示 */
    font-size: 16px;
    /* 基本の文字サイズ */
    line-height: 1.7;
    /* 行間を設定 */
    font-family: sans-serif;
    /* シンプルなフォントを適用 */
}

/* 見出しを中央揃え */
h1 {
    text-align: center;
}

/* h2見出しのスタイル */
h2 {
    font-size: 1.5em;
    margin-bottom: 1em;
    color: #4C1B00;
    text-align: left;
    padding-left: 1rem;
    border-left: 4px solid #4C1B00;
    /* 左側にアクセントを追加 */
}

/* コンテンツ部分の設定 */
.contents {
    width: 80%;
    /* コンテンツ幅を80%に設定 */
    margin: 1em auto 0;
    /* 上に1emの余白を取り、中央揃え */
    border: 6px double #4C1B00;
    /* 枠線にダブルラインを適用 */
    background: rgba(255, 255, 255, 0.8);
    /* 背景を半透明の白に設定 */
}

/* ヘッダー部分のスタイル */
header {
    border-bottom: 6px double #4C1B00;
    /* 下枠線にダブルラインを適用 */
}

/* ヘッダー内の見出し */
header h1 {
    font-size: 1.75em;
    /* 見出しのサイズを調整 */
    padding: 1rem 0;
    /* 上下に余白を設定 */
}

header ul {
    list-style-type: none;
    /* リストマーカーを削除 */
    display: flex;
    /* 子要素を横並びにする */
    justify-content: space-between;
    /* 子要素の間隔を均等に配置 */
    /* デフォルトの余白を削除 */
    margin: 0;
    /* デフォルトの余白を削除 */
    background-color: #4C1B00;

}

header ul li {
    width: 33.3%;
    /* 各項目を等間隔で配置 */
    text-align: center;
    /* テキストを中央揃え */
    border-right: 1px solid #fff;
    /* 区切り線を追加 */

}

header ul li:last-child {
    border-right: none;
    /* 最後の項目には区切り線を付けない */
}

header ul li a {
    color: #fff;
    text-decoration: none;
    padding: 1rem 0;
    display: block;
}
/*マウスがhoverした時に赤*/
header ul li a:hover {
    background-color: #ea1313;
}

main {
    padding: 1rem;
}

/* セクション全体のスタイル */
section {
    margin: 0 auto 1rem;
    padding: 1em;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #4C1B00;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 最後のセクションの下余白を削除 */
section:last-child {
    margin-bottom: 0;
}

/* セクション内の段落スタイル */
section p {
    margin-bottom: 1em;
    line-height: 1.7;
    color: #333;
    text-indent: 1em;
    /* 段落の最初をインデント */
}

/* フッター部分のスタイル */
footer {
    padding: 1em 0;
    text-align: center;
    background: #4C1B00;
    color: #fff;
    font-size: 0.875em;
    border-top: 6px double #fff;
}

完成イメージ

次は、Webフォントの設定方法です。

あわせて読みたい
03ホームページ中級講座 Googleフォントを指定 今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフ...
Webサイト制作 ホームページ中級講座
CSS CSS3 HTML HTML5 movie youtube コード模写 中級 動画 模写コーディング

この記事が気に入ったら
フォローしてね！

Follow Me
  • URLをコピーしました！
目次