Previous/NishimatsuHanaokaWakai Html4.01Strict+&Css2
Index Body&Anchors Blocks Colors Division Headings Inline Lists Paragraphs Rules Tables TextStyles

Html4.01Strict+&Css2

故阿部政雄氏のサイトを「KASAI-CHAPPUIS」に復元したいと思いながらも、異なるデザインのサイトを共通のスタイルシートで記述することは容易なことではなかった。しかしながら「ばけら」の詳細なHTML&CSSリファレンスに助けられ、現在、作業進行中である。そうこうする中もHTMLやCSSの文法上の誤解を幾つか発見した。これを機に「KASAI-CHAPPUIS」も、よりスタイリッシュなものにしようと思う。その際、HTML4.01厳密型で「非推奨」とされているコーディングも部分的に採用することとした。

Reference ばけらのHTML ばけらのCSS 鳩丸Q&A 鳩丸用語集

既存HTMLコードの変更箇所

見出し要素「hn」について
タグ「hn」のレベルを再確認する
文字修飾
要素「img」について
「floatleft」を「left」に、「right」を「right」に、クラス名を簡素化する
クラス名の「imgtitle」を要素「caption」の属性「align」で記述する、つまり要素「table」で括る(非推奨)
今後のコーディングに際し、属性「alt」をつけなくてもよいことにする(非推奨)
ブロック要素「div」について
クラス名「center」を、要素「table」または「div」の属性「align : center」に改める(非推奨)
要素「table」について
表内罫線を要素「td」の属性「border」で指定せず、要素「table」の属性「rules」に改める
「cellspacing="0"」を省く

Body & Anchors

body{background-image : url("Image/masaic.gif");
     color            : black;
     font-family      : "MS ゴシック";
     line-height      : 130%;
     padding-left     : 0%;
     padding-right    : 0%}
     text-align       : left}
a        {font-weight : bold}
a:visited{color       : tomato}
a:link   {color       : mediumorchid}
a:active {color       : fuchsia}
a:hover  {background-color : khaki}

Blocks

p{margin      : 0.1em 0.3em 0.3em +3em;
  text-align  : left;
  text-indent : 1em}
blockquote{background  : #fffff9;
           border      : 3px double yellowgreen;
           color       : black;
           font-size   : 90%;
           font-weight : lighter;
           line-height : 115%;
           margin      : 0 +2em 0 +6em}
blockquote p{margin : 0 0 0 0}
pre{margin     : 0 0 0.3em 0;
    text-align : left}

<p>経済動物は...</p>
<blockquote><p>経済動物は...</p></blockquote>
<p>しかしながら、...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

Colors

.ivoryback       {background-color : ivory}
.lightyellowback {background-color: lightyellow}
.lightgreenback  {background-color: lightgreen}
.navajowhiteback {background-color : navajowhite}
.palegreenback   {background-color : palegreen}
.powderblueback  {background-color : powderblue}
.whiteback       {background-color : white}
.wheatback       {background-color : wheat}

.blackborder       {border : 1px solid black}
.deepskyblueborder {border : 4px solid deepskyblue}
.goldborder        {border : 4px solid gold}
.goldenrodborder   {border : 4px solid goldenrod}
.greenborder       {border : 3px solid green}
.navajowhiteborder {border : 3px solid navajowhite}
.redborder         {border : 2px solid red}
.limeborder        {border : 1px solid black}
.wheatborder       {border : 2px solid wheat}

.blue       {color : blue}
.blueviolet {color : blueviolet}
.ivory      {color : ivory}
.lime       {color : lime}
.navajo     {color : navajowhite}
.purple     {color : purple}
.red        {color : red}
.white      {color : white}

Division

div      {clear  : both;
          margin : 0 0 0 0;
          padding : 0.3em}
div.block{margin  : 0 +3em 0 +3em}

<クラス名=無し>経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

<クラス名="block lightgreenback greenborder">経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

<クラス名="block lightyellowback gold">経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

<クラス名="block wheatback goldenrodborder">経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

<クラス名="block powderblueback deepskyblueborder">経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。

Headings <h1..6>

.ivoryback  {background-color : ivory}
.wheatborder {border : 2px solid wheat}
p{margin      : 0.1em 0.3em 0.3em +3em;
  text-align  : left;
  text-indent : 1em}

h1,h2,h3,h4,h5,h6{background-color : white;
                  border-color     : yellowgreen;
                  border-style     : outset;
                  border-width     : 8px;
                  clear            : both;
                  color            : black;
                  padding          : 12px 10px 8px 10px}
h1 {font-size    : 220%;
    margin       : 1em 0 0.3em 0}
h2 {border-style : outset outset none outset;
    font-size    : 200%;
    margin       : 1em 0 0.3em 0.5em}
