コラム欄を設ける

ページの途中でコラムやメモを書きたいときに、ちょっと工夫をしてみましょう。下上げたのはDIV要素を２つ組み合わせたものです。

千夜一夜物語

この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。

アラビア語に翻訳されたのは850年ごろ。

長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。

TAGとCSSの指定は以下のようになっています。長文のドキュメントにアクセントを付けるのには、最適な技法です。

<div style="border: 5px double #CCFFCC;width: 600px; ">
<div style="position: relative; left: 0px; top: 0px; width: 141px;
height: 18px; color: #FFFFFF;background-color:#00c000; font-weight:bold">
千夜一夜物語</div>
<p style="line-height: 200%; margin-left: 8px; margin-right: 8px; margin-top: 0" class="font10">
この長大な説話集の起源についてはいろいろな説があるが、今日ではペルシアの説話集「千物語」に由来するといわれる。アラビア語に翻訳されたのは850年ごろ。長い年月の間に、バグダットやカイロあたりの民話も加えられて、現代のような形になった。この「アラビアン・ナイト」の無削除完全版として有名なバートン版を、大場正史氏の生涯をかけた翻訳でおくる。健康なエロティシズムと強靭な精神にあふれたイスラム世界への最高の案内書</p>
</div>

    概要

ある所にシャー（王）がいたが、そのシャーが狩に出ている間に妻が不貞を働いた。

怒ったシャーはその妻を殺してしまったが、それ以来妻にした女が不貞を働かないように、
初夜の後すぐに殺すようになった。

<div style=";border:1px solid #008000; background-color:#FFFFF0 ;width:481px; height:102px; left:122px; top:403px">
<div style="position: relative; left: 0px; top: 0px; width: 141px; height: 18px;
color: #FFFFFF;background-color:#00c000; font-weight:bold">
概要</div>
<p style="line-height: 150%; margin-left: 8px; margin-right: 8px; font-size:80%">
<font color="#006600">ある所にシャー（王）がいたが、そのシャーが狩に出ている間に妻が不貞を働いた。<br>
怒ったシャーはその妻を殺してしまったが、それ以来妻にした女が不貞を働かないように、<br>
初夜の後すぐに殺すようになった。</p>
</font>
</div>

HOMEの次HTMLの次Webサイトを持とうの次コラム欄を設ける

戻る


Webサイトを持とう

SEOアクセス向上

雑学

広告