column

ITコラム

mv37198

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

この記事の監修者
江畠 翔太

プログラマーカレッジ講師(元エンジニア)
私自身、プログラミングを試行錯誤しながら学習してきました。その経験から ”どこでつまづくのか” ”どのような説明があればその時理解できたか” ということについて、客観的に把握できていると思います。皆様の「プログラミングを学びたい」という気持ちに精一杯応えていきますので、これから一緒に頑張っていきましょう。よろしくお願いいたします。

これからプログラミングを独学で習得したい方が入門用に考えるのは、まずHTMLではないでしょうか。今回はHTMLを使った、初心者向けプログラミングの始め方をご紹介します。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日:2023年6月20日

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

プログラミング html プログラマカレッジ

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

▲目次へ戻る

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

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

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

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

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

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

▶ 参考:コーダー/マークアップエンジニアフリーランス案件の特徴・単価・必要スキル|プロエンジニア

▲目次へ戻る

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

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

プログラミング html プログラマカレッジ

▲目次へ戻る

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

プログラミング html プログラマカレッジ

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

▲目次へ戻る

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

HTMLのプログラミングは お使いのPCに標準でインストールされているテキストエディタ(Windowsであればメモ帳、Macであればテキストエディット)さえあれば、作ることができます。

▲目次へ戻る

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

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

htmlタグ
headタグ
bodyタグ

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

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

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

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

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

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

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

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

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

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

このコードを「メモ帳」に書いてみます。
プログラミング html プログラマカレッジ

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

▲目次へ戻る

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

ファイルを保存したら、保存したファイルをダブルクリックして実行します。(筆者は標準ブラウザに「Google Chrome」を指定しているので、「Google Chrome」のアイコンになっています)
プログラミング html プログラマカレッジ

するとブラウザが立ち上がり、書いたHTMLが表示されました。
プログラミング html プログラマカレッジ

▲目次へ戻る

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

このようにHTMLはメモ帳を使って書くことができますが、タグをたくさん書いていくと記述が複雑になっていき、編集がどんどん難しくなっていきます。
以下でご紹介する無料のテキストエディタを導入すると、記述内容に応じて自動で色分けして表示してくれたり、タグを全て入力しなくても入力途中で候補を表示してくれたりするなどの便利な機能が盛り込まれているため、効率よく記述することが出来ます。

数あるテキストエディタのなかでも、オススメの3つを紹介します。


■ Visual Studio Code(ヴィジュアルスタジオコード)

プログラミング html プログラマカレッジ
【ダウンロードページ】https://code.visualstudio.com/download

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


■ Sublime Text 4(サブライムテキスト)

プログラミング html プログラマカレッジ
【ダウンロードページ】https://www.sublimetext.com/download

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


■ サクラエディタ(Windows版のみ)

プログラミング html プログラマカレッジ
【ダウンロードページ】https://sakura-editor.github.io/

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

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

▲目次へ戻る

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

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

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

プログラミング html プログラマカレッジ

▲目次へ戻る

3. HTMLの勉強方法

プログラミング html プログラマカレッジ
ここでは、元エンジニアである筆者がオススメする、HTMLの勉強方法についてご紹介します。

▲目次へ戻る

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

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

▲目次へ戻る

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

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

▲目次へ戻る

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

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

▲目次へ戻る

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

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

▲目次へ戻る

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

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

プログラミング html プログラマカレッジ

▲目次へ戻る

4. まとめ

プログラミング html プログラマカレッジ

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

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

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