12  ホームページ中級講座 ナビゲーションの作成(CSS)

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

前回 11 ホームページ中級講座 ナビゲーションの作成(HTML)で作成したHTMLファイルを使って、CSSを設置していきましょう。

マークアップされたHTMLは下記になります。また、CSSは外部スタイルシートになりますので、別途「style.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="contents">
        <header>
            <h1>ECOLOGY【エコロジー】</h1>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Map</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <section>
                <h1>エコロジーへの取り組み</h1>
                <p>Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素(CO2)の排出量を減らす努力もしています。専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。</p>
                <p>地域の自然環境の育成にも努めています。植樹、植林活動から、公園の整備なども行っています。また、社内裏手には広くて気持ちのいい芝生の丘があり、一般にも開放しています。昼休みなどには、憩いの場として賑わっています。</p>
            </section>
            <section>
                <h1>商品のラインナップ</h1>
                <p>紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。</p>
            </section>
        </article>
        <footer>
            <p><small>Copyright (C) Computer Technology Groups. All rights reserved.</small></p>
        </footer>
    </div>
</body>
</html>

CSSの作成手順動画

CSSの作成手順を動画で確認してからコード模写しましょう

リセットCSSの簡易版 ユニバーサルセレクタ

HTMLには、デフォルトのスタイルシート「ユーザーエージェントスタイルシート」が設定されています。

h1要素(見出し)には、文字サイズがデフォルトの2倍・文字の太さがボールド・上下に外側余白のmarginが約1文字近く入っています。これらのcssをそのまま使うこともあれば、オリジナルのCSSの邪魔になるので、消して(リセットして)使う場合があります。デザイン性を考えたり、複雑なCSSを記述する場合は、リセットして使っていきます。今回は、簡易版ということで、*(アスタリスクマーク)を使って全章(ユニバーサルセレクタ)全ての要素に対してmargin/padding を0にして作成しています。

*{
    margin:0;
    padding:0;
}

header 内のul要素にナビゲーションのCSS

display:flexを使って横並び指定

ナビゲーションは、ホームページのheader もしくはfooter によく設置してある他のページにリンクされる目次を横並べに配置しているデザインが一般的です。

横に並べるためには、ブロック要素であるli要素が横になる(インライン)になる必要があります。

そのために親要素である ul要素に、CSSでdisplay:flexを指定することで、中の子要素を横に並べることができます。flexは、見た目を横に並べる・・・というプロパティの値で、「flexbox」と呼ばれています。

設定内容プロパティ名
親要素に設定 中の子要素を横に並べるdisplayflex;
display:flexと同時に設定
中の子要素の行揃え
justify-contentcenter(中央揃);
flex-start(左揃え);
flex-end(右揃え);
space-between(均等に配置);
space-around(均等に配置 左と右端に空);

::last-child を使っていらない線を消す

header ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

header ul li {
    width:33.3%;
    text-align: center;
    border-right:1px solid #fff;
}

上記のコードのようにli要素の右側に区切り線が入るように記述すると、最終行のMapという文字列の右側にも線が入ってしまいます。よく見ないと見えない・・・かもしれませんが、線がありますので、こういう線は消しておく方がベストです。この場合、ul要素内のli要素では最終行にあたる場所はlast-child という擬似クラスをつけて指定することができます。

header ul li:last-child {
    border-right:none;
}

CSSコード

下記のCSSを模写してみましょう。

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(33.jpg);
    font-size: 1em;
    line-height: 1.7;
    font-family: 'Kosugi Maru', sans-serif;
}

h1 {
    text-align: center;
}

.content {
    width: 80%;
    margin: 1em auto 0;
    border: 6px double #4C1B00;
    background: rgba(255,255,255,0.5);
}

header {
    border-bottom:6px double #4C1B00;
}

header h1 {
    font-size: 1.75em;
    padding: 1rem 0;
}

header ul {
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}

header ul li {
    width:33.3%;
    text-align: center;
    border-right:1px solid #fff;
}
header ul li:last-child {
    border-right:none;
}
header ul li a{
    background: #9C6221;
    color: #fff;
    text-decoration: none;
    padding:0.5em 0;
    display: block;
}
header ul li a:hover{
   background: #140b02;
}
article{
    padding:2em 2em 0;
}
section{
    border:1px solid #9C6221;
    padding:1.5em;
    margin-bottom: 1.5em;
    background: rgba(255,255,255,0.5);
}
section h1{
    border-left:10px solid #9C6221;
    border-right:10px solid #9C6221;
    margin-bottom:1em;
}
section p{
    text-align: justify;
    text-indent: 1em;
}
footer{
    text-align: center;
    padding-bottom: 1em;
}