CSS3 Test

[float解除] .section:after { content: ""; clear: both; height: 0; display: block; visibility: hidden;}

浜名湖の夕景

<DIV class="caption shadow large float-left"><img src="~.jpg" alt=""><p>浜名湖の夕景</p></DIV>
浜名湖の畔まで歩こうと思って、鷲津で途中下車した。14時20分、まだ残暑が厳しくリュックを背負って歩くのをためらった。とりあえず遅い昼食をとろうと駅前の喫茶店に入った。まったりと1時間も過ごした。覚悟を決めて強い日差しを浴びて歩き始める。あっという間に湖畔に着いた。半島の付け根にあたり、古い桟橋が見えた。立ち入り禁止になっていた。先端の部分が壊れていた。

路傍の花
<DIV class="caption shadow medium float-left"><img src="~.jpg" alt=""><span>路傍の花</span></DIV>

浜辺はない。左岸沿いに歩き始めると」天皇陛下御乗船所」の碑があった。昭和5年6月1日だというから、80年も前のことだ。土地の人に聞くと、北岸に御用邸があったそうだ。昔はもっと立派な桟橋があったのだろう。乗船場周辺もかつては遊泳場だったというから、家族連れで賑わっていたのだろう。いまは朽ち果てた桟橋が残るだけのさびしい風景だ。

黄色い花

<DIV class="caption shadow small float-right"><img src="~.jpg" alt=""></a><p>黄色い花</p></DIV>

浜辺はない。左岸沿いに歩き始めると」天皇陛下御乗船所」の碑があった。昭和5年6月1日だというから、80年も前のことだ。土地の人に聞くと、北岸に御用邸があったそうだ。昔はもっと立派な桟橋があったのだろう。乗船場周辺もかつては遊泳場だったというから、家族連れで賑わっていたのだろう。いまは朽ち果てた桟橋が残るだけのさびしい風景だ。浜辺はない。左岸沿いに歩き始めると」天皇陛下御乗船所」の碑があった。昭和5年6月1日だというから、80年も前のことだ。土地の人に聞くと、北岸に御用邸があったそうだ。昔はもっと立派な桟橋があったのだろう。乗船場周辺もかつては遊泳場だったというから、家族連れで賑わっていたのだろう。いまは朽ち果てた桟橋が残るだけのさびしい風景だ。

  1. Get Adobe Flash PlayerIE9: <img ~ align="right">が無効になる。
    DOCTYPEを書くと右詰になった。DOCTYPEなしでも、CSSでfloat:rightを書けば良い。
  2. SampleIE9: border:solid silver 1px;padding:5px;が無効になる。
    border-style:solid; border-color:silver;border-width:1px;padding:5px;と書いても無効。
    DOCTYPEを書くと有効になる。

Ruby

iPad ○ Safari ○ Chrome ○ Android ○ Firefox △ IE9 ○
秋山の 黄葉(もみじ)を茂み 迷いぬる (いも)を求めむ 山道(やまじ)知らずも(巻二-二〇八)

Transition

Chrome, Opera, Safariはブラウザープレフィックスを書けば機能する。IE9/Firefoxはtimingが効かない。iPadは無効。
transition:color 3s, background-color 3s linear 0, width 3s ease 0, height 1s;

Box-shadow

box-shadow:2px 2px 2px rgba(0,0,0,0.2);