スケジュール

どうやって？
HTML基礎知識

HTML
タグについて

どうやって？

制作に使うもの - DreamWeaver HTML CSS PhotoShop

DreamWeaverのプレビューモードについて。

　ドリームウィーバーはプレビューモードでのインタラクティブな編集が可能です。
しかし、プレビューモードは、HTMLの構造をふまえた正確なコーディングをするには向いていません。空タグや、思わぬ不要なコードが残る場合もあります。しかし、プレビューをhtmlのコードのどの部分を変更するかと言うインデックスとして使うなら、htmlをテキストエディターで編集する方法に比べ、簡単にコードの目的の部分にアクセスするのにとても役に立ちます。分割表示を使い、プレビューウィンドウからコードの目的の位置に移動し、ソース表示のウィンドウに作業を移しコードを修正するのがDreamWeaver良いです。

　この授業の最終的な目標はwebサイトを制作することです。

　企画、設計を経てまずは「グラフィックデザイン」を行います。「htmlの作成」にはDreamWeaverを使います。

　グラフィックのデザインにはPhotoshopと、デザインをhtml用のデータにするのにPhotoshopのスライスと言う機能を使います。

　スライスを使う事でPhotoshopでデザインした画面をhtmlでつかう画像に切り出して行く事が出来ます。

　DreamWeaverはWebサイトを構築するソフトです。書いたhtmlをプレビューで確認しながらコーディングを進める事が出来ます。また、ファイル間のリンク等を管理が出来るので、サイトのツリー構造を変更する事が出来ます。

　またテンプレートやライブラリの機能を使って、サイト全体の共通のヘッダやフッタ、メニュー等を一度に管理する事もある程度可能です。作ったファイルをテストサイトで確認したり、本サイトにftpやsshでアップロードする事も出来るため、サイト制作だけでなくサイトの管理にも便利な機能を備えています。

htmlの基本

webページはhtml(ハイパーテキスト・マークアップ・ランゲージ)により記述されています。

ja.wikipedia.org/wiki/HyperText_Markup_Language

htmlはテキストにタグと呼ばれる情報を記述する事で、文書を様々に整形し、画像、動画、音声等のコンテンツを埋め込むことができ、ハイパーリンクと言う機能を使い、別の情報へのアクセスも出来るようになってます。

　タグの基本は開始タグと終了タグで成り立ちます。”<”と”>”で囲まれた文字列を開始タグと言います”</”と”>”で囲まれた文字列を終了タグと言います。またタグは入れ子にする事が出来るためhtml文書を構造的に記述する事が出来ます。

タグの例：

<div>構造タグブロック</div>
<p>テキストタグ：パラグラフ、段落</p>
<span>テキストタグ：スパン、文の範囲</span>
<strong>テキストタグ：強調</strong>
<i>テキストタグ：イタリック、斜体</i>
<title>文書情報：htmlのタイトル</title>
<a href="www.i-elements.net">アンカータグ：ハイパーリンク</a>
<img src="/img/aiueo.jpg" />イメージタグ：画像埋め込み(終了タグ無し)

タグの種類

すべてのタグを一様に分類できるわけではないですが、タグはいくつかの種類に分けて紹介します。
それぞれのタグは見る人に取って意味がある他に、検索エンジン（googleやyahoo等）にも意味があるため、見た目以外にもそれぞれのタグが種類に応じて正しく使われている事は意味があります。

