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

2020年4月4日2023年12月22日

URLをコピーしました！

今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>エコロジーと環境問題</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div class="content">
    <header>
        <h1 class="header-title">ECOLOGY【エコロジー】</h1>
    </header>
    <article>
        <section>
            <h1 class="sub-title">基本ポリシー</h1>
            <p>エコロジーや環境問題への関心は、年々高くなっています。Computer Technology Groupsでは、グループをあげてエコロジー／環境問題に取り組んでいます。環境保全に尽くすだけでなく、その成果や実績を地域に還元することもポリシーとしています。</p>
        </section>
        <section>
            <h1 class="sub-title">エコロジーへの取り組み</h1>
            <p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーsの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
        </section>
        <section>
            <h1 class="sub-title">商品のラインナップ</h1>
            <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
        </section>
    </article>
        <footer>
            <p>Copyright © Computer Technology Groups. All rights reserved</p>
        </footer>
</div>
</body>
</html>

外部スタイルシート

今回は、今までのようなCSSの記述をhead要素のtitle要素直下にstyle要素を使った記述ではなく、CSSの記述を、拡張子がcssとなる別のファイルに入力していきます。

そのため、10のフォルダの上で右クリック＞新しいファイルを作成して、ファイル名はstyle.cssとします。

また、HTMLファイルのtitle要素直下に、作成したstyle.cssを読み込むコードを記述します。

<link rel="stylesheet" type="text/css" href="style.css">

このように別ファイルに記述するCSSを外部スタイルシートといいます。

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

rel属性 rel=”stylesheet”とは

rel 属性は、「relationship」を意味します。翻訳すると、関係、つながりなどを指します。ここでは、読み込むリンクの種別は、「スタイルシートファイル」であることを指しています。

他にも rel=”icon” などの指定もあり、これは、favicon などのショートカットアイコンを指しています。

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

type属性に指定する値のtext/cssはMIMEタイプと呼ばれ、HTML5の以前のバージョン(XHTML/HTML)では必須でしたが、現バージョンでは、省略可です。

値は、テキストで書かれたCSSファイルといった意味で、他にもtext/javascript などのMIMEタイプもあります。

style.cssファイルにCSSを記述

下記コードを、style.cssを開いて模写コーディングしてみましょう。

html{
     font-size:100%;
}
body {
    font-size:16px;
    line-height: 1.75;
    background: #aaa
}
.content {
    width: 80%;
    margin: 1rem auto;
}
.header-title {
    font-size: 1.5rem;
    color: #065d31;
    background-color: #fff;
    padding: 1em;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 1rem;
}
.sub-title {
    font-size: 1.25rem;
    color: #065d31;
    background-color: #fff;
    padding: 0.5em;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 1rem;
}
section {
    margin-bottom: 2rem;
}
section p {
    text-align: justify;
}
header,
footer {
    text-align: center;
}

今回は、.contentというclass名をつけたボックスに、width:80%の記述があるため、プレビューで閲覧した際にパソコン画面の大きさによって、中のコンテンツの幅が上記のブウラザ見本とは異なります。

入力が終わったら、HTML要素やclass名をCSSファイルを見ながら確認していきますので、エディタ画面を下記のように二分割しておきましょう。

メニューバー>表示>左右画面分割

分割した左右にHTMLファイルをCSSファイルを配置

画面が分割されましたら、index.htmlとstyle.cssをダブルクリックで開きます。横に並ばないようでしたら、左のサイドバー上部に、左 index.html 右style.cssとなるようにドラッグして配置します。

htmlにfont-size:100%

一番の親要素である、html要素にブラウザが持つデフォルトのフォントサイズの100%を使うという記述を書きます。そのあと、body要素のフォントサイズがルートのサイズとなり、このあとのremという単位の倍数になります。今回は、16pxが1remとなります。この様な記述で行っておくと、bodyのfont-sizeが変更されると、以下にremで指定されているところは、その倍数に自動変更されます。

html{
     font-size:100%;
}
body {
    font-size:16px;
    line-height: 1.75;
    background-color: #aaa
}
.content {
    width: 80%;
    margin: 1rem auto;
}

background-color: #aaaとは

16進数のカラーコードは、#RRGGBB(赤・緑・青）を表しています。６桁の数字とアルファベットでできていますが、繰り返している場合は、省略可能です。

白・・・#FFFFFF →#FFF
黒・・・#000000→#000
赤・・・#FF0000→#F00
青・・・#0000FF→#00F

body にグラデーション

次はbody要素をブラッシュアップをします。CSSのLevel3には、background-imageプロパティの値にlinear-gradient()関数が使えます。

全体の背景であるbody 要素にbackgraund-image : linear-gradientを適用させます。

設定内容	プロパティ名	値
グラデーション	background-image または background	linear-gradient(to 方向, 開始色, 終了色);

linear-gradient()関数

通常のカラーは単色ですが、linear-gradient()関数使うと、2色以上のグラデーションを適用することができます。

body{
    font-size:16px;
    line-height: 1.75;
/*    background: #aaa*/
/* ここからがグラデーション*/
    background-image: linear-gradient(
    90deg,/*角度　方向*/
    #0093ff,/*色　複数指定可能*/
    #85d6ef
    );
}

90deg は角度です。カンマ区切りで、色を２色以上記述します。色は#で始まる16進法や、rgb()やreba()も可能です。

角度の変わりに方向も可能で、to left（左方向にグラデーション）や　to bottom （上はから下へのグラデーション）などの指定も行えます。

グラデーションは方向、色、色の範囲など記述も複雑になるので、ジェネレーターと呼ばれるグラデーションCSSを作成してくれるサイトがります。ぜひチェックしておきましょう。

ColorZilla

Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor

CSS Gradient

CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

CSSのグループセレクタ

CSS内で、header要素、footer要素も同一の指定の場合、まとめてグループ指定しておくと効率的です。

各要素の間をカンマ区切りで設定します。最後にカンマを入れると反映しないので注意しましょう。

header,
footer {
    text-align: center;
}

ホームページ中級講座　外部スタイルシート

さらにブラッシュアップ！動画をチェックしましょう。

よかったらシェアしてね！

URLをコピーしました！

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