
【環境構築】テキストエディタを準備しよう
開発環境の構築に必要な準備物1つ目は、テキストエディタです。
テキストエディタとは、文字情報(テキスト)の入力や編集(edit)、保存などが可能なソフトウェアのことをいいます。
OSごとに標準搭載されているメモ帳などのエディタもありますが、シンプルなテキストメモなので、エラー表示や色分けといったコーディングの補助機能を備えておりません。
これから始めるHTMLのコーディングでは多くの文字情報を入力する為、効率良くコーディングができるテキストエディタが欠かせません。
今では数多くのテキストエディタが存在していますが、初心者であればまずはVSCODEを使用することがお勧めです。
数多くの言語に対応し、構文の強調表示や自動入力などのコーディングを効率化する機能がたくさん備わっています。
【環境構築】ブラウザを準備しよう
開発環境の構築に必要になる準備物2つ目は、ブラウザです。
HTMLはwebページを作るものなので、ブラウザを開いて実際にどのように表示されるかを目で確認しながら進めていきます。
ブラウザはGoogleChromeなど、使い慣れているもので構いません。
HTMLの問題に挑戦しよう!
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。
問題1:開発環境を構築しよう
HTMLの環境構築で必要なもの最後の一つはHTMLのファイルの作成です。
ファイルの作成は問題形式で行います。以下の通りに作成してみましょう。
「忍者CODE」というフォルダを作成し、その直下に
「index」という名前のhtmlファイルを作成してください。
拡張子をつけ忘れないようにしましょう。
※解説で使用するテキストエディタはVSCODEになります。
ファイルの作成は問題形式で行います。以下の通りに作成してみましょう。
「忍者CODE」というフォルダを作成し、その直下に
「index」という名前のhtmlファイルを作成してください。
拡張子をつけ忘れないようにしましょう。
※解説で使用するテキストエディタはVSCODEになります。
期待する画面

補足
拡張子とは、ファイルの種類を識別するためのファイル名末尾に
付けられる文字列のことです。
htmlは「.html」、cssは「.css」、JavaScriptは「.js」というように
それぞれの言語によって拡張子が異なります。
画像ファイルの「.png」や「.jpg」
テキストファイルの「.csv」「.pdf」も拡張子です。
付けられる文字列のことです。
htmlは「.html」、cssは「.css」、JavaScriptは「.js」というように
それぞれの言語によって拡張子が異なります。
画像ファイルの「.png」や「.jpg」
テキストファイルの「.csv」「.pdf」も拡張子です。
完了にする!
活動記録をTweetする
mac、windows共通してデスクトップ上で右クリック→新規作成(フォルダ)
とすれば簡単に作成ができます。
もちろんテキストエディタ内で作成することも可能です。
フォルダ名は「忍者CODE」としましょう。
ファイルの作成は、インストールしたテキストエディタを起動し「忍者CODE」を開きます。
拡張子「.html」を付けて「index.html」というファイルを作成します。
これでHTMLのファイルは完成です。