文書情報・構造	<html> <head> <title> <meta> <body> 等タイトルやキーワード、などhtmlの情報やHEADやBODYなどのhtmlの構造を表すタグです。このなかのmetaタグで示されたキーワードやサマリーは検索エンジンに強く影響します。
見出しタグ	<h1> <h2> <h3> <h4>構造タグの一種ですが文書の見出しを定義します。意味の強さによりh1からh4くらいまで使います。検索エンジンに影響します。
レイアウト・段落	<div> <p> <span>文書をブロックで囲み、htmlのbody内でのコンテンツの構造を定義するタグです。 divはタグとしてはあまり意味を持ちませんが、ページのヘッダや、メニューエリア、フッターエリアをブロックするために使われ、デザインな構造を定義する重要なタグです。html5ではそれぞれの構造的な意味に従い新しいタグがもうけられています。
テキストタグ	<strong> <b> <em> <i> <em> <u> <tt> <s>テキストの強調、斜体、下線、水平線等の表示を定義します。検索エンジンにその意味が影響します。
コンテンツタグ	<img> <object> 等イメージ、動画、音声等の埋め込みを行います。
リンクタグ	<a>ハイパーリンクを設定します。文書間のつながりを表す重要なタグです。検索エンジンに影響します。
リストタグ	<ul> <ol> <li>等リストを定義します。ulはリスト要素の先頭をドットや円盤で修飾します。 olはナンバリングを行います。検索エンジンにもリストの意味を付加します。
テーブルタグ	<table> <th> <tr> <td>行と列をもったテーブルを作ります。テーブルヘッドやテーブルフッタは検索エンジンに意味を与えます。

アトリビュート（属性）

タグには属性とその値を設定する事が出来ます。

<a href="http://www.w3schools.com">This is a link</a>

この例ではアンカータグの属性として「href(Hypertext Reference)」とその値として「”http://www.w3schools.com”」というURLが設定されています。タグによって属性と値は各種あります。このように属性は「属性名=”ナントカ”」の形で定義します。

アトリビュートはなるべく使わない？

　属性はタグの種類によって様々ですが、最近はなるべく属性はつけないでスタイルで定義する方向になってきています。属性がhtmlの中で記述されているとhtmlコードがかさばり、コードが複雑になるからです。これは人が読みにくいとう事の他に、検索エンジンのロボットにとっても不都合です。

　作ったサイトが見てもらえるのは何故でしょう？urlを書いたチラシを配ったり、関連する内容のサイトからリンクを張ってもらう事で実現される場合もありますが、実際には検索エンジンがサイトの中身を正しく理解し、情報を求める人に提示してくれるということが大きいはずです。html内にはコンテンツ以外のコードをなるべく入れずに、スタイルシートを使ったデザインの実現が望ましい事の理由の一つです。

　また、アトリビュートで定義された外観は一つ一つ設定しなければ行けません。例えば、３０列のテーブルの右端のセルを色を変えるとしたら30カ所に背景色を設定する必要があります。変更するためには３０回書き直す必要があります。こういう場合クラスで定義されていればスタイルシートの背景色の部分をたった一カ所修正するだけですみます。

　サイト全体で採用されている色やデザインだとしても、同じスタイルシートファイルを読んでいれば、サイト全体の外見も簡単に変更できます。

　アトリビュートの使用は、スタイルでは指定できないリンクのURLや、スタイルを指定するためのクラス名、ID名（セレクタ）等につかうと良いです。

CSSの基本

htmlタグとcss(カスケードスタイルシート)を組み合わせて色々な表現が出来ます。htmlタグは主に文章を構造化したり、タグに囲まれた部分の意味を与えたり、その意味にふさわしい見た目を表現するために使われます。しかし、タグ単体ではきめ細かな見た目をデザインする事が出来ません。例えばdivタグは文章をブロックに分けたり、入れ子にして構造化する事は出来ますが、表示そのものはほとんどコントロールできません。しかしスタイルシートを使う事で、例えば、ページの中の表示位置、上下左右のマージン、テキストのサイズや色、文字スタイル、文字間、行間、背景色、背景画像、画像への回り込み、ブロックの枠線、枠線の色、太さ、角丸の半径など様々な表現を加える事が出来ます。そのような画面のデザインに欠かせない方法がスタイルシートです。

スタイルシートの指定方法

スタイルシートの指定方法は主に3種類あります。

