今回はHTMLファイルを作成する前まで説明していきます。
HTMLって?
そもそもHTMLやCSSとは・・・
HTMLは「Hyper Text Markup Language」の略でファイル名は「xxx.html」となっていることが多く、「Webブラウザで表示できるファイル」となります。
ですので、特別な開発ツールは不要で、テキストエディタで制作ができるのです。
CSSは「Cascading Style Sheets」の略でファイル名は「xxx.css」となっています。
HTMLを飾りつけする感じですね。
よくたとえで「家」を想像してもらいます。
家の骨組みがHTML、壁の色や玄関の形、窓の形などはCSS・・。
htmlファイルの作成
基本となるhtmlファイルを作成していきます。
Visual Studio Codeは、簡単にファイルやフォルダが作成できます。
まずフォルダを用意し、トップのページはindex.htmlとつけていきます。
htmlの練習フォルダは作成しておきましょう。
作業フォルダを開く
Activity Barに表示している「Open Folder」をクリックします。
先ほど作ったフォルダをクリックして開きます。
「Explorer(エクスプローラー)」をクリック → 「Open Folder」をクリック→作業フォルダを選択
ファイルを作成
ファイル名は「index.html」にしましょう。
「Explorer(エクスプローラー)」をクリック→「New File」をクリック→ファイル名を入力
マウスをエクスプローラーにいれると4つのアイコンが表示 New Fileをクリック
エクスプローラーにマウスをあわせると4つのアイコンが表示されます。
各ボタンの説明は以下の通り。
① New File (ファイル作成)
② New Folder (フォルダ作成)
③ Refresh Explorer (エクスプローラー更新)
④ Collapse Folders in Explorer (エクスプローラー分割)
index.htmlと入力しEnterキーを押します。
ファイル名を入力したら完成
はい、できあがり。
ではブラウザで開いてみましょう。
ショートカットでブラウザを表示するブラウザ「Open in Browser」のプラグインを利用します。
<ショートカットキー>
・(windows)【Alt】 +【B】
インストール方法は【第0回】にありますので、確認してみてください。
何も表示されてませんが、ちゃんとブラウザで開くことができています。
ブラウザで表示できるように記述するものが、「HTML」となります。
では次回HTMLの書き方を説明していきたいと思います。