More than 1 year has passed since last update.

第5回　ホームページを作ってみよう-Part1-

Last updated at 2022-02-23Posted at 2022-01-13

#はじめに
HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。
HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。
##注意事項
この投稿はこれまでの総復習になります。そのため、過去に紹介した内容は説明せずに進めていきます。
ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。
説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。
使用するのはGoogle Chrome、Visual Studio Code、GitHubの3点になります。
また、数がかなり多くなってしまうので、いくつかのパートに分けて説明していこうと思います。
基本的な操作はcssで行います。

###これまでの投稿一覧

#完成図

コードの全文に関してはGitHubの方から確認できます。

#目次
1.ホームページ作成までに覚えておくこと
2.コードの説明

#1.ホームページ作成までに覚えておくこと
###コメントアウトについて
これはコードを書く上でかなり必要になってきます。
今書いているプログラムが何に反映させるものなのか、どこの部分を操作しているのかなどわかりやすくするために必要な操作と言えます。
書き方はコメントアウトしたい文字xをとこのように囲うとコメントアウトされます。

<body>
   <h1>ホームページまでに知っておくこと</h1>

   <p>
     <!--コメントアウト!-->
   </p>

</body>

このようにコードを書いて実行した際にコメントアウトの文字が表示されていなければOKです。
しかし、これはあくまでhtmlでのコメントアウトの仕方になります。
cssでは仕様が少し異なります。
一度pタグの内容を表示させるために、コメントアウトを取り、文字の色をcssでも字の色を変えてみましょう。
style.cssにp{color: red;}と書きましょう。
このとき実行すればコメントアウトという文字が赤に変わるはずです。
このcolorをコメントアウトするには**/＊→color: red;→＊/**で挟みます。

p{
    /*color: red;*/
}

これでコメントアウトできるので文字の色は緑からデフォルトに戻ります。

###ヘッダーとフッターについて
ヘッダーを入れるときはhederタグを用います。特に意味はありませんが、ヘッダーを書くときはヘッダータグを使うのが一般的です。
また、ヘッダー、フッターはクラスでないためstyle sheetに書き込む際に.が必要ありません。

#2.コードの説明
先ずはhtmlの方で基本の形を作っておきます。

<!DOCTYPE html>

 <html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>original character</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>

　　</body>
</html>

レイアウトはflexboxを使って行います。
そのために、親要素と子要素が必要になリます。
今回は親要素をdiv class="head_container"とし、親要素の中に子要素を入れるため、
div class="head_item"を中に入れます。この子要素は2つ作ります。

<body>
       <header>
           <div class="head_container">
               <div class="head_item">
                   <h1><font color="#ff69b4">オリジナルキャラクター紹介</font></h1>
               </div>
               <div class="head_item">
                   <ul>
                       <li><a href="https://qiita.com/hamuo3kameru" target="_blank">Qiita</a></li>
                       <li><a href="https://github.com/hamuo3kameta/Create-character">GitHub</a></li>
                       <li><a href="https://www.instagram.com/arkhaiathea/">Instagram</a></li>
                   </ul>
               </div>          
           </div>
           <h2><font color="red">キャラクター作成日記</font></h2>
       </header>

子要素2つを左右に振っておきたいのでcssにjustify-contentを使います。

.head_container{
    padding: 10px;
    display: flex;
    justify-content: space-between;

少し余白を空けるためにpaddingで10px分だけ開けています。
このままだとh1タグの文字が大きすぎるのでサイズを変えていきます。
上のコードの下に以下のコードを入れてください。

h1{
    font-size: 18px;
}

header ul{
    list-style-type: none;
}

header ul li{
    display: inline-block;
}

font-size: 18px;と書いて大きさを18pxに、list-style-type: none;でリストマーカーを消しています。
リストを横並びにするために、幅と高さを調整できるインライン要素、display: inline-block;を使います。

ここまでできたらヘッダーに画像を入れていきましょう。

header{
    width:100%;
    height: 320px;
    background: url(../img/satonaka004.PNG);
    background-size: cover;
    background-position: center;
}

このコードを.head_containerの上に追加します。
background: url(../img/satonaka004.PNG);←画像の指定
background-size: cover;←背景の画像が要素全体を覆うように表示されます。
background-position: center;←画像を中心に移動

次はキャラクター作成日記の文字を中心に移動させます。

header h2{
    text-align: center;
    margin-top: 180px;
    font-size: 36px;
}

text-align: center;で文字を中心に寄せます。
margin-top: 180px;で上側に余白を取ります。

次に各キャラクターのナビタグを作っていきます。
ヘッダーの終了タグの下に以下のコードを書きます。

<nav>
           <ul>
               <li><a href="#shiseki">
               シセキ キライ</a>
               </li>
               <li><a href="#fato">
               ふぁとちゃん</a>
               </li>
               <li><a href="#mudage">
               むだげ衆
               </a></li>
               <li><a href="#booger">
               ブーガァ</a>
               </li>
               <li><a href="#Caries">
               Caries</a>
               </li>
               <a href="#kumo">
               <li class="last_child">アプリス・クネ</a>
               <li>
           </ul>

ですがこのままだと縦に並ぶ為に横並びにしていきます。
navタグの中のulなので

nav ul{
    list-style-type: none;
    text-align: center;
}

nav li{
    display: inline-block;
    width: 150px;
    text-align: center;
    border-left: 1px dotted black;
}
.last_child{
    border-right: 1px dotted black;
}

border-left: 1px dotted black;←で要素間を黒の点線で区切ります。
上のリストのアプリス・クネにのみ、class="last_child"がついているのはこの点線を右側に付ける為です。

このような形になれば成功です。
いかがだったでしょうか、今回はここまでとさせていただきます。
残りの内容に関しては同じ作業の繰り返しになる為、案外一人でやってみるとさっくっと終わったりすると思います。
それでは皆さん、お疲れ様でした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

第5回 ホームページを作ってみよう-Part1-

第5回　ホームページを作ってみよう-Part1-