この記事では、htmlの基本構造について説明をしていきます。
1.htmlについて
1-1.htmlの大まかな構造
htmlの全体的なおおまかな土台は、
- HTML5文書の宣言
- headタグー文字コードを指定するmetaタグ等を入れる
- htmlタグ
- bodyタグーサイトの中身を入れる
…となります。HTML5を使うためには、以上の要素を必ず使う必要があります。基本的な書き方は以下になります。
<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<body>
</body>
</html>
1-2.htmlの大まかな構造の各内容
<!doctype html>
→DOCTYPE宣言。先頭で、まずドキュメントタイプを宣言します。
この文章がどのHTMLで書かれているかを示します。
この場合、html5であることを示しています。
<html lang=”ja”>
<html>〜</html > の中身にHTML要素が入ります。
lang=”ja”とは、日本語に対応した言語のHTMLファイルの意味を示します。
<head>
<head>〜</head> ヘッダ情報を入れます。
「metaタグ」「titleタグ」「cssファイル」「scriptファイル」などを入れます。
ブラウザでの指示内容を記述していく場所で、この中に書いたものはブラウザには表示されません。
<body>
<body> 〜 </body>HTML文書の本文を示します。実際にブラウザに表示する内容を入れる場所になります。
1-3.HTMLタグの書き方
HTMLタグは基本的に、のようにペアで使います。その中に入れ込みたい内容を挟むようにします。ただし、<br>のように単独で使用する場合もあります。
2. head要素について
2-1.<head>タグ内の一般的な記述
head内に入れていく具体的な構造は以下の通りです。
<head><meta charset="utf-8"><title>ページのタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの説明"><linkrel="stylesheet"href="css/style.css"><scriptsrc="/js/script.js">< /script></head>
2-2.head内の各タグの説明
<metacharset="utf-8">
文字コードがUTF-8で書かれたものであることを示しています。
HTMLではUTF-8を使用することが推奨されています。
<title>
ページのタイトルを入れます。
<metaname="viewport"content="width=device-width, initial-scale=1.0">
レスポンシブのための、 ビューポート(表示領域)の設定です。
<metaname="description"content="ページの説明">
ページの説明を入れます。
<linkrel="stylesheet"href="/css/style.css">
スタイルシートを読み込みます。
<scriptsrc="/js/script.js">
javascriptのデータを読み込みます。
3.body要素について
body内に入れていく具体的な構造は以下の通りです。
3-1.<body>内の具体的な構成
更にbody内の具体的な構成を見ていきましょう。<body>～</body>要素内にWebページとして閲覧者に向けられる内容を記述します。一般的な構成としては以下の通りです。
<header>
ヘッダーであることを示します。ページのヘッダーにはロゴや
グローバルナビゲーション(メニュー)など
主にWebサイト内で共通のパーツが入ります。
<main>
ページ内のメインコンテンツとなるエリアです。
<aside>
一般的にサイドバーと呼ばれてるエリア。バナー広告、関連記事、補足情報、サイドバーのカテゴリ一覧などを入れるエリアです。
<footer>
サイトマップやコピーライトの情報などを入れるエリアになります。
ヘッダーと同じように共通のパーツが入ったりします。
3-2.<header>要素について
<header></hader>の間には、「ロゴ」や「サイトのメインタイトル」、「ナビゲーション（目次）」、「検索フォーム」など関連する内容を記述します。
※なお、<head>とは別なので、混同しないようにしましょう。
3-3.<main>タグ内の一般的な記述
main内に入れていく具体的な構造は以下の通りです。
<main>
<h1 class=”red”>見出しです。</h1>
<p>デフォルトの本文です。</p>
<p class=”text”>classの指定をした本文です。</p>
</main>
main内に入れていく具体的な構造は以下の通りです。
<h1>
そのページの中でもっと大きな見出し、または、最重要な部分につけるタグです。
h1～h6まであります。
<p>
段落を指定するためのタグで、通常の文章と同じく文章のひとかたまりを表します。
4.CSSの基本
4-1.CSSタグの書き方
CSSの具体的な書き方は以下の通りです。HTMLの文章を15pxにしたい場合の指定の仕方です。
HTML側
<p>タグのfont-sizeを15pxにする</p>
CSS側
p{font-size:15px;}
4-2.CSSの基本
セレクタの種類
★要素セレクタ
p{color:#000}
タグ名がセレクタとなるパターンです。この場合、全ての<p>に #000 を適用します。
★子孫セレクタ
main p{color:#000}
この場合、mainタグの中の<p>に #000 を適用します。
指定箇所を限定できます。
★複数セレクタ
h1,h2{color:#000}
h1とh2タグ（複数）に共通の指定をしたい時等、カンマで区切ります。
★class/idセレクタ
p.text{color:#000}
p#text{color:#000}
もしくは
.text{color:#000}
#text{color:#000}
クラス名には、.ドットをIDには#をつけます。
★属性セレクタ
input［type=“text”］{color:#000}
特定の属性を持つ指定要素を対象にスタイルを適用します。
フォームのデザインでよく使われるセレクタです。
4-3.idとclassの違いについて
id とclassの違いと使い分けについて説明します。
HTML側
id：ひとつのidはページ内で1度しか使えなません。また、1要素に複数のidはつけられません。
class：ひとつのページ内で同じclassをいくつでも使えます。
また1要素に複数のclassをつける事ができます。
CSS側
●id属性の場合、属性値(名前)の前に「#」をつけます。
●class属性の場合、属性値(名前)の前に「.」をつけます。
4-4.cssの特性
cssは上から順番に読み込まれていくため、値が違う記述を下方の方で行うと上書きされてしまいます。
この特性を生かしてcssの上方には全体の指定を書いて、下方には例外の部分指定のスタイルを書くような形になります。
CSSの書き方の例
HYML側
<main>
<h1 class=”red”>見出しです。</h1>
<p>デフォルトの本文です。</p>
<p class=”text”>classの指定をした本文です。</p>
</main>
CSS 側
body {
font-size: 14px;
line-height: 2em;
}
h1{
font-size: 25px;
}
.text {
font-size: 12px;
}
.red{
color:#FF0000;
font-weight:bold;
}