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ライブラリを読み込ませているものもある。参考にしたサイトへのリンクが用意されているため、実際にサイトを訪れて動作を確認してから、それを実現しているテクニックをソースコードで確認できる。