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