Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

Justin Johnson氏がSmashing Magazineにおいて10 Useful CSS/JS-Coding Solutions For Web-Developersのタイトルのもと、WebデベロッパやWebデザイナ向けに役に立つ10のデザインソリューションを紹介している。デザインソリューションの紹介と、それを実現するためめのHTML、CSS、JavaScriptサンプルがまとめられている。

10 Useful CSS/JS-Coding Solutions For Web-Developersで紹介されているソリューションは次のとおり。

• インラインコンテンツイメージ (画像をテキストコンテンツとなじむようにうまく配置する方法)
• タイポグラフィックトリック (文字の一部ををたくみに画像の背後に回り込ませる方法)
• インライン情報オーバーレイ (付加情報をオーバーレイで表示させる方法)
• プロダクトハイライト (リストでひとつの要素だけを強調表示させる方法)
• スライドメニュー (表示されている部分に合わせてスライドするメニューの作成方法)
• オーサーフラッグ (アバターの表示例)
• 文書一覧ページレイアウト (タイトル、要約、Read moreで構成されたページレイアウトの例)
• 透過丸角デザイン (ボックスの特定の角を丸める方法、選択領域は透過)
• CSSとFlashの混在 (FlashとCSSを連動させる方法)
• タググラフ (棒グラフを描画する方法)

シンプルなHTML、CSS、JavaScriptで済んでいるものもあれば、実現するために外部のJavaScriptライブラリを読み込ませているものもある。参考にしたサイトへのリンクが用意されているため、実際にサイトを訪れて動作を確認してから、それを実現しているテクニックをソースコードで確認できる。