1.インラインスタイル

htmlのタグに直接記述する方法です。定義と表示される場所が近いため手早くスタイルを記述するのに向きます。

<div style="color:#f00;margin:10px;">あいうえお</div>

2.ページ内スタイル

htmlのheadタグ内等にstyleタグとともに記述します。
セレクタと言う方法で、tagそのものを指定したり、idやclassを使って影響箇所を指定します。
これも比較的、定義と表示される場所が近いため手早くスタイルを記述するのに向きます。

<div style="color:#f00;margin:10px;">あいうえお</div>

3.スタイルシートファイル

htmlファイルとは別の拡張子cssのファイルを作成し、そこにスタイルを定義します。
セレクタと言う方法で、tagそのものを指定したり、idやclassを使って影響箇所を指定します。
htmlからはlinkタグや、styleタグのソースファイルとして呼び出します。
ここで定義したスタイルシートはどのhtmlからも参照できるので、サイト全体でのスタイルの統一を図る事も出来ます。

<div style="color:#f00;margin:10px;">あいうえお</div>

　スタイルシートファイルでのスタイルの指定は最も望ましい方法ですが、計画的なスタイルの設計が必要です。ファイルは記述するスタイルの分類により、common.css（スタイル一般）structure.css（文書の構造に関わるスタイル）に分けたりしたりしますが、管理を考えてシンプルにするのが良いです。例えばcommon.css以外は一つのファイルにすると言う思い切った方法もあります。必要以外はなるべく少ない数にまとめるのが良い方法です。

セレクタについて

　タグとcssを関連づける機能をセレクタと言います。タグの属性としてスタイル定義するインラインスタイル以外はこの方法で定義します。

　スタイルを使い、コンテンツの表示をコントロールするためには、タグとCSSが、セレクタを通じてリンクされている必要があります。
セレクタは以下の３種類があります。また、それぞれのセレクタは子孫セレクタ（指定したセレクタの内側）と言う方法で、影響範囲を広くとったり、詳細に指定したりする事も出来ます。

３種類のセレクタ

1.タグを定義	タグそのものをスタイルで定義してしまう方法です。少しおおざっぱな方法ですが、狙いがはっきりしていれば良い方法です。H3以下の見出しやHRを定義する事は多いです。そもそも、それぞれのタグはブラウザごとにデフォルトのスタイルがついているので、まずはそれを統一するため、リセットと言う定義をする場合があります。また、クラスやIDの継承を使って間接的に定義する場合もあります。また”,”を使う事で一つの定義に複数のセレクタを指定する事も出来ます。 h6{ /小さい見出しをフォントサイズ16ピクセルに設定/ font-size:16px; } #center h1{ /IDがcenterの内側のh1を定義子孫セレクタ他の場所のh1はこのスタイルにならない/ text-align:center; font-size:18px; } body,div,ul,li,h1,h2,h3,button { /簡易なリセットの例 ","で複数のタグを指定/ margin:0; padding:0; }
2.クラス(class)	クラスによってスタイルを定義します。複数箇所で同じスタイルを定義する場合使います。クラス名を定義する場合名前の始めに”.”（ドット）をつけます。使うときは必要ありません。クラス属性として定義します。一つのタグに複数のクラスを定義する事も出来ます。 <style> .red{ color:#f00; } .gray{ color:#333; } .small{ font-size:10px; } </style> <body> ハイビスカスの花は<span class="red">赤</span>い。 <span class="small gray">...かもしれない。</span> </body>
3.ID	IDによってスタイルを設定します。一つのIDは一つのページに一ヶ所だけ使います。ヘッダーや大見出し、フッターやメニュー等にも使います。 ID名を定義する場合名前の始めに”#”（シャープ）をつけます。使うときは必要ありません。 <style> #header{ font-size:25px; } #menu ul{ margin:20px 0; } #menu ul li{ display:inline; padding:5px 10px; } </style> <body> <div ID="header">このページのタイトル</div> <ul ID="menu"> <li>トップ</li> <li>このサイトについて</li> <li>アドレス</li> </ul> <div>コンテンツ</div> </body>

1.タグを定義

　タグそのものをスタイルで定義してしまう方法です。少しおおざっぱな方法ですが、狙いがはっきりしていれば良い方法です。H3以下の見出しやHRを定義する事は多いです。そもそも、それぞれのタグはブラウザごとにデフォルトのスタイルがついているので、まずはそれを統一するため、リセットと言う定義をする場合があります。また、クラスやIDの継承を使って間接的に定義する場合もあります。また”,”を使う事で一つの定義に複数のセレクタを指定する事も出来ます。

h6{  /*小さい見出しをフォントサイズ16ピクセルに設定*/
	font-size:16px;
}
#center h1{    /*IDがcenterの内側のh1を定義 子孫セレクタ 他の場所のh1はこのスタイルにならない*/
	text-align:center;
	font-size:18px;
}
body,div,ul,li,h1,h2,h3,button {   /*簡易なリセットの例 ","で複数のタグを指定*/
	margin:0;
	padding:0;
}

