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

Webサイト制作,ホームページ中級講座,動画

今回は、前回10-1ホームページ中級講座・外部スタイルシート編で作成をしたHTML/CSSファイルをアレンジしていきます。

今回使うHTML/CSSファイルの準備

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ファイルはこちら

body{
    background-image: linear-gradient(
    45deg,
    #ff0000,
    #ffff00,
    #ff00ff
    );
    height:100vh;
    font-size:1em;
    line-height: 1.5;
}
h1{
    margin-top:0;
    padding:0.5em;
}
.content{
    width:70%;
    margin:0em auto;
    border:1px solid #000;
    padding:0.5em;
    box-sizing:border-box;
}
header,footer,h1{
    text-align: center;
}
section{
    border:solid 1px #000;
    padding:0.5em;
    box-sizing:border-box;
    margin-bottom:1em;
}

動画を見ながら上記のCSSファイルをアレンジしていきましょう。

CSSを使ってグラデーション・ドロップシャドウを設置

アレンジ結果のCSS

body の背景に、様々なbackground-image: linear-gradient()を試しています。

また、見出しの.sub-titleのclassには、影をつけるbox-shadowプロパティを使っています。

設定内容プロパティ名
要素に影をつけるbox-shadowX軸px Y軸px ぼかし具合px 広がりpx 色 内側指定;
文字列に影をつけるtext-shadowX軸px Y軸px ぼかし具合px 広がりpx 色 内側指定;
body{
    background-image: linear-gradient(
    90deg,
    #ddd,
    #fff
    );
    background-size:16px 16px;
    height:100vh;
    font-size:1em;
    line-height: 1.5;
}
h1{
    margin-top:0;
    padding:0.5em;
}
.content{
    width:80%;
    margin:0 auto;
    border: 1px solid #000;
    padding:0.5em 1em;
    box-sizing: border-box;
    background: rgba(255,255,255,0.7);
}

p{
    text-align: justify;
}
header,footer,h1{
    text-align: center;
}
section{
    border: solid 1px #000;
    padding:0.5em;
    box-sizing: border-box;
    margin-bottom: 1em;
}
.sub-title{
    background: #50fa6a;
    width:70%;
    margin:0 auto;
    border-radius: 100% 0;
    padding:1em 0;
    box-shadow: 5px 5px 5px #15401b;
}

footer p{
    text-align: center;
}