前回の記事では、HTMLの内容をざっくり解説しました。
↓前回の記事はこちら
「HTMLって何？おいしいの？」
という状態から、
「HTMLって食べ物じゃないんだ！」
というところまで、たった5分でたどり着ける内容になっています。
そして今回は、
「四の五の言わずHTMLを書いてみよう！話はそれからだ！」
という内容です。
まずは手を動かしてみる。Web制作の初学者にとっては、これが本当にてっとり早いです。参考書を購入して勉強したり、スクールに通うことを検討する前に、まずは書く。気になったことはAIに質問する。そして、また書く。その後、よりスタンダードな知識が欲しくなれば書籍やWebで体系的に勉強していく。個人的にはこのやり方がおすすめです。
さぁ、始めましょう！いますぐ！
※今回はWindowsパソコンでの作業を想定しています。
手順１：デスクトップにフォルダを作る
デスクトップに新規フォルダを作成しましょう。
フォルダ名はなんでも構いませんが、今回は「html」としておきます。作成できたら、フォルダをダブルクリックして、フォルダの中に移動してください。
手順２：.txtファイルを作成する
フォルダ内で右クリック→コンテキストメニュー→「新規作成」→「テキスト ドキュメント」の順番で、テキストファイル(.txt)を作成します。
このとき、ファイル名に拡張子が表示されていない場合は表示させましょう。エクスプローラー→「表示」→「ファイル名拡張子」にチェックを入れます。
拡張子が表示された状態で、ファイル名を index.txt に変更します。
手順３：メモ帳で.txtファイルを編集する
それでは、さっそく index.txt を編集していきましょう。Windowsに標準搭載されている「メモ帳」アプリを使用します。
「え！？メモ帳！？こういうのって、もっと高機能でコーディングに特化したテキストエディタを使うんじゃないの？あなた本当にHTML書ける人？」と疑問をお持ちになったそこのあなた！落ち着いてください。
そんなものはあとでいくらでも使い倒します。今はテキストエディタをインストールするよりも、まずは今ある環境ですぐに手を動かして、実感していただきたいのです。コードを書くということを。
さきほど作成した index.txt を、メモ帳アプリで開いてください。そして、まっさらな状態のテキストに、いくつかのHTMLソースコードをコピー＆ペーストしていきます。もちろん、手打ちでも問題ありません。これから組み立てていくソースコードのほとんどは、専用のテキストエディタでは自動で入力されます。今後手打ちする機会はほとんどない記述もあるので、最初のうちは手打ちで、コードを書いている感を堪能するのもよいでしょう。
ソースコードをコピペしていく
以下のソースコードをテキストの先頭にコピペしてください。
<!DOCTYPE html>その直下に、以下のソースコードをコピペしください。
<html lang="ja">
<head>まだあります。続けて、以下の3つのソースコードを、上から順番にコピペしてください。
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>はじめてのHTML</title>続けて、以下のソースコードをまるっとコピペしてください。
</head>
<body>
</body>
</html>ここで一旦、ファイルを保存しましょう（Ctrl + S）。現時点でのソースコードの全体像を確認します。記述内容が以下のようになっているか確認してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのHTML</title>
</head>
<body>
</body>
</html>どうですか？なんかコード書いてる感が湧いてきませんか？楽しいですね。
本文部分のソースコードをコピペする
では、この手順の最後です。本文部分を編集します。
<body> と </body> の間に、以下のソースコードをコピペしてください。
<h1>Hellow, World.</h1>
<p>はじめてHTMLを書きました！</p>忘れずにファイルを保存します。（Ctrl + S）。
これでソースコードは完成です！以下のようになっているか、最終チェックしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのHTML</title>
</head>
<body>
<h1>Hellow, World.</h1>
<p>はじめてHTMLを書きました！</p>
</body>
</html>いいですね。あなたはもう立派なHTMLコーダーです。コングラチュレーション。
それでは最後に、ブラウザで表示を確認しましょう！
最終：ブラウザで表示を確認する
一旦、メモ帳を閉じてください。その後「html」フォルダ内にある index.txt のファイル名を
index.html
に変更してください。このとき、「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と確認されることがありますが、問題ありませんので「はい」をクリックしてください。ファイル名が index.html になっていればOKです。
index.htmlのアイコンの上にマウスを持っていき、右クリック→コンテキストメニュー→「プログラムから開く」→「Google Chrome（Microsoft Edge や Firefox でもOK）」で、ファイルを開きましょう！
デデーン！
このようにブラウザで表示されたら完璧です！おめでとうございます。
これは紛れもなく、あなたが作ったウェブページです。
おわりに
いかがでしょうか？もしあなたが、今までHTMLのようなマークアップ言語やプログラミング言語に全く触ってこなかった人であれば、今回の作業内容と結果はなかなか面白くて新鮮だったのではないでしょうか。この記事が、あなたにとってのWebへの世界への第一歩となれば幸いです。
SNSでシェアする
-
Xでシェアする
-
このページのURLをコピーする
