2009-04-05

検索上位にさせる為の疑問

今日の授業の最後の話を聞いて、タイトルを変えてみました。検索してもすぐには反映されないのか、前のタイトルで検索するとまだ出てきます。

なぜ先生のjimdoの「講師日和」は検索上位になるのか？とても不思議でした。私もjimdoを使って友達の美容室のサイト「eileset」を作り始めたのですが、タイトルに「お店の名前　南行徳店」＋ユニークな名前をつけた方が上位になるのでしょうか？

あと、「WEBデザインの勉強」を真似して「南行徳の美容院」で上位にできるか試したのですが検索されないのはこのキーワードでは難しいのでしょうか？

2009-04-04

イメージマップ

イメージマップとは、1つの画像の中に複数のリンク先を指定する事ができます。地図などによく使用されています。
ここまでやってみて、要素に対して「id名」をつける事やCSSを指定したらどう変わるか、理解できるようになってきました。

2009-04-02

DreamweaverでCSSの設定

今日はclearfixの前までやりました。思ったより時間がかかったけど、どんどん出来て行くので楽しくできました。
　　　　

2009-04-01

DreamweaverでHTMLの要素を挿入

Dreamweaverのメニューから作業をした事がなかったので、タグ打ちした方が早いのではないかなと思いました。でも今回使ってみて、基本が勉強出来て良かったと思います。

2009-03-25

インラインフレーム

インラインフレームとは文書の中の一部分に、外部のページを読み込みます。フレームは検索でページの中身だけ検索されて戻れないので、内部にページを持たせるようにします。divで囲み、幅と高さをCSSで設定してスクロールできるようにします。

HTML

<div id="iflame">
<dl>
<dt>2007.08.25</dt>
<dd> 9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</dd>
<dt>2007.08.25</dt>
<dd> 9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</dd>
<dt>2007.08.25</dt>
<dd> 9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</dd>
<dt>2007.08.25</dt>
<dd> 9/1（土）17：00より世界中から集めたCG映像作品上映会を開催します。</dd>
<dt>2007.07.07</dt>
<dd>8/25（土）よりHOLLYWOOD CAFEがオープンいたします。</dd>
</dl>
</div>

#iflame {
	height: 160px;
	width: 500px;
	overflow: auto;
}
#iflame dt {
	float: left;
}
#iflame dd {
	margin: 0 0 1em 5em;
}

2009-03-22

WEBデザイン授業11日目

テーブル

罫線を繋げて見せる

table{
border-collapse:collapse;
border-width:1px;
}
　　　　

セルとセルの間を空ける(セットで記述)

table{
border-collapse:separate;
border-spacing:1px;
}
　　　　

HTML

/*テーブルの練習*/
table#table3{
width: 500px;
border-collapse:collapse;/*罫線を繋げて見せる*/
border-spacing:5px;/*外枠を太く*/
border-width:5px;/*必須*/
border-style:solid;
border-color:#000000;
background-color:#FFFFFF;
}
table#table3 td{
background-color:#CCFF99;
border-width:1px;/*必須*/
border-style:solid;
border-color:#000000;
background-color:#FFFFFF;
}
#table3 td.width1{
width:200px;
empty-cells:hide;/*IE6では見えないので使用しない*/
}
#table3 th{
background:#FFFF66;
border-width:1px;/*必須*/
border-style:solid;
border-color:#000000;
}
#table3 caption{
caption-side:top;/*topが初期設定 bottomはIEでは効かない*/
text-align:left;
}

お問い合わせフォーム

<label> はフォームの中で、フォーム部品とラベルを関係付けるために使用します。

「label」はラジオボタンと「メール」に関連付けををさせます。メールの文字ををクリックした時でもラジオボタンにチェックできます。

<input name="contact" id="contact" type="radio"　value="メール" /><label for="contact">メール</label>
name属性（旧ブラウザ対応）とid属性の値は同じにします。

