Qitailangのブログ

Webデザイン、碁、Esperanto、自然農法的家庭菜園

Template

連続するリスト項目を1〜8列に等間隔カラムで表示する。

sample1sample2(簡易レスポンシブ - 479px以下1カラム表示) ステップ1 リスト構造は下のように単純なものである。これを短いCSSで均等に横並びカラムで表示することにする。 <div id="item-list"> <ul class="cols-3"> <li>商品01</li> <li>商品02</li> <li>商品03</li> <li>商品04</li> <li>商品05</li> <li>商品06</li> </ul> </div> リスト項目を1列から8列表…

軽量かつ固定幅でも可変幅でも使えるグリッドCSS

sample1(固定幅)sample2(可変幅)sample3(簡易レスポンシブ) 固定幅レイアウトにもリキッドレイアウトにも応用できるグリッドCSSを作ってみた。特徴は、 個々のカラム幅をパーセントで指定するので、固定幅レイアウトにもリキッドレイアウトにも応用で…

UL画像メニューのマウスオーバー画像を切り替える

シンプルなHTMLでマウスオーバー画像をきりかえられる。