h3 {border-style : outset none none outset;
    font-size    : 180%;
    margin       : 1em 0 0.3em 1em}
h4 {border-style : outset none none none;
    font-size    : 160%;
    margin       : 1em 0 0.3em 1.5em;
    padding      : 10px 10px 6px 10px}
h5 {border-style : solid solid none solid;
    border-width : 6px;
    font-size    : 140%;
    font-weight  : bold;
    margin       : 1em 0 0.3em 2em;
    padding      : 8px 10px 4px 10px}
h6 {border-style : solid none none solid;
    border-width : 5px;
    font-size    : 120%;
    font-weight  : bold;
    margin       : 1em 0 0.3em 2.5em;
    padding      : 6px 10px 4px 10px}

<div class="outset ivoryback silverborder">
<span class="title">経済動物としての鶏</span><span class="subtitle">(笠井一朗)</span></div>
<p>経済動物は...</p>

経済動物としての鶏(笠井一朗)

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h1>h1経済動物としての鶏</h1>
<p>経済動物は...</p>

h1経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h2>h2経済動物としての鶏</h2>
<p>経済動物は...</p>

h2経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h3>h3経済動物としての鶏</h3>
<p>経済動物は...</p>

h3経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h4>h4経済動物としての鶏</h4>
<p>経済動物は...</p>

h4経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h5>h5経済動物としての鶏</h5>
<p>経済動物は...</p>

h5経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<h6>h6経済動物としての鶏</h6>
<p>経済動物は...</p>

h6経済動物としての鶏

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

Inline

img       {border-style : none;
           float        : none;
           margin       : 0 0.5em}
img.left  {float        : left}
img.right {float        : right}

<p>経済動物は...</p>
<img src="Image/Arokana.jpg"   class="left">
<img src="Image/Onagatori.jpg" class="left">

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<img src="Image/Arokana.jpg"   class="left">
<p>経済動物は...</p>
<img src="Image/Onagatori.jpg" class="left">

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<img src="Image/Arokana.jpg"   class="left">
<img src="Image/Onagatori.jpg" class="left">
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<img src="Image/Arokana.jpg"   class="right">
<img src="Image/Onagatori.jpg" class="right">
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<img src="Image/Arokana.jpg"   class="left">
<img src="Image/Onagatori.jpg" class="right">
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

Lists

.alpha      {list-style-type : lower-alpha}
.circle     {list-style-type : circle}
.decimal    {list-style-type : decimal}
.disc       {list-style-type : disc}
.none       {list-style-type : none}
.roman      {list-style-type : lower-roman}
.square     {list-style-type : square}
.upalpha    {list-style-type : upper-alpha}
.uproman    {list-style-type : upper-roman}
ol          {list-style-type : decimal}
ul          {list-style-type : disc}

dl,ol,ul{margin : 0.5em 1em 0.5em +2.5em}
li      {margin : 0.1em 0 0.1em 0}
dt{background   : white;
   border-color : #fc9;
   border-style : none none double double;
   border-width : 2px;
   color        : black;
   margin       : 0.3em 0 0 0;
   padding      : 0 0 0 1em}
dd{margin  : 0 0 0 1em;
   padding : 0.2em}

<ul>
<li class="circle">経済動物としての鶏
<li class="disc">経済動物は概して寿命を
<li class="none">まっとうすることがありません。
<li class="square">鶏もその例外ではなく、
<li>採卵鶏は5ヶ月くらいから
</ul>


<ol>
<li class="alpha">経済動物としての鶏
<li class="roman">経済動物は
<li class="decimal">概して寿命を
<li class="upalpha">まっとうすることがありません。
<li class="uproman">鶏もその例外ではなく、
<li>採卵鶏は5ヶ月くらいから
</ol>

  1. 経済動物としての鶏
  2. 経済動物は
  3. 概して寿命を
  4. まっとうすることがありません。
  5. 鶏もその例外ではなく、
  6. 採卵鶏は5ヶ月くらいから

<ol class="upalpha">
<li>経済動物としての鶏
<li>経済動物は
<ol class="alpha">
<li>概して寿命を
<li>まっとうすることがありません。
</ol>
<li>鶏もその例外ではなく、
</ol>

  1. 経済動物としての鶏
  2. 経済動物は
    1. 概して寿命を
    2. まっとうすることがありません。
  3. 鶏もその例外ではなく、

<dl>
<dt>経済動物としての鶏
<dd>経済動物は
<dl>
<dt>概して寿命を
<dd>まっとうすることがありません。
</dl>
</dl>

経済動物としての鶏
経済動物は
概して寿命を
まっとうすることがありません。

Paragraphs

p{margin      : 0.2em 0.3em 0.2em +3em;
  text-align  : left;
  text-indent : 1em}
p.center {text-align : center}
p.right  {text-align : right}

Rules <h1..6>

