ITコラム

column_main37198

スキルアップ

2021.10.12

HTMLから始めるプログラミング入門~メモ帳にコードを書いてみよう

この記事を書いた人
プログラマカレッジ編集部
プログラマカレッジ編集部

未経験からプログラマになりたいと考えてる皆さまに、プログラミング言語の基礎知識や、プログラマとしての転職ノウハウ、転職に役立つ資格、IT業界情報など、お役立ちコラムを配信しています。

これからプログラミングを独学で習得したい方が入門用に考えるのは、まずHTMLではないでしょうか。実はPCに標準でついているメモ帳機能だけでも、HTMLは書けてしまうのです。今回はそんなHTMLを使った、初心者向けプログラミングの始め方をご紹介します。

最終更新日:2021年10月12日

目次

1. HTMLのプログラミングとは
 1-1. HTMLのコードとプログラムは違う?
 1-2. HTMLとCSSはどう違う?
2. HTMLプログラミングの始め方
 2-1. 専用ソフトは不要!メモ帳さえあればOK
 2-2. メモ帳でHTMLを書いてみる
 2-3. 書いたHTMLを実行してみる
 2-4. 便利な無料エディタを利用する
 2-5. 作ったHTMLをWeb上で公開するには?
3. HTMLの勉強方法
 3-1. コードを全部覚える必要はない
 3-2. 独学するならサンプルを写経&改造して練習する
 3-3. HTML入門記事で勉強する
 3-4. プログラミング学習サイトで勉強する
 3-5. プログラミングスクールで勉強する
4. まとめ

1. HTMLのプログラミングとは


まず、HTMLでプログラミングするとはどういうことなのかをご紹介します。

▲目次へ戻る

1-1. HTMLのコードとプログラムは違う?

HTMLのコードを書くことは厳密にはプログラミングではなく、コーディングと呼ばれています。HTMLは正確にはプログラミング言語ではなく、マークアップ言語というものに分類されるからです。
プログラミング言語とマークアップ言語には、それぞれ次のような役割があります。

プログラミング言語:データなどの処理内容を指示する

マークアップ言語:文章や画像の構造や表現方法を指示する

つまりざっくりと言うと、プログラミング言語は中身を作り、マークアップ言語は見た目を作る言語となっています。ただし便宜的に、HTMLのコードを書くことをプログラミングと呼ぶ場面もあります。

なおコーディングだけする人をコーダー、プログラミングする人をプログラマーと呼び分けることもあります。その違いについて詳しく知りたい方は、次の記事をご覧下さい。

▲目次へ戻る

1-2. HTMLとCSSはどう違う?

よくHTMLとセットで語られるCSSですが、HTMLとの違いはその役割分担です。HTMLとは画像や文章のレイアウト(配置)を指示するものであり、CSSは細やかな装飾などを指示するものとなっています。

▲目次へ戻る

2. HTMLプログラミングの始め方


それではいよいよ、初歩的なHTMLのプログラミングを始めてみましょう。

▲目次へ戻る

2-1. 専用ソフトは不要!メモ帳さえあればOK

実はHTMLのプログラミングには、専用の開発環境(開発するための準備)は不要です。お使いのPCに標準で装備されているテキストエディタ(Windowsであればメモ帳など)さえあれば、作ることができます。

▲目次へ戻る

2-2. メモ帳でHTMLを書いてみる

HTMLのコードは、「<タグ>ここに中身を書く</タグ>」という感じの文字列で構成されます。このタグのうちhtmlファイルには毎回必ず書くものとして、次の3つがあります。

• htmlタグ
• headタグ
• bodyタグ

さらに先頭に「!DOCTYPE宣言」と呼ばれる文字列を書くのが、基本の形になります。このDOCTYPEに「html」と書くと、「これのファイルはhtml5だよ!」という宣言することになります。

さらに3つの定番タグを、次のように配置します。

<html>は、一番外側の大きな枠を作ります。

<head>には、画面のタイトルや文字コードなどの設定を記述します。

<body>には、画面上に表示したいもの本体を記述します。

試しにシンプルなコードを書いてみると、次のようになります。

<!DOCTYPE html>
<html>
    <head>
        <title>ここにページのタイトルを書きます</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>こんにちは!</p>
    </body>
</html>

<title>~</title>:ページのタイトルを書きます。

<meta charset=”utf-8″ />:文字のエンコーディングを指定します。

<p>~</p>:段落を表すタグです。この間に文章などを書きます。

 
このコードを「メモ帳」に書いてみます。

これを適当に「名前を付けて保存」します。このとき、拡張子をデフォルトの「.txt」から「.html」に変更しておきます。なお、ファイル名には日本語を使わない方が無難です。

▲目次へ戻る

2-3. 書いたHTMLを実行してみる

ファイルを保存したら、保存したファイルをダブルクリックして実行します。(筆者はいつもブラウザに「chrome」を使っているので、「chrome」のアイコンになっています)

するとブラウザが立ち上がり、書いたhtmlが表示されました。

▲目次へ戻る

2-4. 便利な無料エディタを利用する

このようにHTMLはメモ帳でも書けますが、コードが複雑になってくると入力補助機能があった方が便利です。例えばごちゃつきがちなタグを自動で種類別に色分けして表示してくれたり、タグを全て手打ちしなくても入力の途中で候補を表示してくれたり、文字列検索や置換したりするなどの機能です。

