はじめに
この記事はフロントエンド初学者向けに自己紹介ページを作る手順を解説するものです。初学者は「何を作ればいいか分からない」と思うことが多いかと思います。そこで本記事を参考に自己紹介ページを作り、HTML,CSSの基本を学んでもらいたいと思います。今回はVScodeをインストールしていることを前提とします。
環境構築
スムーズにコードを書いていくために、まずはVScodeの拡張機能をインストールしましょう。
VScodeの拡張機能の検索欄で以下の拡張機能を探してインストールしてみてください。
- HTML Boilerplate
- HTML CSS Support
- HTML Preview
- HTML Snippets
コーディング
それでは実際にコードを書いていきましょう。
まずは以下の２つのファイルを用意します。
- index.html
- style.css
基本的にはHTMLファイルで載せたい情報を加えていき、CSSファイルで配置やサイズの変更をするという流れです。
HTMLの書き方
基本は以下の通りです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>**タイトル**</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<header></header>
**本文**
<footer></footer>
</body>
</html>
<title></title>に囲まれたタイトルには任意のモノを入れてください。今回は「Home」としておきます。
次に本文の部分に移ります。
今回、本文に入れたいものは
- 名前
- ニックネーム
- 肩書
- 写真
- サンプル写真
- 自己紹介
- 年齢
- 大学
- 専攻
- 所属
- スキル
- 言語１
- 言語２
- 言語３
になります。
それでは項目ごとにクラスを作成していきます。
項目の書き方はこちら
<div class="**項目名**">
<h1>**見出し１**</h1>
<h3>**見出し２**</h3>
</div>
h1やh3の数字の部分は見出しの文字の大きさを表していて数字が小さいほど、見出しの文字は大きくなります。
実際の「名前」の項目のコード
見出し１のニックネームに「Tetsu」
見出し２の肩書に「Front-end Running Engineer（フロントエンド駆け出しエンジニア）」と入れてみました。
<div class="Name">
<h1>Tetsu</h1>
<h3>Front-end Running Engineer</h3>
</div>
次は写真です。写真を入れる際は用意した写真のファイルをindex.htmlやstyle.cssが入ってるVScodeのEXPLORER内に入れる必要があります。
写真の入れるときのコードはこちら
<img src="**写真のファイル名**" alt="**写真の名前（表示できなかったとき）**" width="200" height="200">
実際の「写真」コード
<div class="Image">
<img src="animal_kuma.png" alt="KUMA" width="200" height="200">
</div>
写真を右に配置したいので、style.cssを編集していきます。
.Image {
position:absolute;
top: 20px;
right:20px;
}
これはtop（上端）から20px、right（右端）から20pxの位置に写真を配置するという意味です。
次は「自己紹介」の項目を作っていきます。
ここでは「見出し」と「段落」を使って情報を整理していきます。
タグ<p></p>を使うことで段落を作ることができます。
<a href="**リンク**">の形でリンクを貼り付けることもできます。
<div class="AboutMe">
<h2>About Me</h2>
<h4 class="age">Age</h4>
<p>19</p>
<h4 class="univ">Univ.</h4>
<p>Kwansei Gakuin University</p>
<h4>Major</h4>
<p>Computer Science</p>
<h4 class="belong">Belong</h4>
<p><a href="https://techuni.org" class="simple-link">Tech.uni<span glot-model="dev-rep"></span></a></p>
<hr class="default-hr">
</div>
次の「スキル」項目に行く前に横線を入れて仕切りを作ります。
<hr class="default-hr">を用いることで横線を入れることができます。
最後に「スキル」項目を作成します。手順は「自己紹介」と同じです。今回は「見出し」をskillsに、「段落」をhtml、css、javascriptにしました。実際のコードはこちらです。
<div class="Skills">
<h2>skills</h2>
<div class="skill-item">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
</div>
最後にbody全体の周りに余白を与えるためにstyle.cssでmarginを10pxに設定しておきます。
body {
margin: 10px;
}
お疲れ様でした。これで完成になります。
完成品はindex.htmlを右クリックしてShow in Browserをクリックすれば確認できます。
最後に全体像とコードを載せておきます。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="Stylesheet" href="style.css">
</head>
<body>
<header></header>
<div class="Name">
<h1>Tetsu</h1>
<h3>Front-end Running Engineer</h3>
</div>
<div class="Image">
<img src="animal_kuma.png" alt="KUMA" width="200" height="200">
</div>
<div class="AboutMe">
<h2>About Me</h2>
<h4 class="age">Age</h4>
<p>19</p>
<h4 class="univ">Univ.</h4>
<p>Kwansei Gakuin University</p>
<h4>Major</h4>
<p>Computer Science</p>
<h4 class="belong">Belong</h4>
<p><a href="https://techuni.org" class="simple-link">Tech.uni<span glot-model="dev-rep"></span></a></p>
<hr class="default-hr">
</div>
<div class="Skills">
<h2>skills</h2>
<div class="skill-item">
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</div>
</div>
<footer></footer>
</body>
</html>
style.css
.Image {
position:absolute;
top: 20px;
right:20px;
}
body {
margin: 10px;
}
最後に
今回は自己紹介ページの作成の手順を解説しました。各変数を調整すればフォントサイズを変更したりできます。いろいろカスタマイズしてオリジナルの自己紹介ページを作ってみてください。