ＨＴＭＬ言語基礎

技術資料　ＨＴＭＬ言語基礎 vol.2

HTMLでは、文字や文書を装飾する色々なタグが用意されています。HTML標準機能だけでも、グラフィック（GIFやJPEGなどの画像ファイル）をはめ込むことが可能ですから、相当見栄えのよいホームページを作成することが可能です。しかし、HTMLだけで体裁を整えるのは限界がありますので、ＣＳＳとジャバスクリプトを使用することで、いっそう見栄えの良いホームペーを作ることができます。

１．ＣＳＳとは

ＣＳＳ（Cascading Style Sheet）とは、HTMLの体裁を整えるために使うスタイル言語です。HTMLは仕様上、HTML言語だけで文字の体裁を完全に制御できません。HTMLでは文字の大きさや行間などは、ユーザーが使っているプラウザの種類・バージョン・設定によって変化してしまいます。HTMLに加えてＣＳＳを使用すれば、ブラウザの種類や設定に関わらずに、期待通りの文字を表示することが可能になります。ＣＳＳは次の様に使用します。

<head>
<style type="text/css">
font {font-size:13px; line-height:16px; margin: 0; font-family: "ＭＳＰゴシック", "Osaka";}
</style>
</head>

※<head></head>の間にＣＳＳの定義を入れます。上記の例は、「フォントは、13ピクセル、行間16ピクセル、余白0、書体は、"ＭＳＰゴシック"または"Osaka"にする。」という意味になります。

２．ジャバ・スクリプトとは

ジャバスクリプト（JavaScript）とは、HTMLに動きを付けるために使うプログラム言語です。プルダウンメニュー（マウスを当てるとサブメニューが表示される）やロールオーバーボタン（マウスを当てると色や形が変化するボタン）を表示させるためには、このジャバ・スクリプトをHTMLの中に埋め込みます。

下記は、ロールオーバーボタンのJavaScriptプログラムです。<head></head>の間にそのままコピー＆ペーストしてください。

<head>
<script language="JavaScript">
<!--

function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

//-->
</script>
</head>

下記は、実際にロールオーバーボタンを配置する部分のHTMLソースです。ボタンを入れたい場所に挿入してください。

このようにＨＴＭＬやＣＳＳ、ジャバ・スクリプトを直接記述する（実際にはコピー＆ペーストする）ことで、きめ細かな装飾をしたり、より見栄えの良いホームページが作れるようになります。

戻る >>