ホーム > 初心者向きタグ講座

初心者向きタグ講座 カテゴリー

毎日更新しているように見せかける

ホームページを毎日更新するのはかなり辛いものがあります。
しかし、このJavaScriptを使えば毎日更新しているようにできます・・・
が、HTMLを知っているならJavaScriptでやっているのがバレるので、
あからさまな嘘は止めておいた方が良いと思います(^^;

こちらは+時間表示です。

ちなみにこのスクリプトは右クリックでソースを見るとバレてしまうのですが・・・
PHPで完全に書き換えているように見せる事ができますw

date関数を使いパソコンで設定されている西暦、日付、時間まで好きなのを設定できるので、
これを使い毎日更新しているように見せかけますw

一応タグを記載しておきますが、PHPが使えるサーバーじゃないと使えません。

Javascriptでメールフォーム

ホームページ上にアドレスを出していると、よく迷惑メールが届いてしまいます。
それを避けるのに便利なのがメールフォームです。

これもJavascriptで可能なんですが、文字化けなど、ちゃんと届かない…などがよく起こります。
さらに、メーラーを起動させてメールを送る事になりますので色々とご注意が必要です。
レンタルのメールフォームなどを借りるとメーラーを起動させる必要もありませんので、
手軽さを選ぶならレンタルをオススメしてみます。

メールフォーム1

■お名前

■メールアドレス

■ホームページ

■性別


■ご用件内容は?

■ここにメッセージをお願いします



メールフォーム2

名前
タイトル
ホームページ
メール
メッセージ
  

メールフォーム1のタグ

メールフォーム2のタグ

URL表示の所に文字を流す・パスワード

現在ではまったく見られなくなったJavaScriptなのですが、
下の部分のURLを表示される所に文字を流すやつです。

<body onLoad="scll()">にして、<head>内に
<script type="text/javascript">
<!--
var cnt = -2
var speed = 300
var msg = "     ようこそいらっしゃいました!ごゆっくりしてくださいね♪"
timeID=setTimeout('',1)
function scll(){
status = msg.substring(cnt=cnt+2,msg.length+2);
if (cnt>msg.length){cnt=-2};
clearTimeout(timeID);
timeID = setTimeout('scll()',speed);}
//-->
</script>

これもよく見かけますがパスワードを付けるやつです。
■会員専用のページ


この方法では移動先ページの名前(***.html)をパスワードにするのですが、
(秘密のページの名前をhimitsu.htmlにしておくとパスワードがhimitsuになります)
当然indexと入力するとTOPページに移動します(^^;

他の方法もあるんですがソースにパスワードが現われる状態になるので、
この方法がJavascriptの中では1番じゃないかな?と思われます。
しかし、ページがバレると直リンクなどされてもパスワードが掛からないので、
ご注意ください。(あくまでも簡易的パスワードです)

お気に入りボタンと右クリック禁止

まずは定番のJavaScriptから・・・

このお気に入りのボタンはstyleでカスタマイズできます。

<input type="button" value="お気に入りに追加する" onClick="javascript:window.external.AddFavorite('自分のURLを記入','自分のサイトタイトル')" style="border-style:solid; border-width:2px; border-color:#ff0000; background:#ffcccc">

右クリック禁止

このJavaScriptはブラウザによっては右クリック後メニュー出ます(^^;

無断で画像を取られたくない時などに使用しましょう。
しかし、JavaScriptを切られると簡単に右クリックができてしまうので、
その画像をJavaScriptで呼び出す(.js)などにしておいた方が良いと思います。
完全ではありませんがある程度は防げると思います。

右クリック禁止のタグ(警告文)

<script language='JavaScript'>
document.onmousedown=action;function action(){if(event.button>=2)
{alert('右クリック禁止!');return false;}}
</script>

警告文を出したくない場合はbodyタグに↓を付け加えるだけ

<body oncontextmenu="return false">

警告文を出さなくてもいいというならこっちの方が手軽ですね!

JavaScriptを使おう

JavaScriptとはPC側で動かすプログラミング(スプリクト)言語の事です。
ちなみにサーバー側で動かすCGIはほぼPerl(パール)で動かします。
サーバーに負担が掛かりCGIを禁止している所がよくありますが、
JavaScriptは見ている側で動かすので問題はありません。

JavaScriptを使うにあたっての注意点を言うと、
<script type="text/javascript">タグを使う時、
src=で呼び出さない場合、基本的には<head>の中にタグを入れてください。

また、<script>でタグの中身を書く場合は必ず
<!--*****//-->コメントで閉じて、
尚且つ//スラッシュ2本が必要になります。
(.jsで呼び出した場合は逆にエラーになります)

後は、JavaScriptを切っている・切られている状態だと、
表示されない・ボタンが押せないなどの問題が出てきますので注意してください。

簡単にまとめると・・・
■JavaScript
【良い点】  サーバーに負担かけない、動作が速い、ある程度CGIやPHPのマネをできる…
【悪い点】  複雑なプログラムにするとPCがフリーズする、切られていると使えない…

■CGIやPHP
【良い点】  HTMLで出来ない事ができる、自動処理(掲示板、カウンター、検索エンジン等…)
【悪い点】  無料HPではほぼ使えない、負担掛けすぎるとサーバーダウンする、テストが大変…

簡単にまとめましたけど、JavaScriptはかなり使えます!
次のページにタグを書いてあるのでよければ見てくださいね(^^

文字を動かす

携帯サイトとかでよく見ると思いますが、
ハッキリ言ってしまうと目が疲れてしまうので使い過ぎに注意してください(^^;
動く文字
マーキーと読み、結構単純なタグだったりします。

<marquee>動く文字</marquee>

動く文字2

動く文字2(scrolldelay=スクロール時間の指定 direction=スクロール方向の指定)

<marquee scrolldelay="50" direction="right">
動く文字2</marquee>

動く文字3

alternate=端に来たらスクロール またslideにすると端で止まります。

<marquee behavior="alternate" bgcolor="#0000ff><font color="#ffffff"><b>動く文字3</b></font></marquee>

他のタグと組みあわせてさらに装飾してみたり、
またこの文字の部分をimgタグにして画像を動かしたりする事もできます。

影の作り方2

前のページは影を付けるというか立体的にしただけなので、
今度こそ影の付け方を説明致します(^^;

影の枠1
影の枠2
影の枠3

3つほどありますが、
1は普通の影を付けるだけのタイプ。
2は影の部分をグラデーションにしています。(IE専用)
3は全体的ににじませています。(IE専用)
タグはCSSでまとめるのが良いかと思われます(^^;

影の枠1(width:枠の大きさを指定 background-color:影の色 border:枠の太さと色指定)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px;"><div style="width: 100px;border: solid 1px #ff0000;background: #ffffff;position: relative;margin: -10px -10px 10px -10px;padding: 10px;">
影の枠1</div></div>

影の枠2(opacity=グラデーション始まり指定 finishopacity=グラデーション終り指定)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px; filter: alpha(opacity=10,finishopacity=200,style=1"><div style="width: 100px; border: solid 1px #ff0000; background: #ffffff; position: relative;margin: -10px -10px 10px -10px; padding: 10px;">
影の枠2</div></div>

影の枠3(direction=にじませる角度 strength=にじませる強さ)

<div style="width: 100px; background-color: #ff0000; margin: 20px 10px 10px 20px; filter: blur(direction=300,strength=30"><div style="width: 100px; border: solid 1px #ff0000; background: #ffffff; position: relative;margin: -10px -10px 10px -10px; padding: 10px;">
影の枠3</div></div>

説明としましては、
margin(上、右、下、左の順番)で場所をずらしておいて、
positionで相対位置に置くというものです。
ぼかしやグラデーションはfilterを使っています。(IE専用です)

僕でも出来た在宅アルバイト! ←のように文字にも使う事ができます。

影が付く文字(offx=右 offy=下 -(マイナス)指定すると逆になります。)

<table>
<tr><td style="filter:DropShadow(offx=3,offy=3,color=#c0c0c0)">
<font size="5" color="#ff0000"><b>消して文字を入れてください</b></font>
</td>
</tr>
</table>

影の作り方

テーブルタグに影を付けて立体的にする方法の説明です。

普通の枠
←の枠に対して→は立体的に見えますよね?
立体的な枠

立体的な枠のタグは↓

<table bgcolor="#ff0000" style="border-width: 3px; border-style: solid; border-color: #ff0000; border-right-color: #910000; border-bottom-color: #db0000; border-top-color: #ff6060; border-left-color: #ff6060; background-color:#ff0000;">
<tr>
<td>立体的な枠</td>
</tr>
</table>

説明としましては、
border-top-colorで上の色
border-right-colorで右の色
border-left-colorで左の色
border-bottom-colorで下の色
を指定する事によって立体的に見えます。

簡単な事を言ってしまうと絵を描く時に影を付ける感じと同じで部分によって、
暗くしたり明るくしたりとしているだけですw
もっと絵の事に詳しい方だったらもっと上手にできると思いますよ♪

二重線のタグ

では早速完成系を・・・

2重線

タグは↓

<table border="3" cellspacing="3" bordercolor="#ff0000" bgcolor="#ffc0cb">
<tr bgcolor="#ffffff">
<td>2重線</td>
</tr>
</table>

この枠を大きくしたいのであれば、
<table>タグの中にwidth="80%"とかを付け加えると大きくなります。

■商品名 ***テレビ

商品詳細

写真

支払詳細

発送詳細

注意事項

という風なオークション風にする事も出来ます。

また、<td>の中を<td bgcolor="#ff0000>にすると・・・

2重線
これをさらに応用すると→

応用編のタグです↓ちょっと複雑になっています。

<table border="3" cellspacing="3" bordercolor="#ff0000" bgcolor="#ffc0cb">
<tr bgcolor="#ffffff">
<td bgcolor="#ff0000">
<table border="3" cellspacing="3" bordercolor="#ff0000" bgcolor="#ffc0cb">
<tr bgcolor="#ffffff">
<td bgcolor="#ff0000">
<table border="3" cellspacing="3" bordercolor="#ff0000" bgcolor="#ffc0cb">
<tr bgcolor="#ffffff">
<td bgcolor="#ff0000">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

この応用編のタグがどう使えるかというと多分使い所はないんですけどね(笑
ちなみにこのテーブルタグを使って絵を描かれている方もいます。
テーブルアートのページ
※bodercolor属性は一部HTMLのバージョンがサポートされていない場合があります。

タグについての説明

このページではちょっとしたタグの使い方の説明をしています。
内容はどちらかと言うと初心者さん向けです(^^;

タグの簡単な説明をしますと、<font color="#ff0000">~</font>
と、/で終わるのが基本となっていますが、
<br>・<img>などは/は入りません。
理由は閉じる必要がないからです。(HTMLのみ)

使えない文字など

後、全角文字(A・#000000など)は使えません。
エラーなど、ちゃんと表示されていない時は確認してみましょう。
半角であれば大文字、小文字とどちらでも使えます。
A○ a○ A× a×

またスペースを空ける際には全角のスペースは使えません。
タグを書く時点で半角になっていると思いますが、タグが反映されない場合などがあったら
全角スペースを疑ってみるのもいいと思います。

別にDOCTYPE宣言場合

DOCTYPE宣言がXHTMLの場合imgやbr、metaタグまでも閉じなくてはいけません。
<img /> <br />等
またすべてを小文字でのみ定義しなくてはいけない事や
様々な制限も課せられる事になりますので、
ホームページを作った事の無い方でXHTMLから入るよりかは
まずは制約が広い普通のHTMLから入る事をおすすめします。
このページでは普通のHTMLの作成方法だけで説明しています。

また、タグってなんだ?ホームページってどうやって作るんだ?と疑問の方は、
無料ホームページ作成講座をご覧ください(^^

ホーム > 初心者向きタグ講座

検索
当サイト使用のサーバー
サイト情報
メタ情報

▲ページTOPへ