こんにちは！
よっしーです！
今回は
実際にコードを書いて
ブラウザに文字を表示してみましょう
なぜこのような内容をするのかというと
「基礎」を押さえるのは重要だからです。
基礎を知らないままコードを書き進め
実際に現場で働き始めると
なんとなく書いたコードが
なかなか反映されず
だんだんと焦りが生まれ
自分に自信を失い
今までの努力も
水の泡になるかもしれません。
でも、大丈夫！
この内容をしっかり理解すると
実際に現場で始めた時に
頼られる存在になれます！
目次
- HTMLとは何か
- 実際に文字を表示してみよう！
- 「手を動かして」学ぶことが大切な理由
- まとめ
では、HTMLに文字表示するための基礎を
みていきましょう！
1. HTMLとは何か
まず最初に、
HTMLとは何か？
というところからお話しします。
HTMLとは、Webページの
「骨組み」や「文章構造」を
作るための言語です。
私たちが普段見ているWebページには、
- 見出し
- 文章
- リンク
- 画像
- ボタン
など、さまざまな情報が
表示されていますよね。
それらの「情報のかたまり」を
定義するのがHTMLです。
つまり、HTMLがないと
Webページはただの空白のページに
なってしまいます。
HTMLの主な役割
- 見出しや段落など文章の構造を作る
- リンクや画像の場所を指定する
- デザインの元になる“枠組み”を整える
よく使うHTMLタグ（代表例）
初心者のうちは、以下のタグを
覚えておけばOKです！
<h1>〜<h6>：見出し（数字が小さいほど大きい見出し）
<p>：段落（パラグラフ）
<a>：リンクを作る（anchorの略）
<br>：改行
HTMLのタグは、基本的に
「開始タグ」と「終了タグ」で
囲んで使う**のがルールです。
例えば以下のような使い方をします。
<p>こんにちは！これは段落です。</p>※ただし、<br>のように「終了タグが不要」なものもあります。
2. 実際に文字を表示してみよう！
ここでは、実際にコードを書いて
「自分の名前をWebページに表示」する
練習をしてみましょう！
ステップ①：ファイルを作成する
（1）パソコンのデスクトップに
「first-website」という
名前のフォルダを作ります
（2）その中に「index.html」という
名前のファイルを作成します
📌 ファイルはメモ帳でも大丈夫ですが、VSCodeなどのエディタを使うと今後とても便利です！
ステップ②：HTMLコードを書く
先ほど作ったindex.htmlを開いて、
以下のコードをコピペして貼り付けてください
<!DOCTYPE html>
<html>
<head>
<title>はじめてのサイト</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>今回はHTMLで文字を表示してみました。</p>
</body>
</html>copy
このコードが意味していることは以下の通りです：
- <!DOCTYPE html>：この文書はHTMLです、という宣言
- <html>〜</html>：HTML文書の開始と終了
- <head>〜</head>：ページの情報（タイトルなど）
- <title>：ブラウザのタブに表示されるタイトル
- <body>〜</body>：実際にブラウザ上に表示される内容
ステップ③：ブラウザで開く
作成したindex.htmlファイルを
ダブルクリックしてください。
エディターを使っている場合は、
右クリックして「ブラウザで開く」や
「Live Serverで開く」を選んで
表示することもできます。
すると、ブラウザが開いて、
先ほど書いた内容が
表示されるはずです。
表示結果の例
おめでとうございます！
これが、あなたが作った
Webページです。
たったこれだけでも
「自分で何か作れた！」という
実感できると思います。
3. 「手を動かして」学ぶことが大切な理由
HTMLはとてもシンプルな言語です。
ですが、現場ではこの「シンプルな言語」を
正しく使えていないとトラブルの元になります。
たとえば
段落を表すpタグの中に、
divなどのタグを入れてしまうと、
正しく表示されずに
レイアウトが崩れてしまう
ことがあります。
このような
「地味だけど大事なこと」を
見落とさないためには、
実際に手を動かして、
動作や表示を自分の目で
確認することが一番効果的です。
なぜコードレビューで指摘されるのか？
実務では「ただ動けばいい」ではなく、
「見やすいコード」が求められます。
なんとなく書いたHTMLは
構造がわかりにくくなり、
他の人が修正しづらくなったりします
結果的にチーム全体に
負担をかけてしまうからです。
だからこそ、初心者のうちに
- タグの意味を理解する
- 必要最低限の正しい書き方を覚える
- 実際に表示させて違いを見る
という「基礎の積み重ね」がとても重要です。
まとめ
今回の内容では、
- HTMLとは何か
- よく使うタグ
- 実際に文字を表示する手順
- 基礎を大事にする理由
を紹介しました。
これらを1つ1つこなしていくだけで、
「HTMLは難しくない！」という
実感が得られると思います。
実務ではもちろん
もっと多くの知識が必要になりますが、
最初に「自分でWebページを作れた！」
という体験こそが最大の原動力になります。
焦らず、楽しく、
あなたのペースで、
学習を進めて
Web制作の一歩を
踏み出してみてくださいね。
これからもみなさんの支えになるような
発信をしていきますので
よろしくおねがいします！
あなたの一歩を、心から応援しています。
よっしー
0件のコメント