タグ

list-styleに関するharu135のブックマーク (3)

  • CSSで1行目の見出し項目をぶら下げインデントする|web bibo

    注意書きや箇条書きなど段落の1行目に見出し項目がある文章で、項目を目立たせるために、2行目以降を字下げすることがあります。これを簡単に実現する方法です。 注意書きとか箇条書きなど、非常に使う場面が多いと思うのでので、かなり役立つテクニックです。ていうか、このテクニック皆さん知ってますよね。。。一応、CSS初心者の方向けということで載せておきます。 HTMLコード <ul> <li>※ああああああああああああああああああああああああああああああああああああ</li> <li>※いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</li> <li>※うううううううううううううううううううううううううううううううううううううううう</li> </ul> CSSコード ul { list-style: none; width: 250px; font-size: 0.8em; lin

  • [CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル

    階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 Breadcrumb Navigation with CSS Triangles デモページ [ad#ad-2] HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><a href="#">トップページ</a></li> <li><a href="#">第二階層</a></li> <li><a href="#">第三階層</a></li> <li><a href="#">第四階層</a></li> <li><a href="#">現在位置</a></

  • list-style-position-スタイルシートリファレンス

    list-style-positionプロパティは、リストの先頭に表示するマーカーの表示位置を指定する際に使用します。 ■値 outside マーカーがリスト内容の領域の外側に表示され、マーカー以外の部分がインデント(字下げ)された形になります。 inside マーカーがリスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃います。 HTMLソース <ul style="list-style-position: outside"> <li>一でも<br>にんじん</li> <li>ニ足でも<br>サンダル</li> <li>三艘でも<br>ヨット</li> </ul> <ul style="list-style-position: inside"> <li>一でも<br>にんじん</li> <li>ニ足でも<br>サンダル</li> <li>三艘でも<br>ヨット</

  • 1