文字エリア幅固定

　このレイアウトは、文章を中央におくレイアウトにプラスして、「window左右幅を狭くしていくと、ある程度まで余白の幅を変動させて文字エリア幅を同じに保ち、あるところから余白がなくなって文字エリアそのものが細くなる」という機能を盛り込んでいます。(実際に、window幅を変えてみていただければ、ご理解いただけるかと…)

　このページで使用しているJabaScriptを開発なさったのは、『小説HTMLの小人さん』の文月夕様です。当サイトは、文月様の許可を得て、再配布しています。
　このページで使用している画像素材は『COOL MOON』様の作品です。このサイトからはダウンロードせず、素材サイト様から直接、お借りください。

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

  1. ファイルを保存する。
    • HTMLファイル、chkwnsize.js、basic.cssを同じフォルダーに置いてください。ダウンロード警告が不気味だという方は、このファイルの末尾に掲載しますので、別ファイルに保存してください。
  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>横に線を引く。

basic.css

/* ▼基本設定部分*/
/* フォント指定*/
body,td,div,li{font-family:Arial,Swiss,sans-serif;}
/* フォントサイズ・行間*/
p,li,blockquote{font-size:93%;line-height:140%;margin:10px;padding:0;}
td{font-size:93%;line-height:140%;padding:3px;}
h1{font-size:125%;font-weight:bold;margin:25px 10px 10px 10px;padding:0;}
h2{font-size:113%;font-weight:bold;margin:17px 10px 10px 10px;padding:0;}
h3{font-size:100%;font-weight:bold;margin:10px 10px 10px 10px;padding:0;}
ul{margin:0;padding:0;}
/* 引用枠*/
blockquote{margin:20px 30px 20px 30px;padding:3px;}
/*文字表示エリアを中央へ、余白設定。文字は左寄せ*/
body{margin:0;padding:0;text-align:center;}
div.mainarea{height:100%;
padding:50px 15px;
margin-left: auto;
margin-right: auto;
text-align:left;}
#mainarea{width:700px;max-width:700px;}

chkwnsize.js

function chkwindowsize() {
if (document.all) {
wX = document.body.clientWidth;
} else {
wX = window.innerWidth;
}
if ((wX) && (wX < 700)) {
document.getElementById('mainarea').style.width = '100%';
} else {
document.getElementById('mainarea').style.width = '700px';
}
}
/*　 JavaScript著作権表示 文月夕様 http://htmldwarf.hanameiro.net
*/

　◆TOPへ戻る◆