【HTML】【CSS】初学者が自己紹介ページを作ってみた

# 0. はじめに

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

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





# 1. 完成品の紹介

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

![スクリーンショット (15).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3791970/53f3c611-e5d4-bdfd-8d03-5481ca9d17b6.png)

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





# 2. 環境構築

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

1. VScodeをインストールする
2. 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 を用いています。今回は以下のような配置を作っていきます。

![Profile_body.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3791970/bab2233f-2c1d-7d14-40b6-3aa6df485e83.jpeg)

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

[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)

これをもとに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. 参考文献
* [Tetsu-is(哲郎 石本)](https://qiita.com/Tetsu-is) 様　[【HTML+CSS入門】自己紹介ページを作ろう](https://qiita.com/Tetsu-is/items/af13b2c349bbfdcab9d7)
* [kura07](https://qiita.com/kura07) 様　[CSS Grid Layout を極める！（基礎編）](https://qiita.com/kura07/items/e633b35e33e43240d363)


以下のサイトではHTML, CSSで使える要素やプロパティの一覧を確認できます。一度目を通しておくと、HTML, CSSでできることがイメージできるのでオススメです✨
* TAG index　[HTML要素一覧](https://www.tagindex.com/html_tag/elements/)
* TAG index　[CSSプロパティ一覧](https://www.tagindex.com/stylesheet/properties/)