<form id="form2" name="form2" method="post" action="xxxxx.php">
<table cellpadding="0" cellspacing="0" width="884" border="1" summary="お問い合わせフォーム">
<caption>お問い合わせフォーム</caption>
<tr>
<th width="305">お問い合わせ内容</th>
<td width="573"><select name="subject" id="subject">
<option value="選択してください" selected="selected">選択してください</option>
<option value="予約について" selected="selected">予約について</option>
<option value="メニューについて" selected="selected">メニューについて</option>
</select></td>
</tr>
<tr>
<th><label for="name">お名前</label></th>
<td>
<input type="text" name="name" id="name" value="" size="20" /></td>
</tr>
<tr>
<th><label for="tel">電話番号</label></th>
<td>
<input type="text" name="tel" id="tel" value="" size="20" /></td>
</tr>
<tr>
<th><label for="mail">メールアドレス</label></th>
<td>
<input type="text" name="mail" id="mail" value="" size="20" /></td>
</tr>
<tr>
<th><label for="cibtact">ご連絡方法</label></th>
<td>
<input name="contact" type="radio" id="contact1" value="メール" /><label for="contact1">メール</label>
<input name="contact" type="radio" id="contact2" value="電話"/><label for="contact2">電話</label></td>
</tr>
<tr>
<th>当店を何でお知りになりましたか</th>
<td>
<input type="checkbox" name="magazine" id="magazine" value="雑誌" />
<label for="magazine">雑誌</label>
<input type="checkbox" name="web" id="web" value="ホームページ" />
<label for="web">ホームページ</label>
<input type="checkbox" name="friend" id="friend" value="友人・知人" />
<label for="friend">友人・知人</label>
<input type="checkbox" name="signboard" id="signboard" value="看板" />
<label for="signboard">看板</label>
<input type="checkbox" name="etc" id="etc" value="その他" />
<label for="etc">その他</label></td>
</tr>
<tr>
<th><label for="free">自由記入欄</label></th>
<td>
<textarea name="free" id="free" cols="25" rows="5"></textarea>
※ご予約の場合は、希望日時をご記入ください。</td>
</tr>
</table>
<input type="submit" name="submit" id="submit1" value="送信" />
<input type="reset" name="Submit2" id="submit2" value="リセット" />
</form>

2009-03-16

WEBデザイン授業10日目

今回の授業内容をまとめました。

ブランディングのない会社、個人の会社のロゴは<h1>にしても検索されにくい。サービス内容を入れた方が良い。
代替テキストを指定すべきもの、押させる画像（ナビ）はimg要素で入れます。幅、高さは必須。（早く表示される）
文字と写真の意味が同じ内容は1つの段落にまとめます。2つの段落に分けないようにします。<p><img src=" " /></p>
「div」だらけにしない。大枠だけ箱を作り、中は要素に対して「id」や「class」をつけます。

floatの使い方について

float を指定したボックスには width を指定すること。
float を指定した場合、paddingに注意します。
2カラムの場合、情報の優先順位が優先されるのはcontentになります。そのブロックを「右」に配置する設定に「float：right」を使います。
「sideNav」と「content」この２つのブロックが左右に浮き上がっている状態（浮動状態）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Layout01</title>
<link href="style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="container">
<div id="header">
<h1>Layout Technique 01</h1>
</div>
<div id="wrapper">
<div id="content">id "contentv" の内容がここに入りますid "contentv" の内容がここに入りますid "contentv" の内容がここに入ります</div>
<div id="sideNav">id "sideNav" の内容がここに入ります</div>
</div>
<div id="footer">id "footer" の内容がここに入ります</div>
</div>
</body>
</html>

@charset_"Shift_JIS";

html,body,div,h1{/*リセット*/
	margin:0;
	padding:0;
}
body{
	text-align:center;/*全体をセンター　IE6以前の対策*/
}
#container{
	height:600px;
	width:800px;
	margin:0 auto;
	text-align:left;/*全体をセンター　IE6以前の対策*/
}
#header {
	height: 120px;/*内容に合わせて可変する為のheight 普通は指定しない*/
	width: 800px;
	background:#CCFF99;
}
#wrapper{
	height:400px;
	width:800px;
}
#content{
	height:400px;
	width:550px;
	float:right;
	background:#FF9999;
	padding:30px;
	margin-left:30px;
}
#sideNav{
	height:400px;
	width:160px;
	float:left;
	background:#99FFFF;
}
#footer{
	height:80px;
	width: 800px;
	clear:both;
	background:#FFFF66;
}