HTML・CSSの学習環境構築についての記事はこちら
WEBサイト制作の為の環境構築
WEBサイト制作をするために必要なものは
- テキストエディタ (メモ帳などでも構いませんが、私はVS Codeを使用しています。)
「VisualStudioCode環境構築」をご参考ください。 - ブラウザ (Webサイトを閲覧するためのソフトウェアのこと。デベロッパーツールが便利なのでChromeがおすすめ。)
の二つです。
HTML・CSSとは
WEBサイトを作るために使用する言語のこと。
- HTML：WEBサイトの文書を組み立てる役割。
- CSS：HTMLで組み立てた文書を装飾する役割。
WEBサイトは、最低限上記二つの言語を組み合わせて作られている。
HTMLとは
HTMLとは、Hyper Text Markup Languageの頭文字をとった、マークアップ言語の1つ。
WEBサイトの文書を組み立てる役割を持っています。
HTMLタグと呼ばれる書式を、テキストエディタを編集してWEBサイトを組み立てていく。
タグの書き方
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
タグは、上記のように開始タグ「<h1>」と終了タグ「</h1>」で囲んで記述する。
開始タグから終了タグまでの「<h1>大見出し</h1>」を要素と呼ぶ。
終了タグが無くても使用できる改行「<br>」などは、空要素という。
属性とは
属性とはHTMLの要素に、追加の情報を設定するためのもの。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
- img ： 要素名
- src ： 属性名
- icon.jpeg ： 属性値
- src=”icon.jpeg” ： 属性
- <img src=”icon.jpeg”> ： 要素
属性名と属性値はセットで記述する
タグ名に続けて属性名と属性値を記述する。属性値は”（ダブルクオーテーション）または’（シングルクオーテーション）で囲みます。
どちらを使用してもいいけど、どちらかひとつに統一すること。
私は”（ダブルクオーテーション）を使っています。
ひとつのタグに対して複数の属性設定が可能。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
- src属性 ： 画像ファイル
- width属性 ： 画像ファイルの横幅
- height属性 ： 画像ファイルの高さ
HTML構造をきれいにするためにインデントを使用する
インデントとは、行頭に空白を設けてずらすことです。
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
上記のように記述してもWEBサイトは表示されますが、見づらく扱いづらいので
See the Pen Untitled by AIZAWA (@marumatosb) on CodePen.
のように、HTMLの入れ子構造を分かりやすく記述します。
VS Codeを使用する際は、タグに合わせてインデントを付けてくれる便利な拡張機能があります。
今日の積み上げ
- HTML
- CSS
