HTML編
文章の両側に余白をいれるってどうやっていれたらいいの?
学校ではちゃんと見えたのに、家のコンピュータでみたら変な色になってるよ!?
見えない線がうまくつくれないよ

いろいろ質問 HTML入門編



●文章の両側に余白をいれるってどうやっていれたらいいの?
テーブルを使うと両側に余白を入れられるよ。

たとえば、こんなかんじになる。



葉っぱの裏表について

葉っぱのうらと表の話をしよう。どっちが表でどっちが裏かわかるかな。上を向いている方が表で、下に面している方が裏だって?
じゃあ、ひとつおもしろいことを教えてあげよう。あやめ、って花は知っているかな。根元からまっすぐにのびる細長い葉っぱをもった植物だね。あやめの葉っぱの表はどっち側だと思うかい。
実はあの葉っぱは両側とも裏なんだ。あやめの葉っぱをよくみるとわかるけれども、あの葉っぱは中央から半分に折れた形をしているんだ。つまり、ふつうの葉っぱの表を内側にして主脈で半分に折り畳んだようになっているんだよ。
だから、外側の部分は裏なのさ。
じゃあ、もうひとつ。ねぎの葉っぱはどちらが表でどちらが裏だと思う?
もう分かるね。ねぎは外を向いている方が 裏で、芯を向いている方が表なんだ。


これをやるためのHTMLはこういうかんじだ。

【HTMLソース】

<html>
<body>
<table align="center" width="80%" border="0">
<tr>
<td>
<p><b>タイトル</b></p>
<p>文章です。文章です。文章です。文章です。文章です。文章です。</p>
</td>
</tr>
</table>
</body>
</html>

試してみよう!

▲上にモドル


●学校ではちゃんと見えたのに、家のコンピュータでみたら変な色になってるよ!?
コンピュータはほとんどどんな色を表示できることができるんだけど、ディスプレイの種類(液晶かそうじゃないか)や、コンピュータの種類、OS(WindowsとかMacとか)の種類によって、色が違うことがあるんだ。

でも、それでは不便なこともあるので、どのコンピュータでもこれだけは同じような色にしよう!ってみんなで決めた色が256色あるんだ。この256色は「ウェブ・セーフ・カラー」(ウェブの安全色)という名前がついている。

文字の色や背景の色をこの色にしてあげれば、それほどひどく色が変わってしまうことはないのでオススメだよ。

【ウェブ・セーフ・カラーの一覧】

#000000

#000033

#000066

#000099

#0000CC

#0000FF

#003300

#003333

#003366

#003399

#0033CC

#0033FF

#006600

#006633

#006666

#006699

#0066CC

#0066FF

#009900

#009933

#009966

#009999

#0099CC

#0099FF

#00CC00

#00CC33

#00CC66

#00CC99

#00CCCC

#00CCFF

#00FF00

#00FF33

#00FF66

#00FF99

#00FFCC

#00FFFF

#330000

330033

#330066

#330099

#3300CC

#3300FF

#333300

#333333

#333366

#333399

#3333CC

#3333FF

#336600

#336633

#336666

#336699

#3366CC

#3366FF

#339900

#339933

#339966

#339999

#3399CC

#3399FF

#33CC00

#33CC33

#33CC66

#33CC99

#33CCCC

#33CCFF

#33FF00

#33FF33

#33FF66

#33FF99

#33FFCC

#33FFFF

#660000

660033

#660066

#660099

#6600CC

#6600FF

#663300

#663333

#663366

#663399

#6633CC

#6633FF

#666600

#666633

#666666

#666699

#6666CC

#6666FF

#669900

#669933

#669966

#669999

#6699CC

#6699FF

#66CC00

#66CC33

#66CC66

#66CC99

#66CCCC

#66CCFF

#66FF00

#66FF33

#66FF66

#66FF99

#66FFCC

#66FFFF

#990000

990033

#990066

#990099

#9900CC

#9900FF

#993300

#993333

#993366

#993399

#9933CC

#9933FF

#996600

#996633

#996666

#996699

#9966CC

#9966FF

#999900

#999933

#999966

#999999

#9999CC

#9999FF

#99CC00

#99CC33

#99CC66

#99CC99

#99CCCC

#99CCFF

#99FF00

#99FF33

#99FF66

#99FF99

#99FFCC

#99FFFF

#CC0000

CC0033

#CC0066

#CC0099

#CC00CC

#CC00FF

#CC3300

#CC3333

#CC3366

#CC3399

#CC33CC

#CC33FF

#CC6600

#CC6633

#CC6666

#CC6699

#CC66CC

#CC66FF

#CC9900

#CC9933

#CC9966

#CC9999

#CC99CC

#CC99FF

#CCCC00

#CCCC33

#CCCC66

#CCCC99

#CCCCCC

#CCCCFF

#CCFF00

#CCFF33

#CCFF66

#CCFF99

#CCFFCC

#CCFFFF

#FF0000

#FF0033

#FF0066

#FF0099

#FF00CC

#FF00FF

#FF3300

#FF3333

#FF3366

#FF3399

#FF33CC

#FF33FF

#FF6600

#FF6633

#FF6666

#FF6699

#FF66CC

#FF66FF

#FF9900

#FF9933

#FF9966

#FF9999

#FF99CC

#FF9FF

#FFCC00

#FFCC33

#FFCC66

#FFCC99

#FFCCCC

#FFCCFF

#FFFF00

#FFFF33

#FFFF66

#FFFF99

#FFFFCC

#FFFFFF

 

けっこういっぱいあるでしょう?

▲上にモドル


●見えない線がうまくつくれないよ
文章のはじや、絵や写真のはじがうまくそろわない時は、テーブルを使うとそろえやすいよ。

▲上にモドル

 




モドル ウェブサイト入門編へ