1/2

札幌学院大学社会情報学部　ＡＯ入試課題用テキスト

　　　ＨＴＭＬの基礎知識　（４）

１　スタイル指定　

１－１　　段落を罫線（ボーダー）で囲む

前回はスタイル指定を行なって段落に色をつけた。今度は罫線で囲んで見よう。これまでと同様に、開始タグの中に罫線の指定を行なえばよい。

HTML文書は次の通りである。下線部が罫線を引くためのスタイル指定である。

<html>

<head>

<body>

<h3>段落を罫線で囲む</h3>

<p style="margin-left:50px;width:400px;font-size:12pt;line-height:18pt; background-color:#CCFFFF; border-style:solid;border-width:thin;border-color:#99CCFF">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>

<p style="margin-left:70px;width:350px;font-size:12pt;line-height:20pt; background-color:#CCFFCC; border-style:dashed;border-width:medium;border-color:#99FFCC">学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程を経験します。ゼミナールで学んだことの集大成です。</p>

</body>

</html>

罫線指定の個所を詳しく見てみよう。上記のＨＴＭＬ文書では以下のようなプロパティが指定されている。以下では罫線を『ボーダー』と呼んでいる。

ｂｏｒｄｅｒ－ｓｔｙｌｅで指定するボーダーの種類は以下のようなものがある。似たよう内容のものもあるので、実際に使って確かめてみよう。

ボーダーの種類	内　容
ｓｏｌｉｄ	実線
ｄｏｕｂｌｅ	二重線
ｄａｓｈｅｄ	破線
ｄｏｔｔｅｄ	点線
ｏｕｔｓｅｔ	ボックス全体が出っ張って見える線
ｒｉｄｇｅ	でっぱりのある線
ｉｎｓｅｔ	ボックス全体がひっこんで見える線
ｇｒｏｏｖｅ	溝のある線

予め用意されているボーダーの太さは以下の３種類である。

ボーダーの太さの種類	内　容
ｔｈｉｎ	細い
ｍｅｄｉｕｍ	中くらい
ｔｈｉｃｋ	太い

ボーダーの太さはピクセル数で指定することもできる。例えば、

border-width:10px

とすれば１０ピクセル分の幅になる。

ボーダーの色指定は文字などの場合と同じである。

スタイル指定における「：」と「；」の役割の違いを再度確認：

　　　「　：　」（コロンと読む）

スタイル指定のプロパティとプロパティ値の間に書き、両者が「等しい」という意味を持つ。

　　　「　；　」（セミコロンと読む）

複数のスタイル指定の間に書き、両者を「区切る」という意味を持つ

　　　　　******************************************************************

１－２　　イメージ（画像）の配置

今度は文字だけでなく、イメージも含めていろいろなスタイルを指定してみよう。前回までと同様の画像を使う。まず、画像ファイルを表示するための基本的なHTML文書を作っておく。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

</body>

</html>

ブラウザ表示は以下のようになる。この状態は『２個の大きな文字が並んでいる』と考えると理解しやすい。

ここで、２つの<img>タグ間に、改行タグを入れてみよう。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

<br />

</body>

</html>

結果は下図に示すように、１番目の画像の直後で『改行』されたように画像が配置される。

　　　　　　　　************************************************************

１－３　　イメージ（画像）に罫線（ボーダー）を付ける

画像の周囲に罫線を引いて、枠のような表示を行なってみる。

HTML文書は次の通り。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

<br />

</body>

</html>

結果は以下のように、額に入れられた写真のような表示が得られた。

　　　　　　　　　　　　　　**********************************************

１－４　　イメージの間に段落（文章）を配置：

以下では

① イメージ（画像）

② 段落（文章）

③ イメージ（画像）

④ 段落（文章）

の順に並べてみよう。この順にタグを設定していけばよい。<p>～</p>タグによって改行されるので、<br　/>タグを入れる必要はない。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

<p style="width:250px">ＣＧ（コンピュータグラフィックス）のモデリングや作図方法などに関する基礎知識、ＣＧ制作やホームページ作りの基礎を学び、コンピュータ上で作品を作ることを経験します。</p>

<p style="width:250px">学んだ基礎知識を応用し、その成果を公表するまでの（試行錯誤を含む）一連の過程を経験します。ゼミナールで学んだことの集大成です。</p>

</body>

</html>

表示結果は以下の通りである。文章は左詰めで４００ピクセルの幅におさまるように配置されている。

*******************************************::

１－５　　画像の周囲に余白を設定：

画像がページの端や文字に近づきすぎないようにするために、画像の周りにマージン（余白）を設定する。最初の画像の周囲に２０ピクセルのマージンを設定してみよう。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

</body>

</html>

結果は以下の通りである。矢印で示された部分がマージンである。

　　　　　　　　　　　　　　　　　****************************************

１－６　画像の横に文章を配置する：

今度は文章を画像の右側に並べてみよう。画像を左側に寄せる場合には、

　　　　　　　　　　　　　　　　　　　　　　　　align=”left”

を指定する。以下では２番目の画像にもマージンを設定している。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

</body>

</html>

結果は以下の通りである。ここで、２番目の画像も最初の画像の右側に配置されてしまった。

この状態を解除するには、最初の段落の終了タグの後で、『段落の右寄せを解除』する指定をすればよい。具体的には改行タグの中で以下のような指定をする。

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

<br clear="left"/>

</body>

</html>

この結果は以下の通りである。２番目の画像についても同じような指定を行なって、それぞれの画像の右側に段落が配置されるようにした。

　　　　　　**************************************************************

１－７　　横罫線の指定

横罫線は<ｈｒ>タグで指定する。以下の例で指定されているプロパティは

① ｓｉｚｅ　：　線の太さをピクセル数で指定

② ｗｉｄｔｈ　：　線の長さをピクセル数で指定

③ ａｌｉｇｎ　：　線の位置を指定

　　　　　　　　　　　　　　　　　　　align=”left” 左寄せ

　　　　　　　　　　　　　　　　　　　　　　　“center” 中央

　　　　　　　　　　　　　　　　　　　　　　　“right”　右寄せ

　　　　　④　ｃｏｌｏｒ　：　文字色の場合と同じ

<html>

<head>

</head>

<body>

<h3>画像のスタイル指定</h3>

<hr align="left" color="#00CCCC" size="4" width="400">

<hr align="left" color="#00CCCC" size="4" width="400">

<br clear="left"/>

<hr align="left" color="#00CCCC" size="4" width="400">

</body>

</html>

　　　　　　　　　　　　　　　***********************************

演習課題４：

上記の最後の例題を使って、自分の好きな写真と、その説明を表示するHPを作成してみよう。