[CSS]リスト要素を左寄せぴったりに配置するスタイルシートのテクニック
中黒のような黒丸、四角、数字など、リストの先頭につくマークを左寄せに揃えるスタイルシートのテクニックを紹介します。 対応ブラウザはIE8+で、ネガティブマージンは使用しません。 Align Lists Flush Left ブラウザごとに異なるサイズのマークでも、数字のリストで1桁から2, 3桁と増えても全てに対応できるテクニックです。 まずは、マークアップから。 HTML ulもolもシンプルな実装です。 <h3>Unordered List</h3> <ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul> <h3>Single Digit List</h3> <ol> <li>Lorem ipsum dol
リーダビリティの優れたリストをデザインするための5つのポイント | コリス
読みやすく理解しやすいリストをデザインするための5つのポイントをWeb Design Tutsから紹介します。 How To Design The Perfect List 重要なポイントは「カラー」「スペース」「ライン」「タイポグラフィ」「アイコン」の5つで、これらを効果的にリストのデザインに取り入れます。 単にデザインがきれいというだけでなく、コンテンツとして目立ち、理解しやすく、クリックしやすい、ということも重要な要素です。 Color（カラー） Spacing（スペース） Dividers（ライン） Typography（タイポグラフィ） Icons（アイコン） リストの実装例 Color（カラー） カラーは美しいレイアウトを実装するのに、重要な要素です。リストの項目や背景に効果的なカラーを使用することで、情報を目立たせることができます。 下記の例では、視認性の高いコントラストを
LS - ファイル一覧の出力(Windows95/98/Me / ユーティリティ)
XP時代のGUIを備えた、 高速なファイル一覧の整形出力ツールです。 任意のフォルダ(またはドライブ)以下のファイル/フォルダの一覧情報を、指定した出力ファイルへ出力。各設定によりファイル/フォルダのどの情報を出力するか指定でき、各情報の出力順番変更やソート処理が可能。txt/html/csv(エクセル)の3種類の出力形式サポート。初リリースより役半年経過、品質安定版!! ■一覧出力される項目 ・パス名/フォルダ名/ファイル名/拡張子 名/サイズ/更新日時。 ■機能概要 ・上記の項目のうち、必要な項目だけを取捨選択して出力。 ・その際に、出力順番の変更が可能。 ・さらに、任意の出力項目を基準としてソート(昇順/降順)が可能。 ・サイズ単位は、Byte/KB/MB/GBの指定が可能。 ・項目の区切り文字には、空白/タブ/カンマ/無し/スラッシュの指定が可能。 ・ドラッグ＆
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」:phpspot開発日誌
大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」 2010年01月20日- jQuery Plugin: LiveFilter 1.0.1 | Mike Merritt | Digital Inferno 大量のリストから目当てのものを瞬時に探せるようになるjQueryプラグイン「LiveFilter」。 １ページ内にリストが多く表示されていると探すのが大変ですが、LiveFilterを使えば瞬時に対象を探すことができます。 インプットボックスに検索したい文字列を入れると、一気に対象が絞り込まれ、好みのものがすぐに見つかるでしょう。 そんなの、グーグルツールバーやページ内検索を使えばいいじゃないか、という方もいると思いますが、それらの存在が知らない初心者の方に向けたページの場合は威力を発揮しそうです。 パソコン中級者や上級者の方に向けても、
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
[CSS]リスト要素を使用したスタイルシートの5つのトリック
ul, ol, dl要素を使用したスタイルシートの5つのトリックをPieter Beulqueから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> <li><span>Lorem ipsum dolor ... elit.</span></li> <li><span>Aliquam ... eu risus.</span></li> <li><span>Vestibulum ... neque.</span></li> </ol> </
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]パネルを水平方向にスライドしてエリアを拡大するスクリプト -sliding menu revisited