[CSS]ol要素を美しくスタイルし、アニメーションをちょっとだけ加えるテクニック
擬似要素を使って、ol要素を美しくスタイルし、CSS3アニメーションをちょっとだけ加えたスタイルシートのテクニックを紹介します。 CSS3 ordered list styles [ad#ad-2] デモ 実装 対応ブラウザ デモ デモはIE9, Firefox, Chrome, Safariでご覧ください。 擬似要素のアニメーションは、Firefoxのみサポートしています。 デモページ：Demo 1 数字を矩形にスタイルし、ホバーで数字からアローが伸びます。 ※アニメーションはFirefoxのみです。 実装 HTML HTMLは非常にシンプルで、ol要素を入れ子にして実装するだけです。 <ol class="rounded-list"> <li><a href="">List item</a></li> <li><a href="">List item</a></li> <li><a h
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。
第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> <li><a href="hoge">3</a></li> <li><a href="hoge">4</a></li> <li><a href="hoge">5</a></li> <li class="next"><a href="hoge">NEXT »</a></li> </ul> サンプル1： とてもシンプルなページャー とてもシンプルなページャーのサンプルです。 «
![[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える
2014年8月20日 CSS Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！ ↑私が10年以上利用している会計ソフト！ 色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :) サンプル画面内の「HTML」「CSS」タブをクリックでコードが表示されます。IE6, 7, 8, FF, Chrome, Safa
[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
[CSS]順序付きリストol要素を視覚的に美しくスタイルするチュートリアル
プレーンな状態で割とスタイルされるol要素を視覚的に美しくするスタイルシートのチュートリアルを紹介します。 Firefox4でのキャプチャ 順序付きリストを美しくスタイルするチュートリアル HTML HTMLは非常にシンプルなol要素で実装します。 <ol> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
HTML と CSS だけで microdata 対応のオシャレなパンくずリストを実装するサンプル
Google の SERP にパンくずリストを表示させられるようにするための microdata 対応のパンくずリストに対応した、HTML + CSS のみで実装できるオシャレなパンくずリストを作ったので良かったら使ってください。 <div class="breadcrumbs"> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" itemprop="url"> <span itemprop="title">洋服</span> </a> › </div> <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.exam
[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページャー/ページネーションのデザイン << をぶろぐ - Netsket Inc.