HTMLのちょい技

ここではHTMLのちょっとしたテクニック(我流または邪道なものもあります)を紹介します。基本的なHTMLの知識を持っていることを前提にしていますので、知識のない方はHTMLのハンドブックなどを見ながら読んで下さい。

※対応ブラウザーの表記
 Internet ExplorerInternet Explorer  Mozilla FirefoxMozilla Firefox  Google ChromeGoogle Chrome  SafariSafari  OperaOpera



インターネットエクスプローラでブリンク(点滅文字)
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

BLINKのタグ(点滅文字)は、FireFoxしか対応していません(2013年7月12日現在)が、MARQUEEのタグ(スクロール文字)を応用することで点滅するように見せることができます。

表示例

 ブリンクもどき

記述例

<MARQUEE SCROLLDELAY="300" SCROLLAMOUNT="100" WIDTH="100"> ブリンクもどき</MARQUEE>

備考

SCROLLAMOUNTとWIDTHの値は同じにし、文字列の長さに合わせて決めます。ご自分でちょうどいい値を探して下さい。
SCROLLDELAYの値を変えることによって、点滅の速さを変えることができます。

↑先頭に戻る

フォントを指定する
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

表示される文字は、通常ブラウザーで設定されているフォント(字体)で表示されますが、そのフォントを指定する方法があります。この機能を使うと画像を使わなくてもおしゃれなホームページを作ることができますよ。

表示例

Welcome to My Homepage!

※この例では分かりやすくするためにBタグと併用して太字にしてます。

記述例

<FONT FACE="Comic Sans MS,Times New Roman,ARIAL">Welcome to My Homepage!</FONT>

備考

face属性でフォントを指定します。カンマ( , )で区切って複数のフォントを指定することもできます。これによって最初のフォントがなかった場合には2番目に指定したフォントが表示されるというようになります。

↑先頭に戻る

フォントとフォントサイズを指定する+文字に背景色を付ける
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

上記の「フォントを指定する」とは違うタグでフォントを指定します。これを使うとフォントサイズを指定したり、文字に背景色を付けることもできます。ホームページのタイトルなどに使うといいかも知れません。

表示例

Welcome to My Homepage!

記述例

<SPAN STYLE="font-family:Arial Black,Arial; font-size:24pt; color:FFFF00; background-color:A0D0FF"> Welcome to My Homepage! </SPAN>

備考

font-family:に続けてフォントを指定します。カンマ( , )で区切って複数のフォントを指定することもできます。
font-size:ではフォントサイズを指定します。
color:では文字の色、background-color:では背景色をそれぞれ16進数(例:FF0000)やカラー名(例:red)で指定します。

↑先頭に戻る

ホットテキストの下線を非表示にする
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

リンクのタグを使った文字(ホットテキスト)には通常下線が付きますが、スタイルシートのtext-decorationプロパティで下線を非表示にすることができます。

表示例

先頭へ戻る

記述例

<A HREF="#TOP" STYLE="text-decoration:none">先頭へ戻る</A>

備考

上記の「フォントとフォントサイズを指定する+文字に背景色を付ける」のSPANタグの場合と同様に、セミコロン( ; )で区切ってフォントやフォントサイズ、背景色などを同時に指定することができます。

↑先頭に戻る

壁紙を1枚だけウィンドウの真ん中に表示する
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

壁紙は通常一つの画像が連続して並んだ状態で表示されますが、スタイルシートを使うと画面の中心に一枚だけ表示させることができます。

記述例

