HTML&CSSで、一番初めに頭に入れておく基本。
HTMLの要素、headとbody
Webページを作り出している、htmlファイルの基本。
htmlファイルとは、ファイル名の拡張子が 「.html」で終わるもの。
※拡張子とは、ファイル名の末尾、ピリオド「.」で区切られた文字列（txt, html, zip, gif など）。
htmlファイルのソースコードは、<html>で始まり、</html>で終わります。
<html>タグの中に、<head>タグ、<body>タグがあります。
<html> <head> <title>ここにページのタイトルを入力</title> </head> <body> </body> </html>
<head>セクション
<head>タグの中に書かれた内容は、実際のページには表示されない。ページの設定や、仕様を記述します。
ページのタイトルもここに書きます。
<body>セクション
<body>タグの中には、実際のページに表示する文書や画像のリンクなどを記述します。
<body>の中身は、以下で説明します。
このブログのHTML構成
このブログは、2カラムの構成で作成しています。
<nav>と<footer>に挟まれた部分が、２列構成になっているので２カラム。
<aside>がなくすとシングルカラム、<aside>を２つにすれば３カラムです。
htmlテキストは以下のようになっています。
<body> <header> </header> <nav> </nav> <article> <section> </section> <section> </section> </article> <aside> <section> </section> <section> </section> </aside> </body>
<header>、<footer>
ヘッダーとフッターは、ご存知のとおりページの頭と終わりにくる領域です。
ヘッダーはページのタイトルやトップ画像に使われます。フッターはシンプルなものが多いです。
<nav>
ナビゲーションバー（メニューバー）。
そのサイトのメニューで、メニューバーから見たい内容のページに進みます。必須ではないですが、ユーザーの利便性のためにほとんどのサイトに設置されています。サイドにあることも。
<article>
<article>は、それだけで内容が完結する一つのかたまり。
ページのメイン部分にあたります。ブログだと、メインの記事を書いていく場所です。
1ページにいくつあってもOK。
<aside>
<aside>は、サイドバーに使われます。
メインコンテンツにあたらない部分で、どのページにも共通の固定サイドバーを設定することも多いです。
<section>
<section>は、章や節の役割で、<article>や<aside>の中に記述されます。
使い勝手が良く、内容の区切りとして使われます。
各<section>の中には、見出し（h1～h6）要素を入れます。
HTMLソースの見方
ウェブページのHTMLソースは、簡単に確認することができます。
いつも見ているブラウザページで右クリックをして、ページのソースを表示（windowsだとCTRL + U、macの場合はコマンド + U）と進むだけです。
そうするとそのページが、どのようなhtmlの構成でできているのか見ることができます。
実は何とでも書ける
今回紹介したのは、webページ構成の一例です。
実は、この通りに書かなくても、webページは書いたとおりに表示されます。
これらの要素は、レイアウトのために使うのではなく、内容にそって使うことが大事なようです。
コメント