ウェブサイトの作り方　”実践3-2″　mainタグ　お知らせ欄

おはようございます

今回はウェブサイトの作り方3-2ということで、お知らせ欄の作成についてご紹介いたします。

前回はスライドショーを導入し、ウェブサイトの第一印象を位置づける内容でした。そして、今回のお知らせ欄ですが、こちらも大半のウェブサイトで上の方に導入されているように感じます。初見のお客様用ではなく、常連様やお得意先様に見ていただくための欄ですね。新商品の発売案内や、長期休暇のお知らせなど大切なことを書く場所です。難しい設定ではありませんので、早速取り掛かっていきましょう！前回までの内容はこちら

ウェブサイトの作り方　”入門１” | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”入門2”　HTML導入 | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”入門3”　CSS導入 | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”実践1”　headタグ | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”実践2-1”　headerタグ html | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”実践2-2”　headerタグ css | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”実践2-3”　headerタグスマホ版 | 株式会社レーベン (leben-neu.co.jp)
ウェブサイトの作り方　”実践3-1” mainタグ　スライドショー | 株式会社レーベン (leben-neu.co.jp)

その1　ニュース欄導入方法まずはindex.htmlを開き、以下のコードをコピーしてください。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=“UTF-8”>
        <link rel=“stylesheet” type=“text/css” href=“css/common.css”>
        <link rel=“stylesheet” type=“text/css” href=“css/index.css”>
        <link rel=“stylesheet” type=“text/css” href=“css/slick.css”>
        <link rel=“stylesheet” type=“text/css” href=“css/slick-theme.css”>
        <meta name=“viewport” content=“width=device-width,initial-scale=1.0”>
        <meta name=“Description” content=“ウェブサイトの説明文”>
        <meta property=“og:title” content=“ウェブサイトの名前”>
        <meta property=“og:type” content=“website”>
        <meta property=“og:url” content=“URL”>
        <meta property=“og:image” content=“アイコン”>
        <meta property=“og:site_name” content=“ウェブサイトの名前”>
        <meta property=“og:description” content=“ウェブサイトの説明文”>
        <title>サンプルサイト</title>
        <link rel=“shortcut icon” href=“img/logo/favicon.ico”>
    </head>
    <body>
        <header>
            <div class=“header-left”>
                <h1><a href=“index.html” title=“ホームへ戻る”>サンプルサイト</a></h1>
            </div>
            <nav class=“pc-nav”>
                <ul>
                    <li><a href=“#”>htmlについて</a></li>
                    <li><a href=“#”>cssについて</a></li>
                    <li><a href=“#”>headについて</a></li>
                    <li><a href=“#”>headerについて</a></li>
                    <li><a href=“#”>お問い合わせ</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div class=“slide-show”>
                <div><img src=“img/sample-photo1.jpg” title=“sample-photo1”></div>
                <div><img src=“img/sample-photo2.jpg” title=“sample-photo2”></div>
                <div><img src=“img/sample-photo3.jpg” title=“sample-photo3”></div>
            </div>
<!–ここから本日の内容–>
            <div class=“news”>
                <h2>新着情報</h2>
                <ul>
                    <li>
                        <p class=“day”>2021.xx.xx</p>
                        <a href=“news/news1.html”>○○について1</a>
                    </li>
                </ul>
                <hr>
                <ul>
                    <li>
                        <p class=“day”>2021.xx.xx</p>
                        <a href=“news/news2.html”>○○について2</a>
                    </li>
                </ul>
                <hr>
                <ul>
                    <li>
                        <p class=“day”>2021.xx.xx</p>
                        <a href=“news/news3.html”>○○について3</a>
                    </li>
                </ul>
                <hr>
            </div>
<!–ここまで本日の内容–>
        </main>
        <footer>
        </footer>
        <script src=“https://code.jquery.com/jquery-2.2.0.min.js” type=“text/javascript”></script>
        <script src=“https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js”></script>
        <script type=“text/javascript”>
            $(document).on(‘ready’, function() {
                $(‘.slide-show’).slick({
                    dots: true,
                    infinite: true,
                    accessibility: true,
                    autoplay: true,
                    autoplaySpeed: 3500,
                    speed: 1000,
                });
            });
        </script>
    </body>
</html>

たったこれだけです。ウェブサイト上で確認してみると

まだcssを適応させていないので、あらぬ方向に配置されていますね。cssでレイアウトや文字の大きさを変更しましょう。index.css

.slide-show{
    margin: 3% auto;
    width: 45%;
}
.slide-show img{
    width: 100%;
}
.news{
    margin: 3% auto;
    width: 45%;
    border: solid 0.3rem black;
    border-radius: 1.2rem;
}
.news h2{
    font-size: 2.7rem;
    padding: 1% 0 0 0;
    margin: 1% 3%;
}
.news ul{
    margin: 0 3%;
    list-style: none;
}
.news p{
    font-size: 1.4rem;
    font-weight: bold;
}
 
.news a{
    text-decoration: none;
    font-size: 1.6rem;
    padding: 0.5% 0 0 2%;
    color: #111111;
}
.news a:hover{
    color: red;
    transition: 0.1s;
}
.news hr{
    margin: 2%;
    border: 1px dotted #ccc;
}

そうすると

このようにお知らせのページを作ることができました。背景の色の影響か、ひと昔前のサイトのようになってしまいました（笑）背景の色は、画像とブログ側の背景色を識別するためにつけているだけなのでお気になさらないでください。ではhtmlとcssを交えて一つ一つ解説してきます。その2　ニュース欄で使ったタグやcssの解説<div class=”news”></div>で新着情報の欄を作成しました。黒い線で囲われている範囲がこれに該当します。枠の作り方ですが、borderというcssを使用します。初めて使うcssですね。borderはその名の通り線を作るcssのコードです。border: solid 0.3rem black;で線の種類、大きさ、色を指定しています。その下にあるborder-radius: 1.2rem;で線を丸くしました。数字を変えて試していただけると実感が出ると思います。そして、次のh2を使い、ここには新着情報が載っていますよ！という見出しを作りました。その下にulとliで箇条書きリストを作り、<p>で日付を書き、<a>で別のページへ飛ばすようにしました。aのcssで、.news a:hover{}とありますが、これは:hoverを足すことで、マウスが重なった時にどのような動きをするのかを指定しています。この場合、赤色になること、そしてアニメーションがフェードのようなアニメーションがつけるよう指定しています。マウスを重ねてみると、ゆっくり赤色になっていくのがお分かりいただけると思います。そしてこちらも初登場の<hr>です。こちらは下線を作るのに使用しました。先ほどcssのborderで線を作ったのですが、下線であればhtmlで<hr>と書くだけで使用できます。そのままでも使えるのですが、今回はcssで上下の余白と点線にする設定を加えました。

.news hr{
    margin: 2%;
    border: 1px dotted #ccc;
}

まとめ

以上、お知らせ欄の作り方でした。

肝心のお知らせのページがまだできていないのですが、それは次回に作成したいと思います。

そして本日は新しいhtmlを1つ、新しいcssを4つ使いました！この辺りは好みによって使うか否か分かれると思いますが、覚えておいて損はありません。

新しいものではありませんが、ヘッダーを作るときに使った<ul><li>タグも再登場しましたね。これらは何度も使う場面が増えてくると思いますので、徐々に慣れていきましょう。

ウェブサイトの作り方　”実践3-3″ mainタグ　お知らせのリンク先ページを作る | 株式会社レーベン (leben-neu.co.jp)