「html5+css3で基本的なページをつくってみよう！①」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
HTML5+CSS3を使って実際にページの構成などを考えてみましょう。
こういったページを作成します。
#image(center,width=600px,図3.png)
まずスタイルシートを読み込ませたHTML文書がWEB上でどのように表示されるかを確認するために必要な事を書きます。ブラウザは単にWEBページを閲覧するためだけにあるのではなく、一種のエクスプローラのような役割をはたしてくれます。URLを記述する欄にfile:///からはじめて表示させたいファイルが自分のパソコン内(ローカルホスト)のどこに存在するのかを簡単な決まりのもとに書き示していきます。
例えば、
file:///C:/○○/index.html
という風に記述します。
するとCドライブ内の○○というドキュメントに保存されているindex.htmlというファイルを表示させる事ができます。
これを使って自分がhtmlに記述した事が正しくブラウザ上で表示されているかを確認できるようになります。
それでは実際に簡単なhtmlを書いてみましょう。
まず、htmlの最も基本となる部分、
<!DOCTYPE "html">
<html lang="ja">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
まず、この部分がheadと呼ばれるそのページに関する情報を書き入れる部分です。~
一行目でhtml文書である事を宣言し日本語が中心となっているページであることを二行目であらわし、三行目でスタイルシートを読み込ませています。link relタグはほとんどスタイルシートを読み込ませる場合にのみ使用します。~
hrefの部分はパソコン内の読み込ませたいファイル名(css)を書き込みます。~
head部分は四行目から七行目まで。~
五行目は文字コードを表し(今ではutf-8が標準的とされています)、六行目でタイトルを表している。
次にhtmlのbody部分を記述していきます。
<body>
<div id="page">
<header>ヘッダー</header>
<nav>ナビ</nav>
<div id="main"><p>aaaaaaaaaa<br>aaaaaaaaaa</p></div>
<div id="sub"><p>eeeeeeeeeeeeeee</p></div>
<footer><p>paper</p></footer>
</div>
</body>
div id部分にはpage以外にwrapperなどが代表的なものとして挙げられます。~
headerとはナビゲーションやイントロダクションを支援する部分であり、本来はh1~h6を入れたり、hgroupを入れたりするプロパティですが、必要に応じて画像なども入れる事が可能です。~
因みにheader要素は同じページ内に何度使ってよい。~
navは本来ただ単に文章を書き入れるためのものではなく、ulやliなどと用いてページのナヴィゲーションを作る部分です。しかしながらここではナビと書いておくだけにします。~
更にdivisionでメイン、サブと名前を付けてブロックを様々に区切っていく事ができます。~
フッタは一般的には誰がそのページを書いたのか、著作権情報、関連情報などを書いていくプロパティである。~
最後にdiv page、bodyを終了させ、そのあとに</html>を付け加えて終了する。~
次はCSSについて書いていきます。~
続きは以下のページで解説しています。~
[[html5+css3で基本的なページをつくってみよう！②]]~
~
~
以上
HTML5+CSS3を使って実際にページの構成などを考えてみましょう。
こういったページを作成します。
#image(center,width=600px,図3.png)
まずスタイルシートを読み込ませたHTML文書がWEB上でどのように表示されるかを確認するために必要な事を書きます。ブラウザは単にWEBページを閲覧するためだけにあるのではなく、一種のエクスプローラのような役割をはたしてくれます。URLを記述する欄にhttp://からはじめて表示させたいファイルが自分のパソコン内(ローカルホスト)のどこに存在するのかを簡単な決まりのもとに書き示していきます。
例えば、
http://localhost/page/index.html
という風に記述します。
するとCドライブ内の○○というドキュメントに保存されているindex.htmlというファイルを表示させる事ができます。
これを使って自分がhtmlに記述した事が正しくブラウザ上で表示されているかを確認できるようになります。
それでは実際に簡単なhtmlを書いてみましょう。
まず、htmlの最も基本となる部分、
<!DOCTYPE "html">
<html lang="ja">
<link rel="stylesheet" href="style.css">
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
まず、この部分がheadと呼ばれるそのページに関する情報を書き入れる部分です。~
一行目でhtml文書である事を宣言し日本語が中心となっているページであることを二行目であらわし、三行目でスタイルシートを読み込ませています。link relタグはほとんどスタイルシートを読み込ませる場合にのみ使用します。~
hrefの部分はパソコン内の読み込ませたいファイル名(css)を書き込みます。~
head部分は四行目から七行目まで。~
五行目は文字コードを表し(今ではutf-8が標準的とされています)、六行目でタイトルを表している。
次にhtmlのbody部分を記述していきます。
<body>
<div id="page">
<header>ヘッダー</header>
<nav>ナビ</nav>
<div id="main"><p>aaaaaaaaaa<br>aaaaaaaaaa</p></div>
<div id="sub"><p>eeeeeeeeeeeeeee</p></div>
<footer><p>paper</p></footer>
</div>
</body>
div id部分にはpage以外にwrapperなどが代表的なものとして挙げられます。~
headerとはナビゲーションやイントロダクションを支援する部分であり、本来はh1~h6を入れたり、hgroupを入れたりするプロパティですが、必要に応じて画像なども入れる事が可能です。~
因みにheader要素は同じページ内に何度使ってよい。~
navは本来ただ単に文章を書き入れるためのものではなく、ulやliなどと用いてページのナヴィゲーションを作る部分です。しかしながらここではナビと書いておくだけにします。~
更にdivisionでメイン、サブと名前を付けてブロックを様々に区切っていく事ができます。~
フッタは一般的には誰がそのページを書いたのか、著作権情報、関連情報などを書いていくプロパティである。~
最後にdiv page、bodyを終了させ、そのあとに</html>を付け加えて終了する。~
次はCSSについて書いていきます。~
続きは以下のページで解説しています。~
[[html5+css3で基本的なページをつくってみよう！②]]~
~
~
以上
