0. はじめに

この記事では、HTML, CSSを初めて触った私が作成した自己紹介ページを紹介しています。初学者ではありつつも見やすいページにするため、 CSS Grid Layout という機能を用いました。

この自己紹介ページを作成するにあたり、いくつかのソースを参考にしました（参考文献は末尾に記載しています！）。また私自身完全に理解しているわけではなく、間違った認識をしている可能性もあります。その際はお手数ですがコメントいただけると嬉しいです。この記事がHTML, CSSを使って新たに自己紹介ページを作る初学者の参考になれば幸いです♪

1. 完成品の紹介

早速ではありますが、今回作成した自己紹介ページをお見せします。

見やすいページを作るという目標においては及第点なのではないかと思います。

2. 環境構築

解説に入る前に、まずは環境構築から。

VScodeをインストールする
VScodeの拡張機能を検索し、インストールする
- HTML Boilerplate
- HTML CSS Support
- HTML Preview
- HTML Snippets（※本記事執筆（2024年8月）時点で HTML Snippets は非推奨となっています。）

3. コーディング

1) 新規プロジェクト作成

新しいフォルダ「Profile Page」を作成し、その中に以下の２つのファイルを作成します。

index.html
style.css

2) 基本的なHTMLの書き方

index.html の大まかな形は以下の通りです。
HTMLにはそのページの情報（文章や画像など）を書くイメージです。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>**タイトル**</title>
        <link rel="Stylesheet" href="style.css">
    </head>
    <body>
        <header></header>
         **本文**
    </body>
</html>

<title></title> には任意のタイトルを入れられ、このタイトルがページ名になります。今回は「Profile Page」と入れます。

ちなみに、この <html></html> は大きく2つに分けられます。

<head></head>
- ページのヘッダに関する要素。
- この要素の内容はブラウザの画面上には表示されない（タイトルを除く）。
<body></body>
- ページの本体を示す要素。
- この要素の内容がブラウザの画面上に表示される。

3) header 部分

<body></body> の部分に入っていきます。まず <header></header> はこのように書きました。

<header>
    <div class="header">
        <h1>Profile Page</h1>
    </div>
</header>

この <div class="**クラス名**"></div> で囲んだ部分は「クラス」として扱われます。
そして、 style.css で見栄えを整えます。

.header{
    background-color: #4F6F52;
    height: 150px;
    font-size: xx-large;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

4) body 部分の概要

body 部分は CSS Grid Layout を用いています。今回は以下のような配置を作っていきます。

CSS Grid Layout についてはこちらの記事を参照してください。

CSS Grid Layout を極める！（基礎編）

これをもとにHTMLを書くと以下のようになります。

<div id="container">
    <div id="icon">
        <img src="icon.jpg" alt="No Image" width="300" height="300">
    </div>
    
    <div id="space">
    </div>
    
    <div id="name">
        <hr class="default-hr">
        <div class="FullName">
            <h1>mosssssy</h1>
        </div>
        <h5>もっしー</h5>
        <hr class="default-hr">
    </div>
    
    <div id="context">
        <p>
            はじめまして！ mosssssyと申します。<br>
            大阪府に住んでいます。<br>
            1月1日生まれの山羊座です。<br>
            趣味は読書とカフェ巡りです。<br>
            よろしくお願いします！<br><br>
        </p>
                
        <div class="link">
            <ul class="follow-me">
                <li><a href="**InstagramのURL**">Instagram</a></li>
                <li><a href="**GithubのURL**">Github</a></li>
                <li><a href="**QiitaのURL**">Qiita</a></li>
            </ul>
        </div>
    </div>

</div>

CSSはこちらです。

/* コンテナ */
#container {
    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 300px 50px 1fr;
    grid-template-areas:
        "icon space name"
        "icon space context";
    padding: 50px;
}

/* アイテム */
#icon {
    grid-area: icon;
    position: absolute;
}
#name {
    grid-area: name;
}
#context {
    grid-area: context;
}
#space{
    grid-area: space;
    background: #fff;
}

5) body 部分の各エリアの解説

icon エリアでは画像を入れています。画像を入れる際はその画像ファイルを index.html などが入っているフォルダにコピーしておきます。
画像を入れるコードは以下の通りです。

<img src="**写真のファイル名**" alt="**写真の名前（表示できなかったとき）**" width="300" height="300">

また name エリアでは新たに FullName クラスを作成し、文字の大きさを CSS で調整しました。

.FullName{
    font-size: 24px;
}

ちなみに <h1></h1> や <h5></h5> は見出しの文字の大きさを表しており、数字が小さいほど、見出しの文字は大きくなります。

name エリアの上下には横線を入れることで、名前を強調しています。
横線を入れるコードはこちらです。

<hr class="default-hr">

context エリアには本文に加えて、SNSや他サイトのリンクを載せるクラス「follow-me」を含んでいます。本文の <p></p> は段落を示します。
follow-me クラスはリストで表されており、 <ul></ul> は順不同の箇条書きリストを、 <li></li> はその中の要素を表します。
また、 <a href="**URL**"></a> でリンクを挿入できます。

解説は以上です。プレビューは index.html を右クリックして Show in Browser をクリックすれば確認できます。

4. 完成形

1) index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Profile Page</title>
        <link rel="Stylesheet" href="style.css">
    </head>


    <body>
        <header>
            <div class="header">
                <h1>Profile Page</h1>
            </div>
        </header>
        
        <div id="container">
            <div id="icon">
                <img src="icon.jpg" alt="No Image" width="300" height="300">
            </div>
            <div id="space">
            </div>
            <div id="name">
                <hr class="default-hr">
                <div class="FullName">
                    <h1>mosssssy</h1>
                </div>
                <h5>もっしー</h5>
                <hr class="default-hr">
            </div>
            <div id="context">
                <p>
                    はじめまして！ mosssssyと申します。<br>
                    大阪府に住んでいます。<br>
                    1月1日生まれの山羊座です。<br>
                    趣味は読書とカフェ巡りです。<br>
                    よろしくお願いします！<br><br>
                </p>
                
                <div class="link">
                    <ul class="follow-me">
                        <li><a href="**InstagramのURL**">Instagram</a></li>
                        <li><a href="**GithubのURL**">Github</a></li>
                        <li><a href="**QiitaのURL**">Qiita</a></li>
                    </ul>
                </div>
            </div>

        </div>

    </body>
</html>

2) style.css

/* コンテナ */
#container {
    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 300px 50px 1fr;
    grid-template-areas:
        "icon space name"
        "icon space context";
    padding: 50px;
}

/* アイテム */
#icon {
    grid-area: icon;
    position: absolute;
}
#name {
    grid-area: name;
}
#context {
    grid-area: context;
}
#space{
    grid-area: space;
    background: #fff;
}

.header{
    background-color: #4F6F52;
    height: 150px;
    font-size: xx-large;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.FullName{
    font-size: 24px;
}

5. さいごに

今回は簡単な自己紹介ページを作っていきました。時間の都合上、ここでいったん完成としていますが、「より洗練されたデザインにしたい」「画像がエリアの中央に配置されるようにしたい」「リンクをアイコン表示にしたい」「PCだけでなくスマホ表示にも対応させたい」…などなど、改善したい点はたくさんあるので、今後も頑張って学習していきたいと思います！
最後まで読んでいただき、ありがとうございました(^^♪

6. 参考文献

以下のサイトではHTML, CSSで使える要素やプロパティの一覧を確認できます。一度目を通しておくと、HTML, CSSでできることがイメージできるのでオススメです✨