ホームページは、「テキストエディタ」というパソコンの「メモ帳」のようなテキストで作られています。メモ帳に、「コンピューター言語」を打ち込んで「ブラウザ」で開いてみると、もうそれがホームページの完成です。
初心者におすすめのエディタ
学校では、初めはコードを覚えるため、有能なエディタ(Visual Studio Codeなど)は、使いません。
Windows：TeraPad(シンプルなSDIタイプのテキストエディタ)
https://tera-net.com/
Mac：mi(macOS 用 汎用テキストエディタ)
https://www.mimikaki.net/
1. 専用のフォルダーを用意します。
「右クリック」をして「フォルダーを作成」します。わかりやすい専用の名前にします。日本語でもOKです。
1. エディタを起動して、以下のコードを(半角英数)で打ち込みます。
(初心者用に、meta部分などは省略します)
<html>
<head>
</head>
<body>
</body>
</html>2. モードの変更
言語モードを「html」に設定します。
エディタで記述をしたら、先ほどのフォルダーへ保存します。ファイル名を「index.html」にします。ホームページのトップページは、「index.html」と決まっていますので、適当な名前にしてはいけません。
2. ブラウザを起動して、ファイルを開く。
テキストエディタは、開いたままブラウザを起動します。ブラウザは、主にWindowsだと「Microsoft Edge」か「Google Chrome」でしょう。Macは、「Safari」が主流になっています。(校内では、Google Chromeを主に使用しています。)
モニターの画面を、「テキストエディタ」と「ブラウザ」を両方見れるよう分割して調整します。
ブラウザでは真っ白になる(右側)。
ブラウザの画面は、真っ白ですね。HTMLは、人間のように「head(頭)」の部分と「body(身体)」の部分があります。ブラウザで見えるのは、「body」に書かれた部分だけになります。それぞれのアプリケーションを、切り替えて作業していきます。
3. 「body」にテキストを打ち込んでみましょう。
エディタを保存をします。そして、ブラウザ側を、「再読み込み(更新)」します。
初心者向きのおすすめエディタ
| ソフト／ツール名 | 特長 | Windows / Mac |
|---|---|---|
| Brackets | ウェブ開発に特化していて、HTML + CSS を書いたときにライブプレビューできる機能がある。画面もシンプルで迷いにくい。 Kinsta® | Windows／Mac両方対応 Kinsta® |
| Geany | 軽い。起動が速い。基本的なコード補完・シンタックスハイライトあり。余計な機能が少ないので習得が楽。 ウィキペディア | Windows／Mac両方 ウィキペディア |
| Bluefish | HTML／CSS／軽めのスクリプトを扱いやすく、ウェブ編集用機能も備えてる。初心者にもわかりやすい。 ウィキペディア | Windows／Mac対応 ウィキペディア |
| Notepad++ | 非常にシンプル。HTML を書くには十分。タブが使えるのでファイルを複数開きやすい。Windows ユーザーならまずこれ。 Kinsta®+1 | 主に Windows Kinsta®+1 |
| オンライン HTML エディタ（例：HTML-Online.com） | インストール不要。ブラウザだけで練習できる。左側がビジュアル（見た目）、右側がソース（コード）を見るオプションがあるものが多く、HTML の動きをすぐ確認できる。 html-online.com | ブラウザベースなので OS 問わず |
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。