サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
css.colopixie.com
普通の長方形の画像を表示させるのではなく、正方形にキリトリ(overflow:hiddenを使って)します。(16:9の縦長には未対応) HTML <h2>正方形に切り取る(w:h=100px)</h2> <div class="sqimgageview"> <span class="cut"><img src="http://art27.photozou.jp/pub/994/306994/photo/34967559.jpg" alt="sample" class="cut_image" /></span> <span class="cut"><img src="http://art19.photozou.jp/pub/994/306994/photo/33486834.jpg" alt="sample" class="cut_image" /></span> <span class
下にフッターを固定したり、右下などにページトップボタンを固定したりできます。 IE7からは、position:fixedに対応していますがIE6では対応していないので少し違うやり方でやります。 対応ブラウザ◯ Google Chrome / Safari / Firefox / Opera / InternetExplorer HTML <div class="fixed">固定部分</div> <div id="wrap"> <div class="tit aa"> <span>Title:</span> <h1>ボックスをスクロールしても固定する(IE6対応)</h1> </div> <div class="browser aa"><span class="maru">◯</span> Google Chrome / Safari / Firefox / Opera / Inter
float:leftでふつうはカラムを使ってやりますが、CSS3からは簡単にマルチカラムを作ることができます。 HTML <h2>3カラム</h2> <div class="columns"><p>あああああああああああああああああああああ<br />略</p> <p>あああああああああああああ...略</div> <h2>column-width</h2> <div class="columns"><p>あああああああああああああああああああああ<br />略</p> <p>あああああああああああああ...略</div> <h2>column-gap</h2> <div class="column width gap">><p>あああああああああああああああああああああ<br />略</p> <p>あああああああああああああ...略</div> <h2>column-rule</h2>
このページを最初にブックマークしてみませんか?
『http://css.colopixie.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く