【第1回】HTML・CSSの入門 -htmlファイルの作成-

beginner html

今回は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 (ファイル作成)
② New Folder (フォルダ作成)
③ Refresh Explorer (エクスプローラー更新)
④ Collapse Folders in Explorer (エクスプローラー分割)

index.htmlと入力しEnterキーを押します。

はい、できあがり。

ではブラウザで開いてみましょう。

ショートカットでブラウザを表示するブラウザ「Open in Browser」のプラグインを利用します。

<ショートカットキー>

・(windows)【Alt】 +【B】

インストール方法は【第0回】にありますので、確認してみてください。

【第0回】HTML・CSSの入門

何も表示されてませんが、ちゃんとブラウザで開くことができています。

ブラウザで表示できるように記述するものが、「HTML」となります。

では次回HTMLの書き方を説明していきたいと思います。

タイトルとURLをコピーしました