ホームページ基礎講座　外部スタイルシートとグラデーションCSS

2020年4月4日2025年4月13日

今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHTMLファイルにリンクします。同じディレクトリ内にstyles.cssというファイルを作成します。

HTMLコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
     <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h1>ECOLOGY【エコロジー】</h1>
        <nav>
            <ul>
                <li><a href="#policy">基本ポリシー</a></li>
                <li><a href="#efforts">エコロジーへの取り組み</a></li>
                <li><a href="#products">商品のラインナップ</a></li>
                <li><a href="#news">ニュース</a></li>
            </ul>
        </nav>
    </header>
    <figure>
        <img src="green.jpg" alt="自然と緑 ECOLOGY【エコロジー】">
        <figcaption>自然と緑 ECOLOGY【エコロジー】</figcaption>
    </figure>
    <main>
        <article id="policy">
            <header>
                <h2>基本ポリシー</h2>
                <time datetime="2024-12-24">2024年12月24日</time>
            </header>
            <section>
                <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology
                    Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
            </section>
        </article>
        <article id="efforts">
            <header>
                <h2>エコロジーへの取り組み</h2>
                <time datetime="2024-11-15">2024年11月15日</time>
            </header>
            <section>
                <p>Computer Technology
                    Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。
                </p>
            </section>
        </article>
        <article id="products">
            <header>
                <h2>商品のラインナップ</h2>
                <time datetime="2024-10-01">2024年10月1日</time>
            </header>
            <section>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。
                </p>
            </section>
        </article>
    </main>
    <aside id="news">
        <h2>最新ニュース</h2>
        <p>エコロジーに関する最新情報は、ニュースページをご覧ください。</p>
    </aside>
    <footer>
        <p><small>Copyright © Computer Technology Groups. All rights reserved.</small></p>
    </footer>
</body>

</html>

CSSコード

下記は、別ファイル　「style.css」に記述します。拡張子がcssなので、<style>要素は必要ありません。

html {
    font-size: 100%;
    /* 基準フォントサイズ: 16px (1rem) */
}

body {
    font-size: 1rem;
    /* 16px */
    line-height: 1.75;
    /* 行間の高さを1.75倍に設定 */
    background-image: linear-gradient(180deg, #0093ff, #4ac8f5, #85d6ef, #4ac8f5, #0093ff);
    background-size: cover;
    background-position: center;
    margin: 0;
}

.container {
    width: 960px;
    margin: auto;
    background-color: #ffffff;
}

/* 汎用スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.center {
    text-align: center;
}

/* ヘッダー */
header {
    background-color: #2ecc71;
    padding: 0.625rem 0;
    /* 10px = 0.625rem */
    text-align: center;
}

header h1 {
    font-size: 2rem;
    /* 32px */
    margin: 0;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    column-gap: 1rem;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #f4f4f4;
    text-decoration: underline;
}

/* メインコンテンツ */
main {
    padding: 1.25rem;
    /* 20px = 1.25rem */
    background-color: #f9f9f9;
}

article {
    margin-bottom: 1.25rem;
    /* 20px = 1.25rem */
    border: 1px solid #ddd;
    padding: 0.625rem;
    /* 10px = 0.625rem */
    background-color: rgba(255, 255, 255, 0.7);
}

article header {
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.625rem;
    /* 10px = 0.625rem */
    padding-bottom: 0.3125rem;
    /* 5px = 0.3125rem */
}

article h2 {
    font-size: 1.5rem;
    /* 24px */
    margin: 0;
}

article time {
    font-size: 1rem;
    /* 16px */
    color: rgb(98, 98, 98);
}

/* サイドバー */
aside {
    background-color: #f4f4f4;
    padding: 0.625rem;
    /* 10px = 0.625rem */
    margin: 1.25rem 0;
    /* 20px = 1.25rem */
    border-left: 5px solid #2ecc71;
}

/* フッター */
footer {
    text-align: center;
    padding: 0.625rem;
    /* 10px = 0.625rem */
    background-color: #2ecc71;
    color: white;
    font-size: 1rem;
    /* 16px */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 0 1rem;
    }

    nav ul {
        flex-direction: column;
        row-gap: 1rem;
    }
}

HTMLファイルにリンクする外部スタイルシート

作成したスタイルシートをHTMLファイルの<head>セクションでリンクします。以下のように、<link>タグを使用して外部スタイルシートを指定します：

<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
    <link rel="stylesheet" href="styles.css">
</head>

外部スタイルシートとは？

外部スタイルシートは、CSSコードを別のファイルに分離し、HTMLファイルからリンクすることで、HTMLの構造とデザインを分離する方法です。同じCSSを複数のHTMLファイルで共有できるため、一貫性を保ちやすく、スタイルの変更が必要な場合、1つのCSSファイルを編集するだけで済みます。また、CSSコードをHTMLから分離することで、HTMLがすっきりと見やすくなり、さらにブラウザがCSSファイルをキャッシュすることで、サイトの読み込み速度が向上します。

rel属性 rel=”stylesheet”とは

rel属性は、HTMLの<link>要素や<a>要素に使用される属性で、リンクするリソースやリンク先の関係性（relationship）を指定します。relは「relationship」の略です。rel属性を指定しない場合、ブラウザはその<link>がスタイルシートであるかどうか判断できないため、rel="stylesheet"を省略できません。

type属性 type=”text/css”とは

