ywork2020.com

Title

基本的なHTML要素の構成

目次 (INDEX)

HTML要素の基本構成

このページでは、作成されたテキストがHTML文書であるとブラウザに伝えるための基本的な要素とページ表示に使われる構成を作るための要素のみを紹介しています。

<body> ~ </body> の要素内に書かれた内容がブラウザに表示され、ユーザーが閲覧する部分になります。

body 要素の外に記述された要素らはブラウザ上には表示されず、 主としてブラウザに対して基本情報を提供するための要素となります。

また、<head> ~ </head> 要素内にある <style> ~ </style> 要素はデザイン ( CSS ) を記述するために使われ、 <body> ~ </body> 要素内にある <script> ~ </script> 要素は動的なプログラムを記述するために使います。

このページで取り上げている要素らは、筆者が考える単純、かつ最小限の要素であり、基本だと思っている構成です。

目次に戻る

HTML要素の基本構成 サンプルコード

ここでは、HTMLドキュメントを作成する上で基本となる最小限の要素群、 または必要となるであろう要素群を 2つのサンプルコードとして掲載しています。

これは、筆者が考えた構成なので、絶対ではありませんが、ページデザインとプログラムのことを考えた上での構成となります。

サンプルコード: CSS とスクリプトをドキュメントの内部で記述する 
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>ここにタイトルを記述する</title>
		<style>
			ここにスタイルシートを記述する
		</style>
	</head>
	<body>
		<header>
			ここにヘッダーコンテンツを記述する
		</header>
		<main>
			ここにメインコンテンツを記述する
		</main>
		<footer>
			ここにフッターコンテンツを記述する
		</footer>
		<script>
			ここにスクリプトを記述する
		</script>
	</body>
</html>
サンプルコード: CSS とスクリプトを外部ファイルから読み込む 
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>ここにタイトルを記述する</title>
		<link rel="stylesheet" type="text/css" href="CSSファイル.css">
	</head>
	<body>
		<header>
			ここにヘッダーコンテンツを記述する
		</header>
		<main>
			ここにメインコンテンツを記述する
		</main>
		<footer>
			ここにフッターコンテンツ記述する
		</footer>
		<script src="外部JavaScriptファイル.js"></script>
	</body>
</html>

目次に戻る

CSS に関しての link 要素と style 要素の配置について

デザインを設定するための style 要素や CSS の外部ファイルへの link 要素は head 要素の中に書きます。

このページのサンプルコードでは style 要素を使った例と link 要素を使った例を別々に紹介しましたが、 実際には、この 2つの方法を併用することが殆どだと思います。

どちらの要素が先になっても構いませんが、記述されたスタイルのコードは上の行から順番に読み込まれていきます。 もしも、後に書いたコードに、以前と同じセレクターで、同じプロパティがあれば、設定は上書きされます。

つまり、 style 要素の後に link 要素 を記述して外部 CSS ファイルを読み込んだ場合、外部ファイルの設定で上書きされます。

逆に外部 CSS ファイルを link 要素で読み込んだ後に style 要素 を記述した場合は、style 要素の記述内容で設定が上書きされます。

ただし、前述していますが、同じセレクターの同じプロパティがあれば上書きされるだけなので全てのスタイルに影響がある訳ではありません。

また、セレクターにはレベルが存在し、重複しても上書きされないものもあります。例えば 「id セレクターで設定したスタイルは 要素セレクターでは上書きされない」などがありますが、 このページでの説明の趣旨とは異なるので割愛させていただきます。

目次に戻る

script 要素の配置について

script 要素は html 要素の中 ( html タグで内包されている場所 ) であればどこに記述しても構いません。

しかし、コードは上の行から下の行に向かって順番に読み込まれていくという性質があるので、 script 要素を配置する際はプログラムが読み込まれる順番や動きを考慮しなければいけません。

javascript でプログラムを書くときは HTML 文書内に配置された要素の id 属性値や name 属性値を参照することも少なくありません。 javascript になれていない方がプログラムを記述した場合、要素が形成される前に プログラムで、それを参照しようとして、エラーになったりして困惑することもあるでしょう。 初めのうちは body 要素内の一番最後に script 要素を配置することをおすすめします。 具体的にいうと </body> タグの前行に script 要素を配置するということになります。

また、別の方法として全ての script 要素を head 要素の中に記述する方法もあります。

これは script 要素が head 要素の中に全てまとめてあることで、一目でプログラム群を管理しやすいという利点があります。

具体的な方法を簡単にいうと、プログラムの記述にイベントを登録するコードを記述し、イベントに関数をアタッチする必要があります。

これは javascript のイベントリスナーを使い、ドキュメントの読込みが完了した時に実行されるイベントを登録する方法です。 javascript には登録できる色々なイベントがあるので、どれが最良とは言えませんが、利用頻度が高そうなものを 2つ 下記に紹介しておきます。

サンプルコード: DOMツリーの構築が完了した時点で実行されるスクリプト 
document.addEventListener("DOMContentLoaded",function(){
	任意のスクリプトコード;
},false);
サンプルコード: DOMツリーの構築が完了した後、画像などの読込みも全て完了した時点で実行されるスクリプト 
window.addEventListener("load", function(){
	任意のスクリプトコード;
},false);

目次に戻る

まとめ

  1. HTML 文書の中で CSS と JavaScript の記述ができる
  2. CSS と JavaScript は 別のファイルから読み込むことができる
  3. JavaScript のイベントリスナーを使えば script 要素を head 要素内で、まとめて管理できる

目次に戻る