文章を中央に置くレイアウト

 このレイアウトは、「タイル」あるいは「敷き詰め」といわれるタイプの背景画像、もしくは右または左に細いイラストのある「横長」あるいは「ボーダー」といわれるタイプの背景画像に適しています。

 このページで使用している画像は『COOL MOON』様の作品です。このサイトからはダウンロードせず、素材サイト様から直接、お借りください。

このレイアウトの使い方は、下記の通りです。

  1. ファイルを保存する。
    • IE;ファイル(F)→名前をつけて保存→WEBページ完全 または WEBページ単一のファイル
    • NN:ファイル→別名で保存→ソース
  2. 背景画像ファイルを指定する
    • 使いたい背景画像ファイルを、保存したhtmファイルと同じフォルダーに置いて、css内(ファイル上部にある)の
      body{(中略)background-image:url(coolmoon-tile.gif);}
      の「coolmoon-tile.gif」の部分を、使いたいファイル名に書きかえます。
      【ここまでで、とりあえず、HTMLファイルを使えます】  ◆TOPへ戻る◆

      さらに変更が必要な方は、この先もお読みください。
    • 「background-image:url(coolmoon-tile.gif);」を削除して、
      body{background-color:【カラーコード】;}
      とすれば、背景を色無地にすることができます。色コード:『色、いろいろ』ご参照ください。
  3. 文字表示エリアの背景色・文字色変更
    • 現在は、背景色は、ghostwhiteというごく淡いグレーになっています。(IEの場合、通常はWhite(純白)ですが、まぶしくて、目が疲れる、と言われるようです)。文字色は、黒です。
      変更する場合は、
      div.mainarea{ background-color:ghostwhite; color: black; (中略) }
      の「ghostwhite」「black」を、それぞれ好みの色のコードに変更してください。
      なお、「background-color:ghostwhite;」を削除すると、<body>で指定した背景がそのまま適用されます。
  4. 文字表示エリア両側の、ボーダー線の色変更
    • 現在は、太さ=1px、種類=solid(直線)、色=blackになっています。変更する場合は、
      div.mainarea{ (中略) border-left:1px solid black; border-right: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

レイアウトの使い方があちこちに入っているのは、表示文例がわりですので、ご容赦ください


<h1>大見出し〜以下、本サイトで頻用するタグ一覧

<h2>中見出し

<h3>小見出し

<p>パラグラフ

</p>→<p>の、行あきはこれ↑くらい。
<br>で改行したときの行あきはこれ↑くらい。

<blockquote>本来は、「引用」を示すタグ。このサイトでは、もう少し緩やかに、引用だの、注意書きだの、謝辞めいたものだのに、使っている。

リンク色:link:#333366;  visited:#666666;  hover:#FF0033;  active:#FF0033;

↓<hr>横に線を引く。

 ◆TOPへ戻る◆