hr {color         : mediumaquamarine;
    border-bottom : 3px ridge mediumaquamarine;
    clear         : both}
hr.separate{height      : 3px;
            border-color: black;
            border-style: double none;
            border-width: 1px}
hr.none {display : none}
@media print{hr.page {page-break-after : always}}
hr.end{height      : 6px;
       border-color: black;
       border-style: double none;
       border-width: 3px}
--------------------------------------------------------
<hr>

<hr.separate>

<hr.none>

<hr.page>

<hr.end>

Tables

table       {border-style    : none;
             float           : none;
             margin          : 0 0.5em}
table.left  {float  : left}
table.right {float  : right}
thead       {text-align : center}
thead,tfoot {background-color : tan}

<table class="blackborder navajowhiteback" rules="rows">
<thead><tr><th>日付<th>摘要<th>支払先<th>価格<th>累計<td> <th>科目<th>金額
<tfoot><tr><th> <th> <th>合計<th>129,619
<tbody>
<tr><td>02/02/26<td>ガソリン 28.0<td>森下<td>3,028<td>3,028<td> <td>自動車税<td>4,000
<tr><td>02/04/12<td>ガソリン 29.0<td>森下<td>3,136<td>6,164<td> <td>燃料費<td>28,079
<tr><td>02/05/29<td>ガソリン 43.9<td>森下<td>4,841<td>11,005<td> <td>整備費<td>97,540
<tr><td>02/06/12<td>自動車税<td>支庁<td>4,000<td>15,005<td> <th>合計<th>129,619
<tr><td>02/06/29<td>ガソリン 24.5<td>森下<td>2,702<td>17,707
<tr><td>02/07/30<td>ガソリン 20.0<td>森下<td>2,205<td>19,912
</table>


<table class="blackborder navajowhiteback" rules="cols">


<table class="blackborder navajowhiteback" rules="all">


<table class="blackborder navajowhiteback" rules="none">


<table class="blackborder navajowhiteback">

ブロック要素「table」のフロート挙動チェック

img       {border-style : none;
           float        : none;
           margin       : 0 0.5em}
table       {border-style    : none;
             float           : none;
             margin          : 0 0.5em}
table.left  {float  : left}
table.right {float  : right}

<table>
<img src="Image/Arokana.jpg">
</table>
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<table align="left">
<img src="Image/Arokana.jpg">
</table>
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<table align="right">
<img src="Image/Arokana.jpg">
</table>
<p>経済動物は...</p>

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

要素「caption」の挙動チェック

<table align="left">
<caption align="bottom">Arokana.JPG</caption>
<tr><td><img src="Image/Arokana.jpg">
</table>
<table align="right">
<caption align="top">Arokana.JPG</caption>
<tr><td><img src="Image/Onagatori.jpg">
</table>
<p>経済動物は...</p>

Arokana.JPG
Arokana.JPG

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。


<table align="left">
<caption>Arokana.JPG</caption>
<tr><td><img src="Image/Arokana.jpg">
</table>
<table align="right">
<caption>Arokana.JPG</caption>
<img src="Image/Onagatori.jpg">
</table>
<p>経済動物は...</p>

Arokana.JPG
Arokana.JPG

経済動物は概して寿命をまっとうすることがありません。鶏もその例外ではなく、採卵鶏は5ヶ月くらいから卵を産み始め3歳を待たずしてその生涯を終えることが多く、かしわ肉となります。肉用若鶏 (ブロイラー) はなんと3ヶ月余りの命でしかないのです。しかしながら、ここでは、なんとなく生きながらえている婆さん鶏ばかりがいます。そのため卵をあまり生まないのです。

TextStyles

.center     {text-align : center}
.left       {text-align : left}
.right      {text-align : right}
.noindent   {text-indent: 0}
.nomargin   {margin     : 0}

.small   {font-size   : small}
.large   {font-size   : large}
.bold    {font-weight : bold}

.cursive   {font-family     : cursive}
.italic    {font-style      : italic}
.underline {text-decoration : underline}

em       {color       : red;
          font-style  : italic, oblique;
          font-weight : bold}
strong   {color       : red;
          font-weight : bolder}

.subtitle{font-size   : 180%}
.title   {color       : red;
          font-family : cursive;
          font-size   : 180%;
          font-style  : italic, oblique;
          font-weight : bold}

no size 文字指定なし small size 小さな文字指定 small size 小さな文字指定 large size 大きな文字指定 large size 大きな文字指定 bold size 太字の文字指定 bold size 太字の文字指定 cursive family カーシブの文字指定 cursive family カーシブの文字指定 italic style イタリックスタイルの文字指定 italic style イタリックスタイルの文字指定 underline 下線修飾の文字指定 underline 下線修飾の文字指定 emphasize style 強調の文字指定 strong style 強調の文字指定