最終訂正日 平成20年2月27日
作成者 H.K.
このページは初心者用です。
ホームページをつくる（１）
最低限覚えておくべきＨＴＭＬのタグ
○ 初心者は、一からＷｅｂページを作成するのでなく、作りたいページに似ているＷｅｂページのソースをダウンロードし、修正して作っていくのが普通でしょうが、最低限、下記のタグの使い方は覚えてゆくと良いでしょう。
参考になるＷｅｂサイト
ごく簡単なHTMLの説明 |
Ｗｉｋｉｐｅｄｉａ「ＨＴＭＬ要素」 |
ホームページ作成の第一歩 |
|
要素がＡＢＣ順で見られます。また、用途別のリンクもあります。 |
超初心者のためのホームページ作成講座 |
ゼロから始めよう！ホームページ作成ガイド |
|
最短コース／普通コース／じっくりコース |
ホームページ作成ＮＡＶＩ |
パソコン初心者コース |
シンプレスト |
FrontPage Expressでホームページをつくろう！ |
JavaScript & DHTML Sample |
|
JavaScript & DHTMLのサンプル集 |
ＨＴＭＬクイックリファレンス |
|
ＨＴＭＬタグリファレンス、スタイルシートリファレンス、WEBカラーリファレンス、 |
参考図書 |
「できる大事典 ＨＴＭＬ＆ＣＳＳ」
インプレスジャパン
入門者の道標
○コンテンツを公開するＷｅｂサーバーとドメイン名、サーバーへのファイル転送（ＦＴＰ）などが必要となります。
Ｗｅｂページは表が基本
・一般的な文書では表を使わないで、h1〜h6の「見出しタグ」と本文だけでも表現できますが、間隔が開いてしまい、見栄えのないものになってしまいます。
・表のタグを上手に使うと体裁のよいページが作れます。
リンクを作成する
�� ページ内にリンクを作成する
・「ａ要素」を使います。
・<a name="文字列">〜</a>でリンク先の文字列を指定します。
例 <a name="L1">リンク先</a>
・リンク元に、リンク先の文字列の前に＃を指定した\<a href="#文字列">〜</a>を埋め込みます。
�� リンク先のＵＲＬを指定する
・ <a href="ＵＲＬ">〜</a>でリンク先を指定します。
アドレスを指定する
・リンクや画像の保存場所などをしてする場合、直接ＵＲＬを記述する方法と想定的な位置を指定する場合があります。
・リンクや画像の保存場所などをしてする場合、直接ＵＲＬを記述する方法と想定的な位置を指定する場合があります。
�� 直接ＵＲＬを指定する（絶対ＵＲＬ）
http://172.29.64.109/xoops/modules/pico2/content/20071110_01.htmlのように、ＵＲＬを直接記述します。
�� 相対的な位置を指定する（相対ＵＲＬ）
現在の場所からの相対的な位置を指定します。
FrontPage の絶対ＵＲＬと相対ＵＲＬ |
ホームページの作り方ＨＰ 相対アドレスと絶対アドレス |
ＣＳＳを使う
ＣＳＳとは
・Cascading Style Sheets(CSS、段階スタイルシート、カスケーディング・スタイル・シート、カスケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3Cによる勧告の一つ。文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。
・CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。
・ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアごとに表示を変化させることができる
・ユーザーエージェント（多くの場合Webブラウザ）、ウェブサイト制作者、ユーザがそれぞれ定義した CSS のもたらす効果を重ね合わせ（カスケード）ることができる
・しかし、拡張・修正の続いている CSS 仕様の全てを完全に実装しているユーザエージェントは事実上皆無といってよく、実際シェアで多数を占めるユーザエージェントは部分対応にすぎない。しかし実用上支障のないレベルの実装はされてきており、なおかつ表現のお互いの互換性についても考慮されてきている。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
フリー百科事典『ウィキペディア（Wikipedia）』
ＣＳＳを記述する
・ここでは CSS Level 2 について説明する。CSS の文法は異なるレベル間でも後方互換性を持つように設計されており、例えば CSS Level 1 で書かれたスタイルシートを CSS Level 2 として扱う事も可能である（但し一部に解釈の相違などに伴う非互換部分も存在する）。CSS では要素にスタイルを与えるため、次のような仕様が定められている。
以下の CSS 断片を例にとる。
p#id { color : #ff3300 }
-
"{" から "}" までの部分を宣言ブロックという
-
"p#id" をセレクタ（選択子）といい、スタイルが適用される対象をしめす
-
宣言ブロックとセレクタを合わせて規則集合という
-
"color : #ff3300" 部分を宣言という 宣言の内、":" より前（上例では "color"）をプロパティ（特性）という
-
宣言の内、":" より後（上例では "#ff3300"）を値という
・上例の CSS 断片を適用すると宣言している文書のうち、セレクタが指定しているものと一致する部位（HTML 文書においては要素、要素の親子関係、特定のクラス、ID など）に、宣言ブロック内の宣言が適用される。宣言は、「プロパティ:値」か、「空（何も記述しない）」のどちらかで構成され、プロパティ、":"、値の前後には空白文字（スペース、タブ、改行など）を自由に入れられ、また";"で区切ることにより宣言を並べて書くことができる。
・上例は HTML 文書に適用する場合、「id という ID を持った p 要素の文字色を赤FF(=255)、緑33(=51)、青0にせよ」という指定を意味する。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
シネマ１９８７>ホームページ実用小技集>スタイルシート基礎講座
このページで使用してしているＣＳＳの例
/* ページの基本デザイン用CSS */
body {
background-color: #FFFEED;
color: #666666;
}
h1 {
border:solid #006F93 1.0pt;
mso-border-alt:solid #006F93 .5pt;
mso-border-left-alt:solid #006F93 15pt;
background:#000066;
padding:8pt 0mm 0mm 0pt;
height:48pt;
width:600pt;
font-size:36pt;
font-family:"ＭＳ Ｐゴシック";
color:#ffffff;
text-align:center;
}
h2 {
background:#CCFF99;
width:580pt;
height:32pt;
padding:7pt 0mm 0mm 20pt;
font-size:20pt;
border:solid #006633 1.0pt;
font-family:"ＭＳ Ｐゴシック";
color:#444444
}
h3 {
border:solid #006F93 1.0pt;
border-left:solid #006F93 15pt;
mso-border-alt:solid #006F93 .5pt;
mso-border-left-alt:solid #006F93 15pt;
background:#F2F2F2;
padding:6pt 0mm 0mm 5pt;
height:20pt;
width:589pt;
font-size:12pt;
font-family:"ＭＳ Ｐゴシック";
color:#00789F
}
h4 {
border:solid #a7a7a7 1.0pt;
border-left:solid #ff0000 3pt;
mso-border-alt:solid #a7a7a7 .5pt;
mso-border-left-alt:solid #a7a7a7 4pt;
background:#FaFaFa;
padding:2pt 0mm 0mm 20pt;
height:16pt;
width:580pt;
text-align:left
font-size:10.5pt;
font-family:"ＭＳ Ｐゴシック";
color:#5a5a5a
}
p {
font-size: 10.5pt;
line-height: 115%;
}
address {
font-family: "Times New Roman", Times, serif;
font-size: 80%;
font-style: normal;
text-align:center;
border-top: dashed 1px #663300;
padding-top: 5px;
margin-top: 15px;
clear: both;
}
p img {
float: left;
margin-right:5px;
border: solid 1px #666666;
}
a {
color: #666666;
text-decoration: none;
font-weight: bold;
}
h1 a {
color: #01A252; }
ＣＳＳを指定する
<LINK href="ＵＲＬ" rel="stylesheet" type="text/css">により、ＣＳＳを指定します。
スタイルシートをＨＴＭＬドキュメントに記述する
□サーバーにファイルをアップしたり、更新したりするために、ＦＴＰクライアントが必要となる。
「ホームページ・ビルダー」にあるＦＴＰ機能は自由度が低いので、「窓の杜」にあるＦＴＰクライアントソフトを使用すると良い。
「ＦＦＦＴＰ」「UTF-8 TeraTerm Pro」など
<style type="text/css">
h1 {
font-size:24pt; フォントのサイズ指定
color: blue; フォントの色指定
background-color: yellow; 背景色の指定
}
</style>
スタイルシートで指定したｈ１エレメント
ＨＴＭＬタグのＳＴＹＬＥアトリビュートでスタイルを直接記述する
タグの中に直接スタイルを指定することもできます
インラインで指定したｈ１エレメント
<H1 style="font-size:30pt;color: red;background-color: yellow; text-align: center; ">インラインでスタイルを記述する</H1>
インラインでスタイルを記述する