HTML＋CSS！ Webページ基本要素。

HTML＋CSSの基本を覚えるにあたり、実際にサイトを作ってみる事はとても大事です。

しかし、いざ作ろうと思うとどこから作ればいいか分からない！
と言う方は多いのではないでしょうか。

今回はそんな方向けへコーディングしやすくする為に、
要素ごとに分けてコーディングする方法を紹介します。

————————————————

（目次）

■ レイアウトを考える

■ <head >基本を書き込む

■ <body>基本を書き込む

　□ヘッダー

　□メインコンテンツ

　□フッター

■ CSSでレイアウト

■ まとめ

————————————————

■ レイアウトを考える

HTMLでサイトをコーディングする前に、全体のレイアウトのイメージを考えます。

こうする事で、◯◯と▲▲は同じデザインが使えるからまとめて書く。
などコードをきれいに書く事ができ、尚且つ時間短縮にも繋がります。

コーディングを始める時は、全体像をある程度掴んでから始める事をオススメします。

■ <head >基本を書き込む

全体構造が掴めたら、早速HTMLでコードを書いていきましょう。
まず初めは、ロボットが読む<head>の中身から書いていきましょう。

（内容の意味）

meta charset ：文字コードの設定。「UTF-8」でOK。

title ； Webページのタイトル。ブラウザーのタブ等に表示される。

meta name=”description” …：Webページの紹介文,Webサイト検索結果の下の欄に表示される。

link rel =“stylesheet” href=“style.css” : 外部のファイルを読み込む。

■ <body>基本を書き込む

ロボットが読む<head>の中身が書けたら、次は<body>の中身を書いていきましょう。
実際にページに記載される部分になりますので、ブラウザーで確認しながら書いていきましょう。

□ヘッダー
□メインコンテンツ
□フッター

について

Webページでは大きく『ヘッダー』『メインコンテンツ』『フッター』の３つに分ける事ができます。
この３つに分けた要素を基にHTML・CSSでコーディングをして、サイトを作っていきます。

エディターで書くとこのようにグループ分けできます。

■ CSSでレイアウト

style.cssで要素ごとに色づけしました。

ブラウザで表示する

■ まとめ

HTML・CSSでコーディングする際は、今回のように要素別にしてから書く事をオススメします。
今回はまだ３つの一番大きな要素に分けて軸を作っただけなので、まだ書きづらいと思います。

次回はもっと小さく要素を分類して、より書きやすいレイアウトを作っていきましょう。