IT初心者が書く、IT初心者のためのHTML/CSS基礎
IT初心者がHTMLとCSSの基礎について、書いていきます。
初心者ですので、メモ代わりというのもありますので、温かい目で見守っていただけたらと思います。
間違っている部分がありましたら、ご指摘いただけると幸いです。
まずHTMLとCSSについて書いていきます。
HTMLとは
HyperText Markup Languageの略
「<」と「>」で囲われたタグと呼ばれるもので構成される。
現在、インターネット上で公開されてるウェブページのほとんどは、HTMLで作成されています。
CSSとは
文書の見た目を装飾するための言語である。
文字の大きさや色、配置などをCSSで書き込み、WEBページを見やすくしてくれます。
HTMLでサイトの内容を作り、CSSで見た目を整える感じです。
この２つができれば、一応Webサイトは作れます。
筆者が使用しているテキストエディタは Visual Studio Code です。
テキストエディタのインストールや使い方については他の記事で書きたいと思います。
では、基本的な記述について書いていきます。
まずすべてのwebページで必要となる要素です。
<!DOCTYPE html> ①ドキュメントタイプ宣言
<html lang="ja"> ②htmlタグ(日本語)
<head> ③headタグ
<meta charset="utf-8"> ④metaタグ
<title>ここにwebページのタイトルを入れる</title> ⑤titleタグ
</head>
<body> ⑥bodyタグ
</body>
</html>
①から順に説明します。
①<!DOCTYPE html> ドキュメントタイプ宣言
最新のHTML5のバージョンを指定している。
HTMLを記述する際は、最初にこれを書くと覚えればいい。
②<html>このタグの中にhtmlを記述する</html>
htmlタグはHTMLを記述する範囲を表します。「lang="ja"」は日本語を指定しています。
③<head> </head>
headタグは文章の設定をします。(ヘッダ情報) titleタグやmetaタグはこの中に記述する
④<meta charset="utf-8">
metaタグはさまざまな設定ができます。上記は文字エンコードをcharset属性で指定しています。基本的には「utf-8」で指定しておけばいいでしょう。
文字エンコードってなに？って思った方は興味があれば調べてみてください。
⑤<title>タイトル</title>
titleタグはそのページのタイトルを指定します。
⑥<body> この中にwebページの本体を記述する </body>
bodyタグは文章の本体を記述します。
webページの中身になる部分ですね。
↓ 内容
<title> タイトル </title>
↑ 開始タグ ↑ 終了タグ
この開始タグと終了タグで囲むことで内容を意味付けできます。
終了タグには、タグ名の前にスラッシュ記号が付くので忘れないようにしましょう。
とりあえず最低限のタグだけ今回は紹介しました。
他のタグについてはまた他の記事で書きますので、ご覧ください。
