MENU
技能検定AI対策

07ホームページ中級講座　CSSで作成するロゴとグラデーションを使ったナビゲーション

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

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ネットワークサービス　株式会社</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <header>
            <h1>NewWorkService</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Access</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
        </header>
        <article class="clear_fix">
            <section>
                <h1>社長の挨拶</h1>
                <p>
                    <img src="https://picsum.photos/200/200?random=2" alt="パソコン" class="f_left"> 枠組みも対象文を列挙し記事ますんため、引用するられるフリーを検証毎厳格の活用内容をするれても満たすあっ、記事の原則は、利用作るメディアと陳述しこととして著作自由ないでてなりますあれ。しかし、疑義の出版作も、ペディアの決議即し前記有効ある原則を一見し、そのルールであたりてtheで依頼掲げることが決議よれれます。ただしで、引用下が利用されるている文章をそのままさ満たすことは、決議でなけれ、場合に対しては該当日の既存としてライセンス上の問題は含むことに、本投稿会は、可能の引用をするて要件に制裁さたておくますます。
                </p>
                <p>また、誰と問題がしものが「削除権」の禁止ない。</p>
                <p><img src="https://picsum.photos/200/200?random=3" alt="グラフ" class="f_right">方針の方針が公開するれる以下を重要ます目的ですばとするから、企業を著作するます状態を文章ないを既存するて、さらにありななか。著作権が削除あるれん言語だあるば問題はたかもしなます。ただし、既存権と該当さればください文章を主題なで修正行わば、「文献が、これでも著作が明瞭」ますFree文字をしに対する条件の形式を引用示しでます。</p>
            </section>
        </article>
        <footer>
            <p><small>Copyright © 2019 NET WORK SERVICE .All rights reserved.</small></p>
        </footer>
    </div>
</body>
</html>

ランダムに画像を表示させる

今回は、画像表示部分に「Lorem Picsum」のサービスを利用して、ランダムな画像を表示しました。Lorem Picsumは、テストやデザイン作成時に役立つランダム画像生成ツールです。画像をダウンロードして用意する手間を省き、「とりあえず画像を表示したい」という場合に非常に便利です。

https://picsum.photos/200/300
  • 200：画像の横幅（ピクセル単位）
  • 300：画像の高さ（ピクセル単位）

このURLを直接HTMLの<img>タグやCSSのbackground-imageプロパティに指定するだけで、ランダム画像を表示できます。

<img src="https://picsum.photos/200/300" alt="ランダム画像">

また ?マークを最後につけて、grayscale＝グレースケール（白黒）に表示させたりと非常に便利です。

https://picsum.photos/200/300?grayscale

