logo Penguin Labo
ペンギンが技術ブログを書いています

プログラミング超初心者が爆速でHTMLを始める方法

初回投稿: 2021年05月14日 / 最終更新: 2021年06月09日
HTML&CSS プログラミング学習

概要

この記事について

何も知らないプログラミング初心者の方が、HTMLを始められるように解説した記事です。
とりえあずHTML書いて動かすことを目的としています。


テキストエディタやWebブラウザなどについては、記事の最後の方で少しだけ触れます。

なぜHTML？

初心者がHTMLを学ぶメリットはたくさんあります。

HTML学習する理由
  • ①簡単に始められる
    • メモ帳とブラウザさえあれば動作するので、準備は必要ありません。慣れてきたらテキストエディタなどをインストールしましょう。
  • ②プログラミングに慣れる
    • HTMLは簡単ですが、プログラミング似ているところがあります。慣れるという意味でメリットがあります。
  • ③無駄にならない
    • HTMLはどのサイトでも使用されています。なのでWebエンジニアとって必須の技術で、Web開発をする上で絶対に無駄にならないスキルです。
  • ④JavaScriptも学習できる
    • HTMLを少し勉強すれば、JavaScriptの学習もできるようになります。JavaScriptは重要度が高い言語です。

HTMLを始める

さっそくHTMLを始めてみましょう。基本的なパソコンの操作さえできれば、簡単にHTMLを書いて表示させることができます。

①HTMLを記述する

デスクトップ画面で右クリックをしてテキストドキュメントを選択し、「新しいテキスト ドキュメント .txt」を作成します。ファイルを開き、下記のコードをコピーして貼り付けます。

<!DOCTYPE html> 
<html>
  <head>
    <title>初めてのHTML</title>
  </head>
  <body>
    Hello world
  </body>
</html>

保存が完了したらファイル名を「test.html」に変更しましょう。


※ファイル名の拡張子(.txt)が見えない場合

拡張子が見えない場合は、エクスプローラー(Windowsキー+E)を開き、上部の表示タブの「ファイル名拡張子」にチェックをいれましょう。

②HTMLをブラウザで表示する

test.htmlをWebブラウザ(Google Chrome、Edge、Firefoxなど)にドラッグ＆ドロップすると、Hello Worldという文字が出力されます。

初めてのHTML1

上記の画像ようになれば成功です。


ブラウザでは、<body>に囲まれたHello Worldの部分が表示されます。

③HTMLを修正する

text.htmlを以下のコードのように修正してください。

test.html
<!DOCTYPE html> 
<html>
  <head>
    <title>初めてのHTML</title>
  </head>
  <body>
    Hello world

    <b>これは太文字です</b> <!-- 追加 -->
    <u>下線部</u> <!-- 追加 -->
  </body>
</html>
ファイルを開いてもブラウザが開いて修正できない場合

ファイルをダブルクリックをすると、拡張子をhtmlに変更したのでブラウザが開いてしまうと思います。この場合は、ファイルを右クリック→プログラムから開く→別のプログラムを選択するでメモ帳を選択してください。


常にこのアプリを使って.htmlファイルを開くにチェックをすれば、次回からメモ帳で開くようになります。


上記の修正したファイルを保存して、再度ブラウザにドラッグ＆ドロップします。すると、<b></b>や<u></u>に囲まれた文字が太字になったり、下線が引かれたりします。

初めてのHTML2
Point
このようにHTMLは、`b`や`u`などの様々なタグで文字を囲って記述していくのが基本になります。

このままでは文字が読み難いので、<br/>タグを使って改行を入れて読みやすくします。
次のようにコードを修正してブラウザで表示してみてください。

test.html
<!DOCTYPE html> 
<html>
  <head>
    <title>初めてのHTML</title>
  </head>
  <body>
    Hello world
    <br/> <!-- 追加 -->
    <b>これは太文字です</b> 
    <br/> <!-- 追加 -->
    <u>下線部</u> 
  </body>
</html>
初めてのHTML3

これで文字が読みやすくなりました。<br/>タグは文字を囲わないので、他のタグとは記述方法が特殊です。

次のステップ

ここまでできたら、なんとなくHTLの書き方や雰囲気委 ここまで終えたら下記の次のステップに進みましょう。

Point
好きなものから挑戦してみましょう。
次のステップ
  • テキストエディタのインストール
  • Webブラウザのインストール
  • HTMLの理解を深める
  • 良く使うタグの確認と練習
  • CSSの学習

テキストエディタのインストール

テキストエディタはコードの予測入力や、色を付けて見やすくしたりとプログラミングの補助をしてくれます。


様々なテキストエディタがありますが、Microsoftが開発している比較的新しいVisual Studio Code(VS Code)をオススメします。

Webブラウザのインストール

Windowsだと購入段階でEdgeがインストールされていますが、日本国内および世界的にみてもシェア率の高いGoogle Chromeをインストールしましょう。


Google ChromeはWebエンジニアからしても使いやすく設計されています。

HTMLの理解を深める

時間が余裕があるときにHTMLとは何なのか？から理解を深めてみましょう。

良く使うタグの確認と練習

頻発するようなタグなどを調べたり、HTMLのリファレンスを見ながら記述して動かしてみましょう。

CSSの学習

HTMLの知識が少しだけついてきたら、CSSを学習しましょう。CSSを学習すると文字の大きさや色を変更したりと、様々なデザインが可能になります。


CSSの学習について後日記事を書きますのでお待ちください。