2.クラス(class)

　クラスによってスタイルを定義します。複数箇所で同じスタイルを定義する場合使います。
クラス名を定義する場合名前の始めに”.”（ドット）をつけます。使うときは必要ありません。クラス属性として定義します。一つのタグに複数のクラスを定義する事も出来ます。

<style>
.red{
	color:#f00;
}
.gray{
	color:#333;
}
.small{
	font-size:10px;
}
</style>
<body>
ハイビスカスの花は<span class="red">赤</span>い。
<span class="small gray">...かもしれない。</span>
</body>

3.ID

　IDによってスタイルを設定します。一つのIDは一つのページに一ヶ所だけ使います。ヘッダーや大見出し、フッターやメニュー等にも使います。
ID名を定義する場合名前の始めに”#”（シャープ）をつけます。使うときは必要ありません。

<style>
#header{
	font-size:25px;
}
#menu ul{
	margin:20px 0;
}
#menu ul li{
	display:inline;
	padding:5px 10px;
}
</style>

<body>
<div ID="header">このページのタイトル</div>
<ul ID="menu">
	<li>トップ</li>
	<li>このサイトについて</li>
	<li>アドレス</li>
</ul>
<div>コンテンツ</div>
</body>

疑似セレクタについて

　疑似セレクタはセレクタを補助するものです。使用頻度が多いのはAタグの:hoverだと思います。カーソルが対象に重なったときに色や画像を変える事で、操作可能な対象である印象を与える事が出来ます。

疑似セレクタ

:link	訪問してないリンク先
:visited	訪問済みのリンク先
:hover	ホバー(マウスが重なっている場合)
:active	マウスダウン時
:focus	フォーカス時
:lang	特定の言語
:first-child	最初の子要素
:first-line	最初の行
:first-letter	最初の文字
:before	要素の前に要素を追加する（contentプロパティと組み合わせて使用）
:after	要素の後に要素を追加する（contentプロパティと組み合わせて使用）

サンプル

jwu-web.i-elements.net/release/testPseudo.html

リンク

w3cドキュメント（日本語）

www.w3.org/Consortium/Translation/Japanese

Grad3

grad3.ecoloniq.jp

Ultimate CSS Gradient Generator

www.colorzilla.com/gradient-editor/

HTML Tutorial – (HTML5 Compliant)

www.w3schools.com/html/default.asp

HTMLタグリファレンス

www.htmq.com/html/indexm.shtml

スタイルシートリファレンス

www.htmq.com/style/index.shtml

特殊文字

www.htmq.com/text/index.shtml

セレクタ

weboook.blog22.fc2.com/blog-entry-268.html

hp.vector.co.jp/authors/VA022006/css/selector.html

スケジュール