1.ペ−ジ内で位置に名前をつけてそこにリンクする。
<A name="(位置の名前）">○○見出し文字○○</A> ペ−ジ内で位置に名前ついている所にリンクする。違うペ−ジ内の場合は htmlファイル名を先につけて#をつけ位置の名前をかけば良い。 <A href="#(位置の名前）">○○リンク文字○○</A>
2.外部stylesheetの読み込み HEAD内に記述
<LINK rel="stylesheet" type="text/css" href="ファイル名">
3.NAVIMENU STYLE
<style type="text/css"> div.navi { background-color: green; padding: 3px; font-size: 80%; } div.navi a { color: white; text-decoration: none; border-right: 1px #ccffcc solid; padding: 0px 0.3em; } </style> HTML部分 <div class="navi"> <a href="〜">HOME</a> <a href="〜">About</a> <a href="〜">フォーラム</a> <a href="〜">ライブラリ</a> <a href="〜">チャット</a> <a href="〜">リンク</a> </div>
4.DANGUMI STYLE
<style type="text/css"> div.blocka { float: left; width: 200px; } div.blockc { clear: both; } div.blockd { float: left; width: 15%; } div.blockf { clear: both; } </style> STYLESHEET部分 実際に使用する <style type="text/css"> div.blocka { float: left; width: 200px; } div.blockb { margin-left: 200px; } div.blockc { clear: both; } div.blockd { float: left; width: 15%; } div.blocke { margin-left: 15%; } div.blockf { clear: both; } </style> HTML部分 <div class="blocka"> ロゴ </div> <div class="blockb"> 案内・検索窓 </div> <div class="blockc"> ナビゲーション </div> <div class="blockd"> メニュー </div> <div class="blocke"> 本文 </div> <div class="blockf"> 著作権表示 </div>
5.段組で背景色を切れない様にする
STYLE 指定 <style type="text/css"> div.cover { background-color: #ffffcc; } div.blocka { float: left; width: 200px; } div.blockb { margin-left: 200px; } div.blockc { clear: both; } div.blockd { float: left; width: 15%; background-color: #ccffcc; } div.blocke { margin-left: 15%; } div.blockf { clear: both; } div.clear { clear: both; } </style> HTML部分 <div class="blocka"> ロゴ </div> <div class="blockb"> 案内・検索窓 </div> <div class="blockc"> ナビゲーション </div> <div class="cover"> <div class="blockd"> 長いメニュー </div> <div class="blocke"> 短い本文 </div> <div class="clear"></div> </div> <div class="blockf"> 著作権表示 </div>
6.画像イメ−ジが大きく画面をはみだしてしまう場合
スクロ−ルバ−が表示される STYLESHEET div.largeimage { width: 100%; overflow: auto; } HTML部分 <div class="largeimage"> <img src="big.jpg" width="640" height="200" alt="大きな写真"> </div>
7.画像の下にコメントを表示する場合(CAPTION)
テ−ブルタグで対応しても良い STYLESHEET <style type="text/css"> div.imagebox { float: right; font-size: 80%; color: gray; } </style> HTML部分 <div class="imagebox"> <img src="cat.jpg" width="168" height="135" alt="猫"><br> うちの猫です！<br> </div>
8.テ−ブルをインラインフレ−ムで表示して、スクロ−ルバ−を表示させる
<div style="height:150px;width:650px;overflow-y:scroll;" align="center">
9.HEADの間にSCRIPTをかいてパスワ−ドでそのペ−ジにジャンプさせる 。
パスワ−ド入力画面が別画面で表示される。 <SCRIPT language="JavaScript"> <!-- For browsers that don't interpret JavaScript function getPassword() { pw = prompt("パスワードを入力してください：","") if(pw) { location = pw + ".html" } else { alert("パスワードが入力されていません") } } // end of JavaScript --> </SCRIPT>
10.更新情報等コメント欄の作成
<div style="WIDTH: 508px; HEIGHT: 107px"><!--↓一番外側の枠--><!--↓立体感を出すために、右下ボーダーを濃い色に、左上ボーダーを薄い色に設定--><!--↓のbackground-colorで枠の色を、paddingで枠の太さを設定--> <div style="BORDER-RIGHT: #9696ff 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #ececff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 4px; BORDER-LEFT: #ececff 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #9696ff 1px solid; BACKGROUND-COLOR: #d6d6ff; TEXT-ALIGN: center" align="center">-更新情報-</div><!--↓上のと反対に右下と左上の枠色を設定--><!--↓内容を書く場所の背景色と余白を設定--> <div style="BORDER-RIGHT: #7171ff 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #7171ff 1px solid; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; BORDER-LEFT: #7171ff 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #7171ff 1px solid; BACKGROUND-COLOR: #ffffff" align="left">平成18年2月10日に双日100株を680円で追加購入しました。<br> 平成18年1月31日に日産自100株を1,323円で購入しました。<br> </div> </div> </div>
11.リスト番号をつけて表示する。
左寄せで表示するにはテ−ブルタグを使用する。 <ol> <li>卵を卵白と卵黄に分けます。</li> <li>小麦粉をふるいにかけます。</li> <li>卵黄に分量の砂糖の1/3を加え、白っぽくなるまで混ぜ合わせます。</li> </ol>
12.DLタグでフォ−トギャラリ−を作成する。
STYLE-SHEET /*widthは並べたい枚数にあわせて調整*/ #gallery{ width:495px; background-color:#ffffff; } /*widthは写真の大きさにあわせて調整 font-sizeは固定した方が良い*/ dl{ margin:0px; margin-right:3px; margin-bottom:1em; padding:0px; float:left; width:160px; font-size:14px; border-width:1px 1px 0px; border-style:solid; border-color:#7F2D00; } dt{ margin:0px; padding:0px; } dd{ margin:0px; padding:4px 0.5em; border-color::#7F2D00; border-bottom:1px solid; } /*heightは行数＋αにしておく。 コメントの文字数はあらかじめ決めておきましょう。*/ dd.name{ height:2.2em; } dd.comment{ height:3.4em; background-color:#f6eec9; } dd.date{ height:1.2em; } HTML部分 <div id="gallery"> <dl> <dt><img src="略" alt="0" width="160" height="120"></dt> <dd class="name">Annie Earle</dd> <dd class="comment">昨年の猛暑の生き残り</dd> <dd class="date">4月26日</dd> </dl> <dl> <dt><img src="略" alt="1" width="160" height="120"></dt> <dd class="name">Swanley Yelow</dd> <dd class="comment">暑さに強い、大きく垂れ下がり、形を整えにくい</dd> <dd class="date">4月26日</dd> </dl> <dl> <dt><img src="略" alt="2" width="160" height="120"></dt> <dd class="name">ｳｲﾝﾁｬｲﾑ・ﾎﾜｲﾄ＆ﾎﾜｲﾄ</dd> <dd class="comment">サカタ新品種</dd> <dd class="date">5月4日</dd> </dl> 以下並べたい枚数の分だけDLが続く </div>
13.テ−ブル横1行に背景色をつける
<table> <tr><td> ... </td></tr> <tr><td> ... </td></tr> <tr style="backgroud-color:pink"><td> ... </td></tr> <tr><td> ... </td></tr> </table>
14.文字の下に背景色をつける。蛍光ペン効果
<style type="text/css"> span.yellow { background-color: #ffff55; } span.lime { background-color: #55ff55; } span.blue { background-color: #55ffff; } span.orange { background-color: #ffcc55; } span.red { background-color: #ff5555; } </style>
15.蛍光ペンの幅を広げる
<style type="text/css"> span.wideyellow { background-color: #ffff55; padding: 0.3em 0px; } </style> HTML部分見本 このように、<span class="yellow">いろいろな色</span>を用意することも、 <span class="lime">とても簡単に</span>実現可能です。 でも、 <span class="blue">あまり多すぎると</span>、逆に <span class="orange"> 見にくく</span>なってしまいますから 、 <span class="red">注意</span>して下さい。
16.戻る・更新・進む・トップペ−ジへ移動ボタンを作る
<INPUT type="button" value="戻る" onClick="history.back()"> <INPUT type="button" value="更新" onClick="location.reload()"> <INPUT type="button" value="進む" onClick="history.forward()"> <INPUT type="button" value="トップページへ移動" onClick="location.href='http://iswebmag.hp.infoseek.co.jp/'">
17.リンクの説明を表示する
<A href="http://www.infoseek.co.jp/" title="Webを検索するなら、やっぱりココ！ 各種サービスも満載です！"> ・infoseek</A> <BR> <A href="http://isweb.www.infoseek.co.jp/" title="50MBの無料HPスペース！ オリジナルCGIも利用できます！">・isweb</A> <BR> <A href="http://iswebmag.hp.infoseek.co.jp/" title="ホームページの作成に行き詰ったときは、ここを参考にしよう！">・ 魅せるホームページ作成講座</A> <BR>
18.インラインフレームに名前を付ける
タ−ゲットとしてリンク先をインラインフレーム内に表示できるようになります。 <HTML> <HEAD> <TITLE>初めてのホームページ作成</TITLE> </HEAD> <BODY> このページではインラインフレームを活用しています。<BR> 以下のリンクをクリックすると、そのサイトがインラインフレーム内に表示されます。<BR> <BR> <A href="site01.html" target="iframe1">・サイト1</A><BR> <A href="site02.html" target="iframe1">・サイト2</A><BR> <A href="site03.html" target="iframe1">・サイト3</A><BR> <BR> <IFRAME src="site01.html" name="iframe1" width="600" height="400"></IFRAME> </BODY> </HTML>
19.インラインフレームを利用
ホームページを作成するには、IFRAMEタグを使用し、フレーム内に表示する内容を別のHTMLファイルで用意する必要があります。しかし、CSSのoverflowを使うと、これを1つのHTMLファイルで実現可能となります。なかなかユニークな手法なので、ぜひとも試してみてください。 <HTML> <HEAD> <TITLE>魅せるホームページ作成講座</TITLE> </HEAD> <BODY> <H1>使えるリンク集</H1> <DIV style="width:600px; height:300px; border:solid 2px #999999; overflow:scroll; padding:10px;"> <A href="http://www.infoseek.co.jp/"> <IMG src="infoseek.jpg" align="left" hspace="10">Infoseek</A><BR> ホームページの検索はもちろん、役立つ情報や無料サービスも満載の『Infoseek』。インターネットの拠点として活用できます。 <BR clear="left"> <BR> <BR> <A href="http://www.rakuten.co.jp/"> <IMG src="rakuten.jpg" align="left" hspace="10">楽天市場</A><BR> ネットショッピングをするなら、やっぱり『楽天』。日本最大級のショッピングモールだけあって、商品数は膨大！ 信頼性も抜群です。 <BR clear="left"> <BR> <BR><A href="http://tv.www.infoseek.co.jp/"> <IMG src="tv.jpg" align="left" hspace="10">Infoseek TV番組表</A><BR> 「何か面白そうな番組はないかな〜」という場合にも使えるTV番組表。1週間＋1日の番組表が掲載されているので新聞よりも便利です。 <BR clear="left"> <BR> <BR><A href="http://tenki.www.infoseek.co.jp/"> <IMG src="tenki.jpg" align="left" hspace="10">Infoseek 天気</A><BR> お出かけする前は、天気予報のチェックも大切。『Infoseek』 なら24時間いつでも天気予報を見ることができます。 <BR clear="left"> </DIV> <BR> ※このページはIFRAMEタグを利用せずに作成されています。 </BODY> </HTML> IFRAMEの枠線をいれる場合は1、無しの場合は0 scrolling="yes、no、autoのいずれか"スクロ−ルボタンの有り無し <HTML> <HEAD> <TITLE>サンプル</TITLE> </HEAD> <BODY> <H5>frameborder="1"の場合</H5> <IFRAME src="i.htm" frameborder="1" width="200" height="100"></IFRAME> <H5>frameborder="0"の場合</H5> <IFRAME src="i.htm" frameborder="0" width="200" height="100"></IFRAME> </BODY> </HTML>
20.背景画像を横に繰り返し貼り付ける
<HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css"> <!-- BODY {background-image:url("dog.gif"); background-repeat:repeat-x; } P { margin-top:25px; } --> </STYLE> </HEAD> <BODY> 横方向だけ、画像が貼り付けられます。 </BODY> </HTML>
21.背景画像を縦に繰り返し貼り付ける
<HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css"> <!-- BODY {background-image:url("dog.gif"); background-repeat:repeat-y; } P { margin-left:25px; } --> </STYLE> </HEAD> <BODY> 縦方向だけ、画像が貼り付けられます。 </BODY> </HTML>
22.背景画像を全体に繰り返し貼り付ける
<HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css"> <!-- BODY {background-image:url("dog.gif"); background-repeat:repeat; } --> </STYLE> </HEAD> <BODY> 画面全体に、画像が貼り付けられます。 </BODY> </HTML>
23.背景画像を固定する
<HTML> <HEAD> <TITLE>サンプル</TITLE> <STYLE type="text/css"> <!-- BODY { background-image:url(block.gif); background-attachment:fixed;} --> </STYLE> </HEAD> <BODY> BODY内の記入は、省略します。 </BODY> </HTML>
24.リンクしている文字の背景色が変化
リンクの貼った文字にカーソルが触れると、 指定された色に背景色が変化します。 <style type="text/css"> <!-- a:link {text-decoration:none;color:blue;} a:visited {text-decoration:none;color:blue;} a:active {text-decoration:none;color:navy} a:hover {text-decoration:none;background-color:#ccccff;} --> </style>
25.リンクに触れたらコメントを出す
<a href="http://masaboo.cside.com/" title="ホームに戻ります">home</a>
26.グラデーションなテーブルです。
<table style="background-color:#ddddff" cellpadding="0" width="150" height="70"> <tr> <td> <table style="background-color:#8b9aff" cellpadding="0" width="100%" height="100%"> <tr> <td> <table style="background-color:#3957ff" cellpadding="5" width="100%" height="100%"> <tr> <td style="background-color:#ffffff;font-size:8pt;color:black"> ここに内容を記入します。 </td> </tr></table></td></tr></table></td></tr></table>
27.テ−ブル内にコメントを入れる上枠はグラデーション
<table width="200" height="100" cellspacing="0" cellpadding="2" style="border:1px solid #8597fb;"> <tr height="20"> <td style="background-color:#adb9fb;font-size:8pt;color:#001277;filter: alpha(opacity=100,finishopacity=25,style=1,startx=100,finishy=5);"> <b>★管理人からのメッセージ</b> </td> </tr> <tr> <td style="font-size:8pt;padding:5px;"> ここに内容を記入します。 </td> </tr> </table>
28.メッセージボード下から上に文字がスクロ−ル
更新履歴とか案内に使える<table border="1" width="155" height="75" style="background-color:orange;font-size:8pt;"> <tr> <td style="color:white;background-color:green;"> <marquee direction="up" width="150" height="70" scrollamount="1"> <center>◎更新履歴◎</center><br> １月１日 リンクに１件追加<br> １月２日 チャットを設置<br> １月３日 日記を始めました。<br> </marquee> </td> </tr> </table>
29.簡単パスワ−ドペ−ジの作成(1)
<A HREF="JavaScript:pass=prompt('パスワードを入...','****'); if(pass !='1234'){alert('パスワードが違...');}else{location.href='test.html';}"> 会員専用入り口 </A>
30.簡単パスワ−ドペ−ジの作成(2)
ボタンによる認証 test.html … パスワードが一致した時の移動先のアドレスを記入 会員専用入り口 … リンクの文章を記入 1234 … パスワードを記入 パスワードを入... … パスワードを入力する時に出る文章を記入 **** … パスワードに初めから記入される言葉を記入 パスワードが違... … パスワードが違った時の文章を記入 <FORM NAME="ok"> <INPUT TYPE=TEXT NAME="pass"> <INPUT TYPE=BUTTON VALUE="認証" ONCLICK="if(document.ok.pass.value !='1234') {alert('パスワードが違...');}else{location.href='test.html';}"> </FORM> test.html … パスワードが一致した時の移動先のアドレスを記入 認証 … ボタンに表示される文字を記入 1234 … パスワードを記入 パスワードが違... … パスワードが違った時の文章を記入
31.強烈なパスワ−ドによる移動先の指定(1)
ソ−スを見てもパスワ−ドは分からない。JAVASCRIPTによる <A HREF="JavaScript:var pass=prompt('パスワードを入...','****');if(pass) {location.href= pass+'.html';}"> 会員専用入り口 </A> html … 移動先のページの拡張子を記入 会員専用入り口 … リンクの文章を記入 パスワードを入... … パスワードを入力する時に出る文章を記入 **** … パスワードに初めから記入される言葉を記入
32.強烈なパスワ−ドによる移動先の指定(2)
ソ−スを見てもパスワ−ドは分からない。 ボタンによる認証FORMで指定 <FORM NAME="ok"> <INPUT TYPE=TEXT NAME="pass"> <INPUT TYPE=BUTTON VALUE="認証" ONCLICK="location.href=document.ok.pass.value+'.html';"> </FORM> .html … 移動先のページの拡張子を記入 認証 … ボタンに表示される文字を記入