一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集

ちょっとしたアイデアや一工夫で、ページのクオリティをアップするCSSとJavaScriptの10のソリューションをSmashing Magazineから紹介します。

CSS & JavaScript 10 Solutions

10 Useful CSS/JS-Coding Solutions For Web-Developers

1. コンテンツイメージをインラインに配置

サイトのキャプチャ

Silverback Giveaway

一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。

テキストやリストが画像に重ならないように、marginを設定します。

HTML

CSS

2. タイポグラフィのトリック

サイトのキャプチャ

CommandShift3

投票のパーセントにタイポグラフィのトリックを使用しています。

パーセントの数字を本来の表示領域より小さい幅にし、「overflow:hidden;」を使用します。

HTML

CSS

3. パネルがオーバーレイで表示

サイトのキャプチャ

MyFamily

ツールチップに似た感じに、パネルがオーバーレイで表示します。左半分は透過してます。

この仕組みはjQueryなどのフレームワークを使用せずに、ごく簡単な2つの関数で実装できます。
透過箇所には、透過PNGを使用します。

HTML

JavaScript

4. 特定箇所をハイライト表示

サイトのキャプチャ

Basecamp

並列に配置した要素の一つをハイライト表示します。テキスト箇所をホバーするとそれぞれツールチップが表示されます。

このエフェクトは二つに切り分けられており、ハイライト表示はCSS、ツールチップにはPrototype.jsを使用します。

HTML

CSS

5. 追従するナビゲーション

サイトのキャプチャ

Clear Focus Designs

ブラウザをスクロールすると、右側のナビゲーションがスライドしながら追従します。

追従には、jQueryのプラグイン「scrollFollow」を使用します。

HTML

JavaScript

6. テキストに対応したサムネイル

サイトのキャプチャ

UX Booth

複数の著者のそれぞれのポストに対応したサムネイル画像を表示します。

各著者にclass名を設け、テキストに対して相対的にサムネイル画像を配置します。

HTML

CSS

7. アーカイブページのレイアウト

サイトのキャプチャ

Warpspire

アーカイブページは多くの場合、リスト形式の長いレイアウトですが、ここではカラムを使ったレイアウトを採用しています。

各エントリーはリスト要素で実装されており、タイトルはh3、説明はpで実装されています。各リストの奇数番には「odd」のclassを割り当て、フロートさせます。

HTML

CSS

8. ホバーで透過の角丸

サイトのキャプチャ

Particletree

これもアーカイブのレイアウトで、ホバー時に透過の角丸を表示します。

JavaScriptを使用しないで、実装します。
ホバー時に表示される透過png画像は右端に設定し、木の画像と重ねて立体的な印象を与えます。

HTML

CSS

9. FlashとCSSのブレンド

サイトのキャプチャ

Hunter Boot

打ち出しの下に配置された4つのパネルをホバーすると、フラッシュが表示されます。

一見jQueryっぽいですが、CSSベースのソリューションです。フラッシュを配置したdivと4つのパネルのdivを用意し、positionでコントロールします。

HTML

CSS

10. タグの人気度合いをグラフ化

サイトのキャプチャ

OMG Durham

タグの人気度合いをグラフ化して表示します。

タグはシンプルなリストで、人気度はインラインの指定で行っています。おそらくサーバーサイドで計算された数値と思われます。
この数値を元に、タグの人気度合いをグラフ化します。

HTML

CSS

sponsors

top of page

©2018 coliss