gihyo.jpサイトのロゴ

週刊Webテク通信

2014年10月第3週号1位は、Bootstrapのあまり知られていない小技集、気になるネタは、Facebookに「関西弁」導入 「いいね！」は「ええやん！」に、「シェア」は……

2014-10-16

ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2014年10月6日～10月12日の間に見つけた記事のベスト5です。

1. あまり知られていないBootstrapスタイルテクニック、小技16個まとめ - Photoshop VIPhttp://photoshopvip.net/archives/69687

「Bootstrap 3 Tips and Tricks You Might Not Know」と「Bootstrap 3 Tips and Tricks You Still Might Not Know」という二つの海外ブログ記事から、Bootstrap 3のあまり知られていない小技を16個ピックアップして紹介しています。

カラムをHTML上での記述順とは違った順番に並べる方法など、あまり知られていないと思われる設定や、カスタマイズに役立つ情報など、参考になる項目ばかりです。

「<h1 class="h2">」といった表記で見出しのスタイルを変えるという発想には感心しました。構造上の見出しの階層が他ページと異なってしまうケースの解決策として、Bootstrapを使わない場合にも使えるテクニックだと感じました。

また、レスポンシブなiframeでの動画の埋め込み用のスタイルが、あらかじめ用意されていることは知りませんでした。

元記事のすべての項目を訳しているわけではないので、興味を持った方は英文の元記事もチェックすることをおすすめします。元記事ではサンプルがCodePenで埋め込まれているので理解しやすいと思います。

図1　Bootstrap 3のあまり知られていない小技集
図1　Bootstrap 3のあまり知られていない小技集

2. The web designer’s guide to social media | Webdesigner Depothttp://www.webdesignerdepot.com/2014/10/the-web-designers-guide-to-social-media/

Webデザイナーのためのソーシャルメディア入門です。デザイナーにとって役に立つソーシャルメディアとして、Pinterest、Dribbble、Twitter、Facebookの4つが紹介されていました。

また、定番ですが、HootSuite、Buffer、TweetDeckの3つが便利なツールとして掲載されています。

ソーシャルメディアを利用する上で、楽しむことと信頼関係が大切という指摘はとても共感できました。

図2　Webデザイナーのためのソーシャルメディア入門
図2　Webデザイナーのためのソーシャルメディア入門

3. checkBo ~ jQuery lightweight Pluginhttp://elmahdim.com/checkbo/

チェックボックスとラジオボタンのデザインをカスタマイズするjQueryプラグインです。チェックを入れたときにちょっとしたアニメーション効果があって面白いです。

あらかじめ複数のサイズが用意されており、モバイルデバイスにも対応しているそうです。

図3　チェックボックス／ラジオボタンをカスタマイズするjQueryプラグイン
図3　チェックボックス／ラジオボタンをカスタマイズするjQueryプラグイン

4. 10+ jQuery Based Free Modal Box Pluginshttp://www.webdesignai.com/jquery-modal-box-plugins/

モーダルボックスを表示するためのjQueryプラグインを10個紹介しています。

ボックスが開くときにアニメーションしたり、背景が暗くなったりと、ちょっとしたエフェクトがうまく使われているものが多いですね。

図4　モーダルボックスを表示するためのjQueryプラグインいろいろ
図4　モーダルボックスを表示するためのjQueryプラグインいろいろ

5. How to Enliven Your Site with Parallax Designhttp://inspiredm.com/15-parallax-web-designs-dont-suck/

パララックス（視差効果）を使ったWebデザインの実例が数多く掲載されています。

パララックスを取り入れたサイトは数多くありますが、中でもうまく使っている例を紹介しているとのことです。

図5　パララックスを使ったWebデザインのショーケース
図5　パララックスを使ったWebデザインのショーケース

そのほか、最近の記事の中から、気になるニュース記事を3つ紹介します。

先週の気になるWebサービス

CSS Gradient Animatorhttp://www.gradient-animator.com/

CSS Gradient Animatorは、グラデーションがアニメーションする背景を作れるサービスです。グラデーションの背景色が徐々に変わっていく効果を簡単に作ることができます。

グラデーションの角度、スクロールの角度、速度が設定でき、色を複数追加していけます。スクロールの角度ってなんだろうと思ったのですが、色数に合わせて生成した大きなグラデーションの背景画像スクロールさせることでアニメーションさせていました。

CSS3のグラデーションとアニメーションを使っているだけで、CSSの記述自体も非常に簡単なのですが、このアイデアを思いつくところが素晴らしいと思いました。

図6　グラデーションがアニメーションする背景を作れるサービス
図6　グラデーションがアニメーションする背景を作れるサービス

おすすめ記事

記事・ニュース一覧