ぼかした写真で表示させる場合は、?blur(ぼかし）を入力します。

https://picsum.photos/200/300??blur

今回は、下記のようにrandom=”1″ と?random=2″を入れることで、画面を読み込む都度異なる写真が表示されるようなアドレスを使用しています。

<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">
Lorem Picsum
Lorem Picsum Lorem Ipsum… but for photos

style.cssを開いて、全章の指定とbodyに指定を入力

以下のようにstyle.cssに基本的なスタイルを指定します。これにより、ページ全体の初期設定を統一し、見やすいレイアウトを構築する基盤を整えます。

/* 全要素の初期化 */
* {
  margin: 0;
  padding: 0;
}

/* HTMLと基本フォント設定 */
html {
  font-size: 100%; /* 通常16pxが基準（1rem = 16px） */
}

/* ボディ全体のスタイル */
body {
  font-size: 16px; /* 基本の文字サイズを16pxに設定 */
  line-height: 2;  /* 行間を2倍にして読みやすさを向上 */
}

/* メインコンテンツのスタイル */
.content {
  width: 800px;            /* コンテンツの幅を800pxに設定 */
  margin: 0 auto;          /* 中央揃え */
  border-left: 5px solid #999;  /* 左側にグレーのボーダー */
  border-right: 5px solid #999; /* 右側にグレーのボーダー */
}
  1. 全要素の初期化
    *セレクタで、すべての要素のmarginとpaddingをリセットしています。これにより、ブラウザごとのデフォルトスタイルの違いをなくし、統一されたデザインを実現します。
  2. フォントサイズの基準
    htmlのfont-sizeを100%（通常16px）に設定することで、remやem単位を使用したレスポンシブなデザインが作りやすくなります。
  3. 読みやすさのためのボディ設定
    • font-size: 16px：ウェブの標準的な文字サイズを指定しています。
    • line-height: 2：行間を広げて、文章の可読性を向上させています。
  4. コンテンツのスタイル
    .contentクラスに幅と中央揃えを指定し、レイアウトの中心的な部分をデザイン。左右にborderを追加することで、視覚的な区切りを設けています。

header要素内のCSSでロゴ風デザイン

header要素内のトップレベル見出しであるh1に対して、text-shadowを活用しロゴ風のスタイルを作成します。文字色を白に設定し、影を加えることで立体感を演出します。また、Google Fontsを利用してWebフォントを適用し、見た目をさらに洗練されたデザインにします。以下は具体的なHTMLとCSSのコード例です。

<head>
    <meta charset="UTF-8">
    <title>ネットワークサービス 株式会社</title>
    <!-- Google Fontsの事前接続 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- Webフォントの読み込み -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

/* header要素内のh1スタイル */
header h1 {
    font-size: 3em;                /* 大きめのフォントサイズで視認性を高める */
    font-family: 'Open Sans', sans-serif; /* Google Fontsのフォントを適用 */
    font-weight: 800;             /* 太字でロゴらしさを演出 */
    text-shadow: 1px 1px 3px #000; /* 黒色の影で立体感を表現 */
    color: #fff;                  /* 文字色を白に設定 */
    text-align: center;           /* 中央揃えでバランスを整える */
}
  1. Google Fontsの適用
    • Open Sansをfont-familyに指定し、wght@700;800で太字スタイルを利用。Webフォントを使用することで、独自のデザイン性が向上します。
  2. text-shadowで立体感を演出
    • text-shadow: 1px 1px 3px #000;では、1pxのずれと3pxのぼかしを指定。これにより、文字が浮き上がるような効果を作り出します。
  3. 視認性の高いデザイン
    • 白い文字色（color: #fff）を採用し、影とのコントラストで視認性を確保。
    • 中央揃え（text-align: center）で整然としたロゴ風デザインに。

文字が白く浮き上がり、背景色に関わらず際立つデザインとなり、Webフォントの適用で、プロフェッショナルな印象がアップし、全体のスタイルがロゴらしく洗練された仕上がりになります。CSSだけでロゴ風といった感じです。

Google FontsをWebフォントとして扱う詳しい方法は、下記のページをご参照ください。

動画で学ぶWebデザイン教室　 Fuku…
03ホームページ中級講座 Googleフォントを指定 | 動画で学ぶWebデザイン教室　 Fukuokamiyako 今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフォ…

text-shadow

text-shadowプロパティは、テキスト文字に影を追加します。文字サイズが小さいと判読性がなくなりますので注意しましょう。

text-shadow: [横方向の影の距離] [縦方向の影の距離] [ぼかしの半径] [影の色];
  • 横方向の影の距離（例: 1px）
    テキストの右方向に影をずらします。負の値で左方向に移動。
  • 縦方向の影の距離（例: 1px）
    テキストの下方向に影をずらします。負の値で上方向に移動。
  • ぼかしの半径（例: 3px）
    影のぼかし具合を指定します。値が大きいほど影が拡散します。
  • 影の色（例: #000）
    影の色を指定します。

text-shadowジェネレーターを活用

デザインに適した影を効率的に作成するために、オンラインのtext-shadowジェネレーターを活用しましょう。ジェネレーターを使用すると、リアルタイムで影の色、方向、ぼかし具合を調整でき、適切なコードをすぐに取得できます。

bad-company.jp
text-shadowのジェネレーターとプロパティについて | bad-company 画像の形に影を落とすのによく使われるfilter関数のdrop-shadowを確認するためのジェネレーターです。またプロパティの設定方法についても解説をしています。

nav内のul要素にflex指定

ul要素にdisplay: flex;を設定することで、リスト項目（li要素）を横並びに配置します。さらに、各li要素にはflex: 1;を指定して均等に幅を五分割します。また、テキストを中央揃えにするためにtext-align: center;を適用します。

header nav ul {
    display: flex;         /* 子要素を横並びに */
    list-style: none;      /* リストマーカーを削除 */
    margin: 0;             /* デフォルト余白をリセット */
    padding: 0;            /* デフォルト余白をリセット */
}

header nav ul li {
    flex: 1;               /* 子要素を1:1の割合で均等配置 */
    text-align: center;    /* テキストを中央揃え */
}

背景にグラデーションを設定

リンクとなるa要素に背景のグラデーションを指定します。このデザインでは、上から下へ3色（#ddd, #fff, #999）のグラデーションを適用しています。また、display: block;を指定することで、a要素の背景が親要素（li）の幅いっぱいに広がるように設定しています。

/* 隣接するli要素の左側に線を追加 */
header nav ul li + li {
    border-left: 1px solid #fff; /* 区切り線を白で設定 */
}

/* a要素にグラデーションを設定 */
header nav ul li a {
    color: #333;                     /* リンクの文字色を濃いグレーに */
    text-decoration: none;           /* 下線を削除 */
    background-image: linear-gradient(
        to bottom,
        #ddd,    /* 上部の色 */
        #fff,    /* 中央の色 */
        #999     /* 下部の色 */
    );
    display: block;                  /* li要素全体に背景を適用 */
    padding: 0.5em 0;                /* 縦方向の余白を追加 */
    font-weight: 800;                /* 太字に設定 */
}

hover時にグラデーションを反転

リンクにマウスが乗った際（hover状態）に、背景グラデーションの色を反転させます。この視覚的な変化により、ユーザーがどのリンクを選択しているのかが分かりやすくなります。

header nav ul li a:hover {
    /* マウスが乗ったときに背景グラデーションを反転 */
    background-image: linear-gradient(
        to bottom,
        #999,    /* 上部の色 */
        #fff,    /* 中央の色 */
        #ddd     /* 下部の色 */
    );
}

CSS全体のコード

グラデーションが少し古めかしい印象なので、アレンジしてみてください！

/* 全要素の初期化 */
* {
    margin: 0; /* デフォルトの外側余白をリセット */
    padding: 0; /* デフォルトの内側余白をリセット */
}

/* HTMLと基本フォント設定 */
html {
    font-size: 100%; /* 16px基準でフォントサイズを設定（1rem = 16px） */
}

/* ボディ全体のスタイル */
body {
    font-size: 16px; /* 文字の基本サイズを16pxに設定 */
    line-height: 2;  /* 行間を2倍に設定し、読みやすさを向上 */
}

/* メインコンテンツのスタイル */
.content {
    width: 800px;            /* コンテンツの幅を800pxに固定 */
    margin: 0 auto;          /* 中央揃え */
    border-left: 5px solid #999;  /* 左端にグレーのボーダー */
    border-right: 5px solid #999; /* 右端にグレーのボーダー */
}

/* header要素内のh1スタイル */
header h1 {
    font-size: 3em;                /* 大きめのフォントサイズで視認性を高める */
    font-family: 'Open Sans', sans-serif; /* Google Fontsのフォントを適用 */
    font-weight: 800;             /* 太字でロゴらしさを演出 */
    text-shadow: 1px 1px 3px #000; /* 黒色の影で立体感を表現 */
    color: #fff;                  /* 文字色を白に設定 */
    text-align: center;           /* 中央揃えでバランスを整える */
}

/* ナビゲーションのスタイル */
header nav ul {
    display: flex;         /* 子要素を横並びに配置 */
    list-style: none;      /* リストマーカー（黒点）を削除 */
    margin: 0;             /* リストの外側余白をリセット */
    padding: 0;            /* リストの内側余白をリセット */
}

header nav ul li {
    flex: 1;               /* 子要素を1:1の割合で均等配置 */
    text-align: center;    /* 子要素のテキストを中央揃え */
}

/* 隣接するli要素の左側に区切り線を追加 */
header nav ul li + li {
    border-left: 1px solid #fff; /* 区切り線を白色で設定 */
}

header nav ul li a {
    color: #333;                     /* リンク文字の色を濃いグレーに設定 */
    text-decoration: none;           /* リンクの下線を削除 */
    background-image: linear-gradient(
        to bottom,
        #ddd,    /* 上部の色 */
        #fff,    /* 中央の色 */
        #999     /* 下部の色 */
    );
    display: block;                  /* li要素全体にリンク背景を適用 */
    padding: 0.5em 0;                /* 縦方向に0.5emの余白を設定 */
    font-weight: 800;                /* 太字に設定 */
}

header nav ul li a:hover {
    background-image: linear-gradient(
        to bottom,
        #999,    /* 上部の色 */
        #fff,    /* 中央の色 */
        #ddd     /* 下部の色 */
    );
}

header nav ul li a:focus {
    outline: 2px solid #005fcc;       /* フォーカス時の青いアウトライン */
    outline-offset: 4px;             /* アウトラインを少し外側に */
}

このデザインは、簡単なflexレイアウトとグラデーションを組み合わせたものですが、hover時の視覚効果や適切なフォント設定を追加することで、シンプルながらも洗練された印象を与えます。さらに、色や効果をモダンなものに調整すれば、より時代に合ったデザインに仕上げることが可能です！

次は、画像と文章の周り込みfloat を使ってみよう！

あわせて読みたい
08  ホームページ中級講座 floatを使った周り込み CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照くだ...
Webサイト制作 ホームページ中級講座
CSS CSS3 HTML HTML5 movie youtube コード模写 中級 動画 模写コーディング

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

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