なおHTMLのコーディングに便利なテキストエディタとしては、次の4つがオススメです。
 
■ Sublime text3(サブライムテキスト)

 
【ダウンロードページ】https://www.sublimetext.com/3

Sublime HQ Pty Ltdが提供する無料のテキストエディタです。とても整ったインターフェースで見やすく、「恋に落ちるエディタ」の煽り文句にも納得です。その機能もプラグインを追加することで、自分好みにカスタマイズすることが可能です。特に開始タグを入力すると終了タグを簡単に自動入力してくれる拡張機能などもあり、コーディングのスピードアップが可能となっています。

 
■ Atom(アトム)

 
【ダウンロードページ】https://atom.io/

GitHubが提供する無料のテキストエディタです。Windows、Linux、Macのクロスプラットフォームに対応しており、拡張パッケージを使うことで様々な機能を追加できる、自由度の高いエディタとなっています。

 
■ visual studio code(ヴィジュアルスタジオコード)

 
【ダウンロードページ】https://code.visualstudio.com/download

Microsoftが提供する無料のテキストエディタです。Microsoft社製ですが、Linux版やMac版も提供されています。軽量ながら30種類のプログラミング言語をサポートし、デバッグ機能まで備えています。今後HTML以外にも同じエディタを使い続けたいという方におすすめです。

 
■ サクラエディタ

 
【ダウンロードページ】https://sakura-editor.github.io/

国産かつ完全無料のなかでも、おすすめのテキストエディタです。特に一括で空白を縦に削除するなどが可能な「矩形選択」がある、とても便利なツールです。タグの強調表示や置換、grepなどにも対応しています。

 
なおサクラエディタの詳しい導入方法は、次の記事を参考にして下さい。
タイトルはPHPとなっていますが、HTMLでも同様に使うことができます。

▲目次へ戻る

2-5. 作ったHTMLをWeb上で公開するには?

作ったHTMLファイルをweb上で公開するには、ネットワークに繋がっているサーバーにアップロードする必要があります。このサーバーを個人で用意するのは難しいので、多くの方はレンタルで利用しています。

サーバーをレンタルしたら、ファイル転送ソフトというものを使って、ローカルのパソコンからサーバーにファイルを送ります。すると、ようやく作ったHTMLがweb上に公開されるのです。なおサーバーのレンタル方法などについては、このページでは割愛します。

▲目次へ戻る

3. HTMLの勉強方法


ここでは、元エンジニアである筆者がオススメする、HTMLの勉強方法についてご紹介します。

▲目次へ戻る

3-1. コードを全部覚える必要はない

いきなりですが、コードの文字を全てきちんと覚えようとしているとHTMLの勉強は進みません。重要なのはコードのスペルではなく「こんな機能がある」とだけ、把握しておくことです。機能があると知ってさえいれば、後で必要になったときに細かいスペルやオプションなどの使い方は、ググって調べればいいのです。

▲目次へ戻る

3-2. 独学するならサンプルを写経&改造して練習する

いきなりオリジナルのコードを書こうとすると、なぜ思ったようにならないのかが分からないというような状況になりがちです。そこで確実に動くサンプルコードをまずコピペではなく自分の手でテキストに書き写すところから始めて、そのコードの中身を改造することで「ここを変更するとこんな感じに反映されるんだ!」というようにこまめに結果を確認して理解を広げていくスタイルがおすすめです。

▲目次へ戻る

3-3. HTML入門記事で勉強する

HTMLは入門記事での独学にとても向いている言語です。
入門記事には、次のようなものがあります。

▲目次へ戻る

3-4. プログラミング学習サイトで勉強する

ウェブ上には、さまざまなプログラミングを独学できるサービスがあります。
次の記事でオススメのプログラミング学習サイトをご紹介していますので、興味のある方はのぞいてみて下さい。

▲目次へ戻る

3-5. プログラミングスクールで勉強する

独学が難しいと感じる方には、プログラミングスクールの利用もおすすめです。
次の記事でオススメのプログラミングスクールをご紹介していますので、興味のある方はのぞいてみて下さい。

▲目次へ戻る

4. まとめ


HTMLから始めるプログラミング入門について、いかがでしたでしょうか。「HTMLから始めていつかプログラマになりたいけど、独力では限界がある!」と感じている方には、「プログラマカレッジ」もおすすめです。
「プログラマカレッジ」は、本気でプログラマを目指す方のための就職支援付き、受講料無料のプログラミングスクールです。今回ご紹介したHTMLを含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、ぜひ一度のぞいてみて下さいね。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ

完全無料の就職支援型プログラミングスクール「プログラマーカレッジ」

▲目次へ戻る

SHARE

最新記事

zoom_mv_07

卒業生インタビュー

2021.10.13

【卒業生の声:ツヅクさん】不動産からIT業界へ。業務の電子化をきっかけに、エンジニアへの転職を決意しました

受講スクール プログラマカレッジ 受講期間 昼間コース(2020年1月生) 料金 無料 就職先 株式会社クリアス・テクノロジー プログラマカレッジ卒業生のツヅクさんにお話しをお伺いしました! 目次 職場でのシステムトラブ […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.