サイトマップやDOM構造など、階層構造のツリービューをリスト要素で実装するスタイルシートのテクニック | コリス

2020/04/12 14 users ツリービュー コリス DOM構造 CSS 間隔

サイトマップやDOM構造や家系図のように親ノードから複数の子ノードに接続線で繋げ、階層構造を明示するツリービューをHTMLとCSSで実装するテクニックを紹介します。 HTMLはul要素でシンプルに実装されており、接続線のカラーや幅や間隔などは自由にカスタマイズできます。 Tree view from unordered list まずは、実際... 続きを読む

[CSS]ナビゲーションやリストなど、inline-block要素の間にできる隙間を解決する方法 | コリス

2012/04/23 118 users コリス NAV Three CSS float

ナビゲーションを実装する時など、ul要素を使って水平に並べると意図しない隙間ができてしまうのを解決する方法を紹介します。 デモ 解決方法 floatでいいんじゃないの デモ まずは、元となるコードから。 HTML nav要素を使い、a要素で各アイテムを実装します。 <nav> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a>... 続きを読む

[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス

2012/03/22 328 users コリス Container 両端 item CSS

実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul... 続きを読む

[CSS]シンプルなHTMLで、美しいパンくずを実装する4つのスタイルシート | コリス

2012/01/24 547 users コリス Opera class Safari Firefox

デモ 実装 デモ デモはCSS3、疑似要素を使用しているため、IE8+, Firefox, Chrome, Safari, Operaでご覧ください。 4つデモは、全て画像を使用していません。 デモページ：ホバー時 実装 HTML HTMLは非常にシンプルで、リスト要素を使用します。 ul要素にid、現在位置にclassを記述します。 <ul id="breadcrumbs-one"> <li><... 続きを読む

[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック | コリス

2011/07/20 48 users ビューポート コリス SEL CSS ナビゲーション

ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とsel... 続きを読む

[CSS]パンくずの実装はどのようにするのがよいかの考察 | コリス

2010/11/10 396 users CSS-Tricks コリス チュートリアル ol要素 CSS

パンくずは何要素で実装していますか？　ul要素？　ol要素？　p要素？ パンくずをどのように実装するのがよいかの考察を紹介します。 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 ... 続きを読む