使えるCSSテクニック101選 part2
101 CSS Techniques Of All Time- Part2
Noupeさんのポストより、前回part1と同じく、便利なCSSのテクニックをいくつかご紹介します。サンプルが違うページにある場合はそのページへのリンクも付けてみましたので、どうぞ。
-
ブロックごと選択できるリンク
Block Hover Effect Links
インタラクティブデザインの基本原則のひとつが、リンクの場合クリックできる場所が大きければ大きいほど使いやすいということ。たとえばナビゲーションバーでも、クリックできるところはできるかぎり大きい方が良いですよね。テキストだけでなく、ブロック全体をクリックできるようにするテクニックです。
リンクのリストにblock hover効果を適応する方法
How to Create a Block Hover Effect for a List of Links
サンプルクリックできる範囲をより広くする方法
How To Make Clickable Areas Biggerブロック要素のための”a”タグ
Anchor Tags for Block Elements
サンプル -
A~Zのインデックスのスタイリング
Style an A to Z Index
A〜Z（日本語なら「あ」〜「を」？）などの長いインデックスを見やすく整理するテクニックです。
CSSでAtoZのインデックスをスタイリングする方法
How to Style an A to Z Index with CSS
サンプル -
タイポグラフィテクニック
Typography Techniques
フォント・タイポグラフィに関するテクニックです。文字を雑誌のように格好良くスタイリングしたいときに。雑誌スタイルの秘密ほか
Secrets of Magazine StyleCSSフォント・タイポグラフィ
CSS Fonts, CSS Typography
フォント関系のテクニックへのリンク集です。 -
CSSでページネーション
CSS Pagination
ページネーションの見せ方テクニック。
CSSページネーションリンク
CSS Pagination Linksページネーションの基本
Pagination 101
サンプルやコードはなし。ページネーションの基本について、具体例を挙げて解説しています。ページネーションのためのスタイル
Some styles for your pagination
たくさんのサンプルがあって、全部CSSがダウンロードできます。 -
CSSタブインターフェイス
CSS Tabs
タブインターフェイスを使うと、ひとつのウィンドウでいくつものコンテンツを表示できます。Ajaxベースで即読み込まれるのも良いですね。
横長CSSメニュー
Horizontal CSS Menus
背景画像を使って選択されたタブが「光る」ような効果を出しています。CSSとDOMスクリプトを使ったタブナビゲーション
Navigation tabs with CSS and DOMscripting
上のページそのものがサンプルになってます。CSS、.js、サンプルページがダウンロードできますが、商用利用したいときは一声かけてください、とのことです。タブコントロール
Control.Tabs
ページ右上のボタンで.jsをダウンロードできます。 -
CSSでリード文を飾る
CSS Pullquotes
Pullquoteとは本文から一部抜粋したリード文のことです。通常雑誌や新聞などで見かけるデザインですが、CSSを使ってWebでも同様のスタイルに。
シンプルなCSS引用文
Simple CSS Blockquotes and Pullquotes
通常の引用文（blockquote）と抜粋リード文（pullquote）について。シンプルなデザイン。CSSリード文
CSS Pull Quotes
こちらもシンプル。javascriptとCSSを使った自動リード文
Automatic pullquotes with JavaScript and CSS
本文中ので囲んだ部分をjavascriptで自動的に取り出して表示する方法。スクリプトのダウンロードもできます。
-
CSSで引用文を飾る
CSS Blockquote
ブロッククォートのスタイリング。通常他のサイトや記事から引用するときに使われます。
引用文について
Quotations and citations: quoting text
inlineでことたりるような短い引用文（qを使用）から長い文章の引用（blockquote）まで。画像なしでできる「しゅっ、くるん」な引用スタイル
Swooshy Curly Quotes Without Images
「しゅっ、くるん」…苦しい訳ですいません。画像を使わない、きれいなブロッククォートの見せ方を丁寧に紹介しています。CSSを使った引用文のスタイリング
Styling blockquotes with CSS
画像の引用符を使ったブロッククォート
Blockquotes with Image Quotes
上の二つは画像を使う方法です。 -
スターレーティング（評価）テクニック
Star Rater Techniques
星が5つくらいある簡単な評価システム、最近youtube他あちこちで見かけますよね。
CSSスターレーティング
CSS Star Rate Redux
サンプルページとCSS、画像がダウンロードできます。CSSレーティングセレクタ
CSS Ratings Selectorスターボックス
Starbox
CSSと.js、画像がダウンロードできます。他にprototype.jsが必要。Ajax スターレーティングバー
Unobtrusive AJAX Star Rating Bar
CSS、.js、.phpと画像がダウンロードできます。 -
CSSイメージポップアップ
CSS Image Pop-Up
CSSだけで画像のポップアップを実現するテクニックいろいろ。
クールなCSSイメージポップアップ
Cool CSS Image Pop-upCSSポップアップイメージビューワー
CSS Popup Image Viewerインラインのリンクにポップアップイメージを
Pop-up images on inline links
文章中のリンクにマウスオーバーでサムネイル画像を表示する方法。snapみたいな感じですね。商用に利用するときは寄付してもらえると嬉しいな、とのこと。Hoverbox Image Gallery
サンプル
サンプル等ダウンロードできます。いわく、「ミニlightbox」。でもjavascriptは不要です。 -
CSSサイトマップ
CSS Sitemaps
CSSでサイトマップをきれいに見せるテクニック。ただ羅列するよりずっと見やすくなりますね。
破線を使った階層式サイトマップ
Hierarchical Sitemap with Dashed Lines
サンプルサイトマップスタイラー：CSSとjavascriptでサイトマップをスタイリング
Sitemap Styler: Style your Sitemaps with CSS and Javascript
サンプル1
サンプル2
サンプル3
クリックで下の階層を表示するタイプ。javascript使用。上のサンプル全部のダウンロードができます。個人的にはクリックするまで下の階層があるのがわかりにくい、テキストのクリックが効かない等、あまりユーザビリティに優れてはいないように思います。サイトマップを整えよう
Spruced-Up Site Maps
サンプル
こちらも上と同じようなタイプですが、ずっとわかりやすいです。サイトマップセレブレーション
Sitemap Celebration
シンプル・クリーンなサイトマップ。CSSサイトマップ
CSS Sitemap
サンプル（バニラ）
サンプル（チョコレート）
jQuery使用。たたんだり広げたりできるサイトマップです。本筋と全く菅家ないんですが、サンプルに「バニラ」とかちょっと可愛いくていいな、と思いました。 -
縦・横のセンタリングテクニック
Horizontal and Vertical Centering
CSSで縦方向にセンタリング
Vertical Centering in CSS
サンプル
ネストされたdivで実現しています。CSSで縦・横どちらもセンタリング
Horizontal and vertical centering with CSS
ウィンドウのサイズを変えても、要素を常にど真ん中に配置。縦・横センタリング
Horizontal And Vertical Centering
サンプル
上と同様、ど真ん中に。CSSで縦方向にセンタリングする方法
How to: vertical centering with CSS
[part1]使えるCSSテクニック101選 part1
[記事タイトルについて] 前回Part1に追記したように、実は101コのTipsというわけではなくて「101」というのが「ベーシックな」という意味があるそうで（知らなかったorz）、実のところ「101選」じゃないんですが、前回と今回で結局リンクが100コ近くあるのと、part1と同じタイトルにしたかったので、あえて「101選」にしました。ご了承ください。
タグ: CSS javascript Web Design チュートリアル
Loading ...