<STYLE TYPE="text/css">
<!--
BODY { background:url(back.gif) #FFFFFF no-repeat fixed 50% 50% }
-->
</STYLE>

備考

上記のタグは全てHEADタグの中に記述します。
「url(back.gif)」のカッコ内は、壁紙のURLを指定します。
「#FFFFFF」の部分では、背景色を指定します。
「50% 50%」の部分は、ウィンドウに対する横と縦の位置を示しています。

↑先頭に戻る

HTMLのタグをそのまま表示
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

通常、HTMLのタグをそのまま表示させることはできませんが、XMPタグ(整形テキスト)を使うことで可能になります。

表示例

<FONT SIZE="7" COLOR="#FF0000">整形テキスト</FONT>

記述例

<XMP><FONT SIZE="7" COLOR="#FF0000">整形テキスト</FONT></XMP>

備考

XMPタグの上下は強制的に改行されます。

↑先頭に戻る

フレームの境界線をなくす
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

フレーム機能を使うと1つのページを境界線でいくつかに区切って複数のHTMLファイルを表示させることができますが、その境界線を見えなくする方法があります。

記述例

<FRAMESET ROWS="100,*" BORDER="0">
<FRAME SRC="abc.html" NAME="top" SCROLLING="NO" NORESIZE>
<FRAME SRC="xyz.html" NAME="bottom" SCROLLING="AUTO">
</FRAMESET>

備考

BORDER属性の値で境界線の太さを指定することができます。値を 0 にすると境界線がなくなります。

↑先頭に戻る

フローティングフレーム
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

フローティングフレームはページ内に別のページを表示させることができます。

表示例

記述例

<IFRAME SRC="abc.html" NAME="floating" SCROLLING="AUTO" WIDTH="560" HEIGHT="200">
ご利用のブラウザーはフローティングフレームに対応していません。
</IFRAME>

備考

IFRAMEの開始タグと終了タグの間には、フローティングフレームを表示できないブラウザーの場合に表示する内容を記述します。
NAMEやSCROLLINGなどの各属性は、通常のFRAMEタグの場合と同じです(HTMLのハンドブック等を参照)。

↑先頭に戻る

自動的にページを移動させる
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

リンクをクリックしたりせずに自動的に次のページに移動する方法です。

記述例

<META HTTP-EQUIV="refresh" CONTENT="5;URL=abc.html">

備考

METAタグはHTMLファイルの一番最初に記述します。
CONTENTの値は、次のHTMLファイルを読み込むまでの時間(秒)と次のHTMLファイルのファイル名です。

↑先頭に戻る

画像の大きさをウィンドウの大きさに合わせて変える
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

IMGタグで画像を表示させたりするとき、画面いっぱいにウィンドウを広げて見た時にはちゃんと表示されていても少しウィンドウを小さくしてみると画像がはみ出てしまうなんていう経験はありませんか。特に罫線として使う横に長い画像なんかは困ってしまいますね。それを防ぐいい方法があります。

記述例

<IMG SRC="abc.gif" WIDTH="70%" HEIGHT="8">

備考

WIDTHとHEIGHTの値をパーセンテージ(%)で指定するとウィンドウに対するパーセンテージで画像の大きさが変化します。

↑先頭に戻る

画像を額縁に入れる
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

TABLEタグを使うことで簡単に額縁の様な効果を出すことができます。

表示例

記述例

<TABLE BORDER="4" CELLSPACING="4" CELLPADDING="2" BGCOLOR="#BFBF00">
<TR BGCOLOR="#80FFFF">
<TD><IMG SRC="kabegami/bara02.gif" WIDTH="64" HEIGHT="64"></TD>
</TR>
</TABLE>

備考

BORDER、CELLSPACING、CELLPADDINGのそれぞれの値を変えることで額縁のイメージを変化させることができます。
また、TABLEタグとTRタグにBGCOLOR属性を付けることで額縁に色を付けることができます。

↑先頭に戻る

左に一定のスペースを空けて行頭を揃える
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

左にある程度のスペースを空けて行頭を揃えるために空白文字を使ってもなかなか綺麗に揃わないものです。そんな時はTABLEタグをちょっと応用して使ってみましょう。

表示例

どうですか? 綺麗に揃ってるでしょう。
この例では、分かりやすくするために、
BORDERの値を1にして枠を付けていますが、
実際にはBORDERの値を0にして枠を消します。

記述例

<TABLE BORDER="0">
<TR>
<TD WIDTH="100"></TD>
<TD>どうですか? 綺麗に揃ってるでしょう。<BR>
この例では、分かりやすくするために、<BR>
BORDERの値を1にして枠を付けていますが、<BR>
実際にはBORDERの値を0にして枠を消します。</TD>
</TR>
</TABLE>

備考

一つ目のTDタグでWIDTH属性を使って左の空白の長さを決めます。そうすると二つ目のTDタグの中の文が左に指定した長さのスペースを空けて行頭が揃って表示されます。
BORDERの値を0にしているところに注意して下さい。

↑先頭に戻る

全て主要ブラウザーでBGMを流す
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

BGMを流す方法はいくつかありますが、もっとも簡単かつ全ての主要ブラウザーで聴けるようにする方法を紹介します。

記述例

<EMBED SRC="abc.mid" WIDTH="200" HEIGHT="60" AUTOSTART="true" LOOP="true" REPEAT="true" VOLUME="50">

備考

いろいろなプラグインに対応させる為、あらゆる属性を付けています。

↑先頭に戻る

メールの件名を指定する&複数のアドレスへメールを送信する。
Internet Explorer Mozilla Firefox Google Chrome Safari Opera

リンクタグで mailto: を使ってメールアドレスにリンクする際に、メールの件名(Subject)を指定したり、カーボンコピー(Cc)やブラインドカーボンコピー(Bcc)を指定する方法を紹介します。

表示例

メールください

記述例

<A HREF="mailto:test@samp.co.jp?subject=Hello&cc=abc@test.ne.jp&bcc=xyz@test.or.jp">メールください</A>

備考

通常は「mailto:」の後ろにメールアドレスを記述するだけですが、?マークに続けて、メールの件名やCcのアドレスを指定することもできます。
また、カンマ( , )で区切って複数のアドレスを指定することもできます。

↑先頭に戻る

HOMEPAGEへ戻る
Back to Homepage