CSS/JavaScriptデザインソリューション10

    後藤大地  [2009/07/08]

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

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン