勉強部屋 > Webサイト制作
Webサイト(HTML)のテンプレート
ソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content="サイトの内容を書く"> <meta name="keywords" content="キーワードを入れる"> <link rel="stylesheet" type="text/css" href="cssのリンクを書く"> <title>タイトルを書く</title> </head> <body>本文を書く</body> </html>
仕組み
Webサイトは基本的にコンテンツをHTMLで、デザインをcssで構成している。
Webサイトは一度レイアウトを決めてしまえば使いまわしができる。
cssでデザインを統一してしまえば文章を差し替える際にも楽。
その他にもいろいろあるので重要度でまとめていくと
HTML＞CSS＞画像＞CGI、Javascript、Flash
てな感じですかねぇ作成の手順
まずは、内容を決める
いくつかの塊に分ける
塊を大きな塊にし、レイアウトを決める
それぞれデザインを完成させていく
HTML
まさにWebサイトの主となるもの。
タグを使いこなしてコンテンツをつくっていく。
塊をつくっていく感じでやるといいかも？
フォントやサイズなどはcssを使うこと
CSS
CSSはWebサイトのデザインを決めるもの。
フォントやサイズ、カラーはもちろん塊の位置や背景などにも関わってくる。
スタイルシートは別に作成してHTMLで読み込む方法とHTMLファイルに埋め込むものが主である。
classは同じページで何度も使いたいもの、idは同じページで1回しか使わないものとなっている。
余白にはpaddingとmarginがあるが、しっかりとした使い分けが大切。
paddingは枠の内側の余白で背景が使える。
marginは枠の外側の余白で背景が使えない。
marginは縦方向に限り、重なるmarginを相殺する性質があるので注意が必要（特に<p>には上下にmarginが1emデフォルトである）
paddingはブロック要素の大きさを変えてしまうので注意
下の小さい画像をマウスオーバーすると上の大きい画像に表示されるやつ
方法
大きい画像のimgにnameを設定
小さい画像のimgにonMouseOverを設定し"「name」.src='画像のリンク'"を設定参考
BONNIE GAMES ※音量注意
クリックで画像を入れ替えるやつ
HTML
画像タグにid属性とonClick="関数名"を指定
JavaScriptの読み込みJavaScript
<!-- //画像を配列に格納する var IMG = new Array(); IMG[0] = new Image(); IMG[0].src = "img/画像データ"; IMG[1] = new Image(); IMG[1].src = "img/画像データ"; //画像番号用のグローバル変数 var cnt=0; //画像切り替え関数 function ChangeIMG(){ //画像番号を進める if (cnt == 1) { cnt=0; } else { cnt++; } //画像を切り替える document.getElementById("gazo").src=IMG[cnt].src; } // -->
IEで崩れるレイアウト例
marginのautoが効かない
margin:0 auto;などでセンタリングが適用されないため、ひとつ前の要素にtext-align:center;を入れる必要がある
paddingを使って余白を設定するとレイアウトが崩れる
paddingとwidth/borderを同時に使用していると崩れるため、囲い要素を入れ子にし、外側にwidth、内側にpaddingを適用とする必要がある
inputのsizeでのサイズ変更が適用されない
sizeが適用されないので、CSSでwidth指定する必要がある
参考サイト