文章を中央に置くレイアウト
このレイアウトは、「タイル」あるいは「敷き詰め」といわれるタイプの背景画像、もしくは右または左に細いイラストのある「横長」あるいは「ボーダー」といわれるタイプの背景画像に適しています。
このページで使用している画像は『COOL MOON』様の作品です。このサイトからはダウンロードせず、素材サイト様から直接、お借りください。
このレイアウトの使い方は、下記の通りです。
-
ファイルを保存する。
- IE;ファイル(F)→名前をつけて保存→WEBページ完全 または WEBページ単一のファイル
- NN:ファイル→別名で保存→ソース
-
背景画像ファイルを指定する
-
使いたい背景画像ファイルを、保存したhtmファイルと同じフォルダーに置いて、css内(ファイル上部にある)の
body{(中略)background-image:url(coolmoon-tile.gif);}
の「coolmoon-tile.gif」の部分を、使いたいファイル名に書きかえます。
【ここまでで、とりあえず、HTMLファイルを使えます】 ◆TOPへ戻る◆
さらに変更が必要な方は、この先もお読みください。 -
「background-image:url(coolmoon-tile.gif);」を削除して、
body{background-color:【カラーコード】;}
とすれば、背景を色無地にすることができます。カラーコード:『色、いろいろ』ご参照ください。
-
使いたい背景画像ファイルを、保存したhtmファイルと同じフォルダーに置いて、css内(ファイル上部にある)の
-
文字表示エリアの背景色・文字色変更
-
現在は、背景色は、ghostwhiteというごく淡いグレーになっています。(IEの場合、通常はWhite(純白)ですが、まぶしくて、目が疲れる、と言われるようです)。文字色は、黒です。
変更する場合は、div.mainarea{ background-color:ghostwhite; color: black; (中略) }
の「ghostwhite」「black」を、それぞれ好みの色のコードに変更してください。
なお、「background-color:ghostwhite;」を削除すると、<body>で指定した背景がそのまま適用されます。
-
現在は、背景色は、ghostwhiteというごく淡いグレーになっています。(IEの場合、通常はWhite(純白)ですが、まぶしくて、目が疲れる、と言われるようです)。文字色は、黒です。
-
文字表示エリア両側の、ボーダー線の色変更
-
現在は、太さ=1px、種類=solid(直線)、色=blackになっています。変更する場合は、
div.mainarea{ (中略) border:1px solid black; }
の部分を変更してください。削除すると、ボーダー線が消えます。- ボーダー線の表示例
3px solid silver
3px dotted silver
3px dashed silver
3px double silver
3px groove silver
3px ridge silver
3px inset silver
3px outset silver
- ボーダー線の表示例
-
現在は、太さ=1px、種類=solid(直線)、色=blackになっています。変更する場合は、
レイアウトの使い方があちこちに入っているのは、表示文例がわりですので、ご容赦ください
<h1>大見出し〜以下、本サイトで頻用するタグ一覧
<h2>中見出し
<h3>小見出し
<p>パラグラフ
</p>→<p>の、行あきはこれ↑くらい。
<br>で改行したときの行あきはこれ↑くらい。
<blockquote>本来は、「引用」を示すタグ。このサイトでは、もう少し緩やかに、引用だの、注意書きだの、謝辞めいたものだのに、使っている。
- <ul><li>リストマーク
リンク色:link:#333366; visited:#666666; hover:#FF0033; active:#FF0033;
↓<hr>横に線を引く。