タグ

ブックマーク / www.webbibo.com (2)

  • 水平型リストで画像を並べた時の隙間を消す4つの方法|web bibo

    - CSS(スタイルシート)に関する知識・テクニックなどの備忘録 - 文字サイズ 大 中 小 現在のページ: HOME » リスト・メニュー » 水平型リストで画像を並べた時の隙間を消す4つの方法 画像をリストタグで水平に並べた場合、画像と画像の間に隙間が生じます。この隙間を消す方法を紹介します。 XHTML&CSSを記述 li { display: inline; } <ul> <li><img src="images/tips/h_list_space_01.png" alt="HTML" /></li> <li><img src="images/tips/h_list_space_02.png" alt="CSS" /></li> <li><img src="images/tips/h_list_space_03.png" alt="JavaScript" />

    hatesouta
    hatesouta 2009/11/08
    リスト「li」の横並び、水平型、margin
  • CSS(スタイルシート)で連番・項目名などを付ける|web bibo

    contentプロパティを使って、項目の前に「Q.」「A.」を挿入 まずは、HTMLを記述 <dl id="faq"> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> <dt>質問</dt> <dd>テキストテキスト</dd> <dd>テキストテキスト</dd> </dl> 次に、項目の前に「Q.」を挿入するCSS(スタイルシート)を記述します。 <dt>タグにcounter-incrementを指定。任意の値(今回はquestion)を付けます。:before疑似要素を使ってcontent: counter();を指定します。 #qa dt { counter-increment: question; } #qa dt:before { c

    hatesouta
    hatesouta 2009/08/29
  • 1