HTMLの学習 初歩の初歩『HTMLを書く下準備』
【こちらの記事は、約8分程でお読みいただけます】
金曜日のブログ担当になりました、インターン生の村田菜摘です。
最近暑さが増して寝苦しくなってきましたね。すっかり寝不足で夏バテ気味です。やる気が起きなくて家でダラダラとホラー映像ばかりみてはヒンヤリしています（笑）
皆さんも夏バテ、熱中症には気を付けてくださいね。
今まで２回、自己紹介やインターンシップでの活動について書いてきましたので、今回からはHTMLの書き方を紹介していこうと思います。
私自身まだまだ初心者ですが、このブログを読んでくださる方とHTMLについて一緒に学んでいきたいと思います。
HTMLを書く際の５つの準備
前回の記事でテキストエディタの紹介をしました。（詳しくはこちらの記事をご覧ください。）
今回からはテキストエディタを使って実際にHTMLを書く紹介をしたいと思います。
記入する順番に上から説明していきます。
１, ドキュメントタイプ宣言をする。
HTMLを書く際に先ず始めにこのページがHTMLで構成されていると宣言する必要があります。これをドキュメントタイプ宣言といいます。HTML5の場合は<!DOCTYPE html>と記入します。これでこのページはHTML5で記述されているという指定が出来たということになります。
２, 言語を指定する。
<html lang=”ja”>で日本語の指定がされます。（ちなみに英語の場合はen）
言語の指定をしないと日本語での表示がされなくなり、文字化けの原因に繋がります。
３, headとbodyについて。
HTMLを書く際、head内にCSSを設定、body内にHTMLを設定します。
４, 文字コードの設定をする。
文字コードはhead内に書きます。
文字コードの設定をしないと文字化けの原因に繋がります。文字コードには色々種類がありますが、一般的なのはUTF-8になります。
５, タイトルをつける。
ページのタイトルを設定します。ページタイトルはwebページを検索した際に表示される重要な道標になるので必ず設定しましょう。
ここまでの流れを実際に書いてみるとこうなります。
<!DOCTYPE html> ←ドキュメント宣言 <html lang="ja"> ←言語の指定 <head> <meta charset="UTF-8"> ←文字コードの指定 <title>タイトル</title> ここにCSSの設定 </head> <body> ここにHTMLの設定 </body> </html>
HTMLを書く上での準備作業はこれで終わりです。ここまでできたらようやくページを作っていく作業になります。
保存方法
これは私もはじめよく分からなくて戸惑いました。
テキストエディタでHTMLやCSSを書いたとしても、そのままファイル名をつけて保存してしまえばメモ帳に書くのと変わりません。
そこでHTMLファイルを保存する時、「ファイル名.html」と記入します。これでこのファイルはHTMLファイルとなりました。
CSSの場合も同様に「ファイル名.css」と記入します。
※Windowsの場合、拡張子が非表示になっている場合が多いです。HTMLを書く場合拡張子は重要になってくるので、拡張子を表示に設定することを推奨します。
外部CSS化
先ほど紹介した書き方は、HTMLとCSSを１つのファイル内に記入するやり方です。
今後サイトを作っていく上で、HTMLとCSSを一緒に記入すると、情報量が増えてきてややこしくなってきます。なのでCSSを外部化するのが一般的なやり方となります。
CSSの外部化は新規作成でそのままCSSを記入することで出来ます。
しかしこのままでは、HTMLへ反映されません。その為、HTMLファイルにCSSファイルをリンクさせなければなりません。
<link rel=”stylesheet” href=”ファイル名.css” type=”text.css”>をhead内に記入します。
実際に書くとこうなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="ファイル名.css" type="text.css"> <title>タイトル</title> ここにCSSの設定 </head> <body> ここにHTMLの設定 </body> </html>
ファイリング
外部CSS化が出来たら、「ファイル名.html」と「ファイル名.css」の２つのデータが出来ると思います。このままではせっかく書いたCSSへのリンクタグが意味を成しません。
なので、HTMLとCSS、２つのデータを１つのファイルにいれてあげましょう。
これでやっと、CSSがHTML上に反映されます。
これでHTMLを書く際の下準備は終了です。
次回のブログではテーブルタグについて紹介したいと思っています。
