logo

HPの作成方法　>>　このページ

JavaScript/StyleSheet

  1. 自動デイト記入方法

  2. リンクで色を変える記述

  3. 現在日時を表示する

  4. 文字の背景色を変える

  5. フォントサイズ、行間を指定

  6. フレームの中に別のページを表示する方法

  7. リンクにマウスを置くとタイトルの表示

  8. ネット上からダウンロードさせる方法

  9. ウインドウを閉じる

  10. 情報をテキストエリアに表示する

  11. HTML validator の　記述方法

  12. ボタンを表示しクリックで画像を拡大する

  13. ボタンを表示しクリックで閉じる

  14. クリックで小窓を開く

  15. プルダウンメニュー

 

1.　自動デイト記入方法

自動デイト記入方法

<font size="-1" color="#ff0099">☆ 自動デイト取得 ：<csobj format="LongDate" h="13" locale="00000411" region="0" t="DateTime" w="88">2008年9月9日</csobj> Since Aug. 2007　</font>　　

　　ここに自動でデイトを取得する　　　1　

☆ 自動デイト取得 ： 2008年9月9日 Since Aug. 2007　


２.　リンクで色を変える記述

リンクで色を変える記述
  HEAD の中に記述する

link リンクの文字色 #0000ff
active 現在見ているページ #ff0000
visited 既に訪問したページ #0000ff
hover カーソルをポイントした時の色 #ff0000

 

 

このページは下記のように記述しています