type="text/css"は、HTML5では必須ではありません。<link>タグでCSSファイルをリンクする際、ブラウザはデフォルトでそのリソースがCSSファイルであると認識します。そのため、以下のようにtype属性を省略しても問題なく動作します

左右画面分割

このあとの作業効率をあげるために、今後は、エディタ画面で、HTMLとCSSを並べて配置し、どの要素に対してCSSが適用されているかを確認しながら作業しましょう。class名の入力ミスなども防げます。

HTMLと`rem`を活用したフォントサイズの設定

ブラウザが持つデフォルトのフォントサイズを基準にするために、html要素のfont-sizeを100%に設定します。一般的に、ブラウザのデフォルトフォントサイズは16pxなので、100%と指定すると16pxになります。

html {
    font-size: 100%; /* ブラウザのデフォルトを基準にする */
}

次にBody要素で基準フォントサイズを設定します。body要素でフォントサイズがremの基準値となります。ここでは16pxを基準として、全体のスケールを管理しやすくします。

body {
    font-size: 16px; /* 1rem = 16px となる */
}

その後、rem単位を使って要素ごとにサイズを指定します。remはhtmlまたはbodyで設定したサイズを基準にした倍数で動作するため、基準値を変えるだけで全体のデザインをスケーラブルに調整できます。

h1 {
    font-size: 2rem; /* 16px × 2 = 32px */
}

p {
    font-size: 1rem; /* 16px */
}

これは、基準を変えると自動で調整されるということになり、例えば、bodyのフォントサイズを18pxに変更すると、1rem = 18pxとなり、remで指定したサイズもすべて自動で調整されます。

body {
    font-size: 18px; /* 1rem = 18px */
}
h1 {
    font-size: 2rem; /* 18px × 2 = 36px */
}
p {
    font-size: 1rem; /* 18px */
}

応用例：レスポンシブ用

スマートフォ対応の、レスポンシブデザインに対応しやすくなります。htmlまたはbodyのフォントサイズを@mediaクエリで変更することで、画面サイズに応じて全体のスケールを簡単に調整できます。

@media (max-width: 768px) {
    body {
        font-size: 14px; /* 小さい画面では1rem = 14px */
    }
}

body にグラデーション

次はbody要素をブラッシュアップをします。CSSのLevel3には、background-imageプロパティの値にlinear-gradient()関数が使えます。linear-gradient()関数は、CSSのbackground-imageプロパティで使用され、線形のグラデーションを作成するための強力な機能です。背景を色のグラデーションで装飾する際に使用されます。

/*基本的な書き方*/
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

direction: グラデーションの方向を指定します。角度やキーワードで設定できます。
- to right（右方向）
- to bottom（下方向）
- 45deg（角度で指定。例: 45度）
color-stop: グラデーションで使用する色とその位置（オプション）を指定します。
- 色名（例: red）やRGBA値、HEX値などが使えます。
- 色の位置（例: 50%）を指定すると、その位置で色が切り替わります。

シンプルな上下のグラデーション

body {
    background-image: linear-gradient(to bottom, #ffffff, #cccccc);
}

上部（#ffffff）から下部（#cccccc）へのグラデーション。

斜め方向のグラデーション

body {
    background-image: linear-gradient(45deg, #ff0000, #0000ff);
}

左上（赤）から右下（青）への斜めグラデーション。

複数の色を使用したグラデーション

body {
    background-image: linear-gradient(to right, #ff0000, #ffff00, #00ff00);
}

左から赤、黄色、緑へ滑らかに変化するグラデーション。

色の位置を指定したグラデーション

body {
    background-image: linear-gradient(to bottom, #ff0000 25%, #0000ff 75%);
}

赤が全体の25%の位置まで適用され、そこから青に変化。

今回のコード

body {
    font-size: 1rem;
    /* 16px */
    line-height: 1.75;
    /* 行間の高さを1.75倍に設定 */
    background-image: linear-gradient(180deg, 
    #0093ff,
    #4ac8f5,
    #85d6ef,
    #4ac8f5,
    #0093ff);
    background-size: cover;
    background-position: center;
    margin: 0;
}

グラデーション自動作成

下記のジェネレーターはグラデーションを選択するとCSSコードが生成されます。コピーして使いましょう。

角度 (°)は、-180～180度を指定 0°

色1: #ff7eb3

色2: #ff758c

CSSコード

background: linear-gradient(45deg, #ff7eb3, #ff758c);

KobeyaLab >> 作成されたグラデーションを選んで編集　CSSグラデーションジェネレーター

完成イメージ

次は、ボックスに影をつけるbox-shadowです！

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

Follow @fukuokamiyako Follow Me

URLをコピーしました！

ホームページ基礎講座 外部スタイルシートとグラデーションCSS

HTMLコード

CSSコード

HTMLファイルにリンクする外部スタイルシート

外部スタイルシートとは？

rel属性 rel=”stylesheet”とは

type属性 type=”text/css”とは

左右画面分割

HTMLとremを活用したフォントサイズの設定

応用例：レスポンシブ用

body にグラデーション

シンプルな上下のグラデーション

斜め方向のグラデーション

複数の色を使用したグラデーション

色の位置を指定したグラデーション

今回のコード

グラデーション自動作成

CSSコード

完成イメージ

次は、ボックスに影をつけるbox-shadowです！

ホームページ基礎講座　外部スタイルシートとグラデーションCSS

HTMLと`rem`を活用したフォントサイズの設定