10-1 ホームページ中級講座　CSSでグラデーション

Webサイト制作
2020.04.02

外部スタイルシート

HTML<head></head>内に記述する内包のスタイルシートとは違い、HTMLとは別のファイルを作成して、そのファイルの拡張子をcssとすることで、スタイルシートのファイルを作成することが可能です。HTMLとの関連づけは、下記のコードをHTMLの<head>内、<title>要素の直下に書くことで呼び出しとなります。

<link rel="stylesheet" href="style.css">

CSSのグループセレクタ

CSS内で、header もfooter もh1もこれらの要素が囲っているところは全て中央に揃えたいという時は、まとめてグループ指定しておくと効率的です。

header, footer,h1{
    text-align:center;
}

各要素の間をカンマ区切りで設定します。注意点は最後にカンマをうっかり入れると適用されないということです

body に　backgraund-image : linear-gradient

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

これは、背景に2色以上の色の変化を適用させるグラデーション効果ができるプロパティの値です。

body{
    background-image: linear-gradient(
    90deg,/*角度　方向*/
    #ddd,/*色　複数指定可能*/
    #fff
    );
    background-size:16px 16px;/*1つの四角の大きさ*/
    height:100vh;
    font-size:1em;
    line-height: 1.5;
}

90deg は角度　そのあとに色が入ってきます。( )の指定内に書いていきます。

一番最初に書くのは、to left　左側からや　to bottom 上はから下へ　などの指定になります。次に色を書いていきます。色をどんどん書いていくと複雑なグラデーションとなります。

ホームページ中級講座　10-1の動画はグラデーション

10-1　ホームページ制作基礎講座　CSS編 (Adobe Bracketsを使って)

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 &copy; Computer Technology Groups. All rights reserved</p>
        </footer>
</div>
</body>
</html>
スポンサーリンク
タイトルとURLをコピーしました