HTML・CSS独学応援 3-9 最終課題

今まで学習してきたHTMLとCSSを使って
サンプルサイト「ハンドメイド-愛染-」のトップページを作ってみましょう。

サンプルサイト

上記の画像に似せたwebページを作っていきましょう。

サンプルに使用する画像や、実際に書いたコードを用意しました
ダウンロードして学習に使用してみてください。

記事で紹介していない方法も使用しています。
ヒントを参考にしながら、調べてみてください。

ヒント

作業の流れは下記のようになります。

  1. ファイル構造を整える
  2. HTMLを書く
  3. CSSを書く

class名などは、自由に命名してOKですが。
後々見返したときに、何なのか分かるような命名をするといいでしょう。

上記のような構造になっています。
参考にしつつ挑戦してみてください。

解説

ファイル構造を整える

フォルダーを作り
HTMLファイルとCSSファイルを用意します。
合わせて、画像を入れるフォルダーも用意しておきましょう。

使用するロゴや画像をダウンロードして
imagesフォルダーに保存しましょう。

フォルダー名・ファイル名は自由ですが
サンプルでは上記のように作成しています。

HTMLを書く

1,HTMLの型を用意

まずはHTMLの型を用意しましょう。
続いて<head>内に設定を書いていきます。


HTMLの型については、下記記事で紹介しました。
<title>は「ハンドメイド-愛染-」としました。

https://reonoheya.com/htmlcss-3

2,HTMLの設定

HTMLの型の中で、<head>部分の中に
下記のような設定を行います。

これまでの学習記事では学んでいない内容を使用しています。

①meta description

検索した時に出てくる、文字の部分を設定しているよ。
ここで書いたものが、Googleなどで検索した時に
表示される文字の部分になります。

②、リセットCSS

デフォルトで設定されているCSSを無効化するためのものです。
CSSに何も書いていない状態でも、初めからmarginnやpaddingなど
適応されているものもあります。

リセットCSSを読み込むことで
デフォルトのCSSをリセットしています。

③、Googleフォント

HandoMaid-Aizen-の部分に使用しているフォント(文字の種類)を
読み込んでいます。

④、CSSの読み込み

自分の書いたCSSを読み込んでいます。

⑤、ロゴ(ファビコン)の読み込み

ファビコンと呼ばれるロゴみたいなものを設定しています。
多くの場合サイトのイメージに合わせたデザインを使用します。

3,構造のイメージ

全体の構造は上記のようになっています。

1番外側に枠を作り、その中に
2つの枠が入っているようなイメージです。

4,headerを書く

サイトのheader(ヘッダー)部分を作ります。

CSSを適用する前は、上記のような見た目になると思います。

        <header class="page-headr wrapper">
            <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="handomeid"> </a></h1>
            <nav>
                <ul class="main-nav">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </nav>
        </header>

<header>要素の中に<h1>要素<nav>要素を作ります。

1,<h1>にロゴを指定する

<h1>には、<img>を使ってlogo.svgを表示させます。
<a>で<img≻を囲むことで、リンクを付けています。

こうすることで、<header>のロゴをクリックすると
他のページからでも、トップページに戻ってくることができるようになります。

2,ナビゲーションメニューを作る

<nav>要素の中にリストを作ります。
ここをクリックすることで、他のページへ移動できるように
リンクにしておきます。

5,メイン部分を書く

        <div class="home-content wrapper">
            <h2 class="page-title">HandoMaid-Aizen-</h2>
            <p>思い出の品も愛用品に<br>古きよきものに、新しい命を吹き込むハンドメイド</p>
            <a class="button" href="#">商品を見る</a>
        </div>

メインになる部分を書きます。

class名については、事由につけてOKですが、
CSSを付ける時や、見返す時に分かりやすいものにしておきましょう。

完成したHTML

<!DOCTYPE html>
<html lang=ja>

<head>
    <meta charset="UTF-8">
    <title>ハンドメイド-愛染-</title>
    <meta name="description" content="愛染のハンドメイドサイト">
    <link href="https://meyerweb.com/eric/tools/css/reset/">

    <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;1,700&display=swap"
        rel="stylesheet">
   <link href="style.css" rel="stylesheet">
    <link rel="icon" type="image/png" href="images/favi.png">
</head>

<body>
    <div id="home" class="big-bg">
        <header class="page-headr wrapper">
            <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="handomeid"> </a></h1>
            <nav>
                <ul class="main-nav">
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="blog.html">BLOG</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </nav>
        </header>

        <div class="home-content wrapper">
            <h2 class="page-title">HandoMaid-Aizen-</h2>
            <p>思い出の品も愛用品に<br>古きよきものに、新しい命を吹き込むハンドメイド</p>
            <a class="button" href="#">商品を見る</a>
        </div>
    </div>
</body>

</html>

CSSを書く

CSSについては、1つ1つ解説していると
膨大な量になってしまうので、重要な部分のみ解説します。

  1. 背景の画像を設定
  2. headerを横の並びにする
  3. header及びメイン部分の中央寄せ

1,背景の画像を設定

印象的な背景画像は、<div id="home" class="big-bg">に対して
 background-imageを使用しています。

2,headerを横の並びにする

「フレックスボックス」っというものを使用して横並びにしています。

<nav>
   <ul class="main-nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="blog.html">BLOG</a></li>
    <li><a href="contact.html">CONTACT</a></li>
   </ul>
</nav>
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 34px;
    margin-bottom: 0px;
    list-style: none;
}

main-navに対して
display: flex;の指定をする事で実現しています。

3,header及びメイン部分の中央寄せ

text-alignを使用して中央寄せしています。

<div class="home-content wrapper">
    <h2 class="page-title">HandoMaid-Aizen-</h2>
    <p>思い出の品も愛用品に
    <br>古きよきものに、新しい命を吹き込むハンドメイド        
    </p>
    <a class="button" href="#">商品を見る</a>
</div>
.home-content {
    text-align: center;
    margin-top: 10%;
}

home-contentに対して、text-align: center;を指定することで
中央寄せを実現しています。

© 2021 ーれおの部屋ー