ケケンタWeb制作って難しそう…
そんな風に思っていませんか？
実は、Web制作は誰でも始められるんです！
この記事はWeb制作学習シリーズの第1回目です。理論よりも先に体験から始めて、30分で最初のWebページを完成させます。
- 自己紹介ページの基礎部分の完成
- HTMLの基本を体験的に理解
- ブラウザで実際に表示を確認
- Web制作の楽しさを実感
自己紹介ページの基礎部分（名前、職業、趣味、目標、リンク付き）
シリーズ全体の目標:
このシリーズを通して、最終的にはナビゲーションメニュー、レスポンシブデザイン、JavaScript機能まで含む完全なポートフォリオサイトが完成します！
シリーズ目次
Webアニメーションの引き出しを増やすのにおすすめの書籍
もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！
ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！
ケケンタ無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！
タイマースタート
3:00
学習目標
- HTMLファイルの作成方法
- 基本的なHTMLタグの使い方
- ブラウザでの表示確認
- Web制作の基本的な流れ
準備：必要なツール
必要なもの
- テキストエディタ: メモ帳、VS Code、Sublime Textなど
- ブラウザ: Chrome、Firefox、Safariなど
【推奨】VS Codeのインストール
VS Codeは無料で使える高機能なテキストエディタです。
※当シリーズではVS Codeを使用して解説を進めていきます。
体験1：最初のHTMLファイルを作成しよう
ステップ1：フォルダを作成
ステップ2：HTMLファイルを作成
画面左側にあるメニューの上部の「ファイルアイコン」をクリックすると新規ファイルを作成できます。
（「MY-PORTFOLIO」の右側にあるアイコン群）
<!DOCTYPE html>
<html>
<head>
<title>私のポートフォリオ</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私の最初のWebページです。</p>
</body>
</html>ステップ3：ファイルを保存
Ctrl + S（Windows）またはCmd + S（Mac）で保存
ステップ4：ブラウザで確認
ケケンタどうでしょうか！ たったこれだけで、最初のWebページが完成しました！
体験2：文字を表示してみよう
基本的なHTMLタグを試してみよう
先ほどのファイル（index.html）を以下のように変更してみてください。
<!DOCTYPE html>
<html>
<head>
<title>私のポートフォリオ</title>
</head>
<body>
<h1>田中太郎</h1>
<h2>Webデザイナー</h2>
<p>Web制作に興味があります。</p>
<p>HTMLとCSSを勉強中です。</p>
</body>
</html>変更点の説明
<h1>: 最も大きな見出し<h2>: 2番目に大きな見出し<p>: 段落（文章のまとまり）
ブラウザで確認
ファイルを保存して、ブラウザを更新（F5）してみましょう。
表示結果
<h1>は1ページに1つだけ使うのが基本<h2>、<h3>と数字が大きくなるほど見出しが小さくなる<p>で文章を段落に分ける
体験3：見出しと段落を追加しよう
自己紹介を追加してみよう
さらに内容を充実させてみましょう。
<!DOCTYPE html>
<html>
<head>
<title>私のポートフォリオ</title>
</head>
<body>
<h1>田中太郎</h1>
<h2>Webデザイナー</h2>
<h3>自己紹介</h3>
<p>Web制作に興味があります。</p>
<p>HTMLとCSSを勉強中です。</p>
<h3>趣味</h3>
<p>写真撮影</p>
<p>読書</p>
<p>旅行</p>
<h3>目標</h3>
<p>美しいWebサイトを作れるようになりたいです。</p>
</body>
</html>追加した要素
<h3>: 3番目の見出しレベル- 構造化された自己紹介ページ
ブラウザで確認
保存してブラウザを更新してください。
表示結果
- HTMLは文書の構造を表現する
- 見出しの階層で情報を整理する
- 段落で読みやすくする
体験4：リンクを追加しよう
外部リンクを追加してみよう
最後に、リンクを追加してインタラクティブにしてみましょう。
<!DOCTYPE html>
<html>
<head>
<title>私のポートフォリオ</title>
</head>
<body>
<h1>田中太郎</h1>
<h2>Webデザイナー</h2>
<h3>自己紹介</h3>
<p>Web制作に興味があります。</p>
<p>HTMLとCSSを勉強中です。</p>
<h3>趣味</h3>
<p>写真撮影</p>
<p>読書</p>
<p>旅行</p>
<h3>目標</h3>
<p>美しいWebサイトを作れるようになりたいです。</p>
<h3>リンク</h3>
<p><a href="https://www.google.com">Google</a></p>
<p><a href="https://github.com">GitHub</a></p>
</body>
</html>追加した要素
<a href="URL">: リンクを作成するタグhref: リンク先のURLを指定
ブラウザで確認
保存してブラウザを更新し、リンクをクリックしてみてください。
表示結果
<a>タグでリンクを作成href属性でリンク先を指定- クリックすると別のページに移動
実践課題
課題：自分の自己紹介ページを作ろう
- 自分の名前と職業を設定
- 自己紹介文を追加
- 趣味や目標を追加
- 好きなWebサイトへのリンクを追加
課題の解答例
<!DOCTYPE html>
<html>
<head>
<title>私の自己紹介</title>
</head>
<body>
<h1>山田花子</h1>
<h2>フロントエンドエンジニア</h2>
<h3>自己紹介</h3>
<p>プログラミングが好きで、特にWeb制作に興味があります。</p>
<p>現在はHTML、CSS、JavaScriptを勉強中です。</p>
<h3>スキル</h3>
<p>HTML: 基礎レベル</p>
<p>CSS: 勉強中</p>
<p>JavaScript: これから学習予定</p>
<h3>目標</h3>
<p>ユーザーに使いやすいWebサイトを作れるようになりたいです。</p>
<h3>参考サイト</h3>
<p><a href="https://developer.mozilla.org/ja/">MDN Web Docs</a></p>
<p><a href="https://www.w3schools.com/">W3Schools</a></p>
</body>
</html>まとめ
ケケンタ今回は、HTMLの基本を体験を通じて学習しました。
学んだこと
- HTMLファイルの作成方法
- 基本的なHTMLタグの使い方
- ブラウザでの表示確認
- Web制作の基本的な流れ
<h1>,<h2>,<h3>: 見出し<p>: 段落<a>: リンク
次回の予告
- 色やフォントサイズの変更
- 背景色や余白の調整
- 基本的なCSSプロパティの体験
ケケンタここまでお疲れさまでした！
今回の記事を通して、最初のWebページが完成しました。次回も一緒に楽しく学習していきましょう！
さらに学びたい方へ
この記事でHTMLの基本を体験できましたが、Web制作の学習を本格的に進めたい方には、忍者CODEをお勧めします。
忍者CODEがおすすめの理由
- 業界最安値: 経済産業省の補助金により実質16万円程度で受講可能
- 24時間サポート: 挫折しにくい環境で学習を継続
- 実践的カリキュラム: 実際の案件に直結するスキルを習得
- 現役クリエイターがメンター: 現場で使える知識を直接指導
Web制作を本格的に学びたい方は、忍者CODEの無料体験レッスン
から始めてみてください。
シリーズ目次
コメント