タグ

liに関するmobile_snkのブックマーク (2)

  • CSSリストに関する5つのテクニック集:phpspot開発日誌

    5 CSS tricks with lists | Pieter Beulque ul, ol, dt などのリストを使った各種テクニック集が紹介されています。 (1) 数値部分とリスト部分のデザイン分け (2) メニュー風のリスト作成 (3) 最後の要素がフェードアウトするリスト作成 (4) 飲店のメニュー風にスタイルされたリスト作成 (5) 1つのリスト要素を複数行にするリスト作成 HTMLCSSがサンプルとして公開されています。 知っておくと便利そうなテクニックですね。 関連エントリ 便利なCSSテクニック30選 CSSとdivを使った画像先読みテクニック の目次部分のようなリストをCSSでデザインするテクニック

    mobile_snk
    mobile_snk 2009/08/12
    >飲食店のメニュー風にスタイルされたリスト作成
  • li要素などを改行すると、要素と要素の間に半角スペース分の余白が現れる件について調べてみた。 | Blog hamashun.com

    追記:トラバが送れないとの報告を受けて、文末に手動トラバを追加しました。 ナビゲーションなどをリスト要素でマークアップして、display: inline; で横並びにすると、li要素とli要素の間に謎の余白が現れます。 そして、この現象を解決する手段はいくつかあります(参考:リストをinlineで並べた時の余白|CSS HappyLife)。 でも、この余白はそもそも何者で、なぜ現れるのでしょうか。 余白の正体 結論から言うと、この余白の正体は空白類文字です。 marginやpaddingの暴発ではありません。 では、なぜ何もない場所に急に空白類文字が現れるのでしょうか。 この謎を解くには、まずは空白類文字について調べる必要があります。 空白類文字 1 文書文字集合には、多様な空白類文字が含まれている。その多くは、特定の視覚的スペーシング効果を生成するために何らかのアプリケーションが用い

  • 1