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

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

###今回はこちらの続きになります。

#完成図

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

#目次
1.ホームページに肉付けをしていこう
2.ホームページを完成させよう

#1.ホームページに肉付けをしていこう
###先ずは題名から付けていこう
前回同様、flexboxを用いてホームページに肉付けをしていきます。
今回は親要素一つに本題とサイトコンテンツが分かるように2つの子要素を用いて肉付けしていきます。
それでは前回のコードの続きに親要素を書いて行きます。

<div class="container">
    <div class="item01">

    </div>
    <div class="item02">

    </div>
</div>  

div class="container"という親要素の中にdiv class="item01"、div class="item02"という子要素を追加します。今回はこのitem01に本文を書き、item02にサイトコンテンツを書くという作りにしていきます。
それでは次にstyle sheetの方でflexboxを適用させていきます。詳しい内容については前回説明したため、割愛します。

.container{
    width: 800px;
    margin: 0px auto;
    display: flex;
}

display: flex;でflex boxが使えるようにしています。
各子要素についても書いていきます。

.item01{
    width: 70%;
}

ここでの幅70%とは画面の左端から右端というわけではなく、親要素のwidth: 800px;の70%となります。

.item02{
    width: 30%;
}

ここまでできたら本文を書いていきましょう。
htmlタグのdiv class="item01"の下にmainタグを入れて書いていきます。

<main>
    <h2><font color="red">サイトの題名</font></h2>
    <img src="img/画像名">
    <p>
    紹介文
    </p>
</main>

今回サイトの題名にはhamuoのオリキャラ図鑑-Part1-と入れ、紹介文に3Dキャラクターを作成した経緯について軽く書きました。
次にサイトコンテンツを書いて行きますこのときasideを使って書いていきます。asideはメインコンテンツとはあまり関係の無い内容を書くときに使います。
div class="item02"の下にasideタグを入れてサイトの概要などを書いていきます。

<aside>
    <h2>サイトコンテンツ</h2>
    <ul>
        <li>キャラクター紹介</li>
        <li>特徴</li>
        <li>制作期間</li>
        <li>ここがポイント!!!!</li>
        <li>問題点</li>
        <li>解決方法</li>
        </ul>
</aside>

次にcssの方で画像、文字の大きさを変更していきます。

.item01 h2{
    text-align: center;
    border-bottom: 1px solid navy;
}

.item01 img{
    width: 99%;
}

.item02 h2{
    font-size: 22px;
    margin-top: 6px;
    text-align: center;
}

.item02 ul{
    list-style-type: none;
    margin-top: 36px;
    padding-left: 1px;
}

.item02 li{
    border-bottom: 1px dotted black;
}

サイトコンテンツに区切りを付けるためにborder-bottom: 1px dotted black;で下に黒の点線を引いています。

#2.ホームページを完成させよう
今回はメインタグの内容を捕捉するという構成でホームページを作成するのでarticleタグを使用します。

<article>
    <h2>キャラクター紹介</h2>
    <div class="article_container">
        <div class="article_item">
        　　<img id="shiseki" src="img/test001.png">
            <P>
           　　 シセキ キライ 前
            </P>
            </div>
            <div class="article_item">
                <img src="img/shiseki_side.png">
                <P>
                   シセキ キライ 横
                </P>
             </div>
          </div>
          <div class="article_container">
            <div class="article_item">
               <img id="shiseki" src="img/siseki_front_wire.png">
               <P>
                  シセキ キライ 構図
               </P>
            </div>
            <div class="article_item">
               <img src="img/siseki_back_wire.png">
            </div>
         　</div>
           <p>
           <h2>特徴</h2>
           </p>
           <p>
           　 内容
           </p>
 　　　　　 <p>
           <h2>制作期間</h2>
           </p>
           <p>
              内容
           </p>
           <h2>ここがポイント!!!!</h2>
           <p>
              内容
           </p>
           <h2>問題点</h2>
　　　　　　<p>
              内容
           </p>
           <h2>解決方法</h2>
           <p>
              内容
           </p>
     </div>
</article>

ではおなじみのcssでレイアウトをしていきます。

.article_container{
    display: flex;
}
.article_item{
    width: 50%;
}

.article_item img{
    width: 99%;
}

.article_item p{
    text-align: center;
}

最後にフッターを付けていきます。
付け方はヘッダーの時と同様にfooterタグを用意します。

<footer>
<h2>サイト名</h2>
</footer>

footer{
    width: 100%;
    background-color: #eee8aa;
    padding: 30px 0px;
}

footer h2{
    text-align: center;
    font-size: 16px;
}

ここもheader同様、footerの前に.を付けないようにします。
これで上記のホームページ作成に必要な操作方法は以上になります。
さらに内容を追加していきたい場合はmainタグの外に別のmainタグを作るか、articleタグの終わりに新たにarticleタグを作成することで内容を増やすことができます。

いかがだったでしょうか、幅の調整や文字の色を自分好みに書き換えるだけでもデザインが変わって新しいものに見えると思います。
できあがったhtmlのホームページはお名前.comやGitHubなどでインターネット上に載せることができます。
それでは皆さん、お疲れ様でした。