css3 アニメーション

段組み - 3段組みの作成

ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。

<!DOCTYPE html>
<html>
<head>
<style> 
.novel1{
  -moz-column-count:3;    /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;
}
</style>
</head>
<body>
<h3>段組み - 3段組みの作成</h3>
<div class="novel">
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになって
いらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん
中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極
楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の
面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は
、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の
景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。
</div>
</body>
</html>

段組み - 列間のギャップ指定

<!DOCTYPE html>
<html>
<head>
<style> 
.novel2{
  -moz-column-count:3;    /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  -moz-column-gap:40px;    /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;
}
</style>
</head>
<body>
<h3>段組み - 列間のギャップ指定</h3>
<div class="nove2">
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになって
いらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん
中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極
楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の
面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は
、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の
景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。
</div>
</body>
</html>

段組み - 縦罫線

<!DOCTYPE html>
<html>
<head>
<style> 
.novel3{
  -moz-column-count:3;    /* Firefox */
  -webkit-column-count:3; /* Safari and Chrome */
  column-count:3;

  -moz-column-gap:40px;    /* Firefox */
  -webkit-column-gap:40px; /* Safari and Chrome */
  column-gap:40px;

  -moz-column-rule:4px outset #ff00ff;    /* Firefox */
  -webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
  column-rule:4px outset #ff00ff;
  background-color:white;
}
</style>
</head>
<body>
<h3>段組み - 縦罫線</h3>
<div class="nove3">
ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになって
いらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん
中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極
楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の
面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は
、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の
景色が、丁度覗き眼鏡を見るように、はっきりと見えるのでございます。
</div>
</body>
</html>

戻るホーム次へ