<STYLE type="text/css">
<!--
A:link {color:#0000ff;text-decoration : underline;}
A:active{color:#ff0000;text-decoration : underline;}
A:visited{color:#0000ff;text-decoration : underline;}
A:hover {color:#ff0000;text-decoration : underline;background-color: #00ff00;}
-->
</STYLE>

色の変化を確認　　下記のリンクをクリックして確認できます

　Home へ　もどる

３.　現在日時を表示する

①　<head>   </head> に　記述
<head>

<!--時刻を表示する記述ここから　　body onload="jikoku()" と　form と連携//-->

<script type="text/javascript">
<!--
function jikoku() {
dd = new Date();
document.F1.T1.value = dd.toLocaleString();
window.setTimeout("jikoku()", 1000);
}
// -->
</script>
<!--時刻を表示する記述ここまで　　body onload="jikoku()" と　form と連携//-->

</head>

② <body>  </body>に　記述
<body>
<body onload="jikoku();">

③
表示したい位置に
<!--時刻を表示する記述ここから　　body onload="jikoku()" と　form と連携//-->

<form name="F1" action="#">
	<input type="text" name="T1" size=50>
	</form>
<!--時刻を表示する記述ここまで　//-->

このように表示されます

このようにも

日を取得し表示する方法

<script language="javascript">
<!--
mydate=new Date();
ye=mydate.getFullYear()+"年";
mo=mydate.getMonth()+1+"月";
da=mydate.getDate()+"日";
day=mydate.getDay();
day2=new Array(7);
day2[0]="日";day2[1]="月";day2[2]="火";
day2[3]="水";day2[4]="木";day2[5]="金";
day2[6]="土";
document.write("<font style='font-size : 16px; color : #666666'>");
document.write("今日は"+ye+mo+da+"("+day2[day]+") ");
document.write("です</font>");
//-->
</script>

４.　文字の背景色を変える

記述方法

<td>
<!--バックの色を変えるここから-->
<DIV id="aaa" style="background-Color:#ffffff;font-size:16px;" onmouseover="aaa.style.background='#90ee90'" onmouseout="aaa.style.background='#ffffff'"><A href="sample2.html">サンプル２</A></DIV>
<!--バックの色を変えるここまで-->
</td>

<TD>
<!--バックの色を変えるここから-->
<DIV id="bbb" style="background-Color:#ffcccc;font-size:16px;" onmouseover="bbb.style.background='#33cccc'" onmouseout="bbb.style.background='#ffcccc'"><A href="sample3.html">サンプル３</A></DIV>
<!--バックの色を変えるここまで-->
</TD>

　色の変化を確認　　下記のリンクにマウスを置いて確認できます

リンクあり

記述方法

<TD>　リンクなし<BR>
<!--バックの色を変えるここから-->
<DIV id="ccc" style="background-Color:#99ff00;font-size:16px;" onmouseover="ccc.style.background='#ffcc00'" onmouseout="ccc.style.background='#99ff00'">この文字列の背景がマウスを置くと変化します</DIV>
<!--バックの色を変えるここまで-->
</td>

色の変化を確認　　下記の文字にマウスを置いて確認できます
リンクなし

この文字列の背景がマウスを置くと変化します

６.　フレームの中に別のページを表示する方法

iframeの例：600 x 500のフレームに　「ページ」　を表示させる
　
<BODY>
iframeの記述方法
フレームの中に別のページを表示する方法　　（例　－－　ＰＣ教室の部屋　を表示します）
<TABLE style="border-color :green;" border="2">
<TBODY>
<TR>
<TD align="center" width="590" height="490">
<iframe src="http://tomapc.web.fc2.com/" width=590" height="490" scrolling="yes" frameborder="1" style="border-color : lime></iframe>
</TD>
</TR>

</TBODY>
</TABLE>

</BODY>

このように表示されます
横600縦500ピクセルの欄の中に590x490のiflameを表示
　

７.　リンクにマウスを置くとタイトルの表示

<PRE id="line256">&lt;<SPAN class="start-tag">p</SPAN>
&gt;&lt;<SPAN class="start-tag">a</SPAN>
<SPAN class="attribute-name"> href</SPAN>=
<SPAN class="attribute-value">"index.html" </SPAN>
<SPAN class="attribute-name">title</SPAN>=
<SPAN class="attribute-value">"カテゴリーのトップへ移動します"</SPAN>
&gt;サンプルリンク&lt;/<SPAN class="end-tag">a</SPAN>
&gt;&lt;/<SPAN class="end-tag">p</SPAN>&gt;
    
</PRE>

マウスをサンプルリンクへ置いてみましょう。
"カテゴリーのトップへ移動します"と表示が出ます。

サンプルリンク

８.ネット上からダウンロードさせる方法？


***.lzhというファイルなら，同じフォルダに置いて，
   <a href="***.lzh">ダウンロード ***.lzh (120KB)</a>  などと記述します。

９.ウインドウを閉じる

１０.　FORM

<FORM>
<TEXTAREA rows="5" cols="40" name="新着情報">
sample_page001を更新しました。
sample_page002をＵＰいました。
</TEXTAREA>
</FORM>

１１．HTML validator の　記述方法

<a href="http://validator.w3.org/check?uri=referer">
<img border="0" src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01!" height="31" width="88"></a>
<a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.oninet.ne.jp">
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!"></a>

１２　ボタンを表示しクリックで画像を拡大する

<form>
<p align="center"><input type="button" value="拡大"
onclick="window.open('sample.html','','top=10,width=800,height=600')" >
</p>
</form>

１３　ボタンを表示しクリックで閉じる

<form>
<p align="center"><input type="button" value="このページを閉じる"
onclick="window.close()"></p>
</form>

１４　クリックで小窓を開く

あらかじめ　sample2_test.html　（別窓用ページ）　を作っておきます　

<a href="sample2_test.html" onclick="window.open(this.href, 'komado', 'width=400, height=300, menubar=no, toolbar=no,status=yes,scrollbars=yes'); return false;">クリックで別窓を開きます</a>

クリックで別窓を開きます

15　プルダウンメニュー

<script language="javascript">
<!--
function goToUrl(obj) {
url = obj.options[obj.selectedIndex].value;
if(url != "") { location.href = url;}
}
//-->
</script>
<form method="post">
<select onChange="goToUrl(this)">
<option value="">▽クリックして選択
<option value="http://www.yahoo.co.jp/" >Yahoo!
<option value="http://xxxxxxx/" >XXX
<option value="http://yyyyyy/" >YYY
</select>
</form>

 

HPの作成方法　>>　このページ