週刊Webテク通信

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

この記事を読むのに必要な時間:およそ 2.5 分

ネットで見かけた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 グラデーションがアニメーションする背景を作れるサービス

今週の気になるWebネタ

Facebookに「関西弁」導入 「いいね!」「ええやん!」に,「シェア」は…… - ITmedia ニュースhttp://www.itmedia.co.jp/news/articles/1410/08/news061.html

Facebookで使える言語に「日本語(関西)⁠が加わりました。⁠いいね!」「ええやん!」になるほか,⁠コメントする」「つっこむ」⁠シェアは「わけわけ」など,かなりネタっぽい言葉づかいになっています。

これに対して,⁠なんでやねん」が欲しいという反応が結構見受けられました。⁠いいね!」以外のニュアンスのボタンが欲しいという声も根強くあるようで,ここぞとそういったコメントをしている人も少なくなかったです。

たしかにネガティブな話題の場合など「いいね!」が押しにくいケースはありますが,わたしは「いいね!」だけでもいいと思っています。⁠いいね!」ボタンしかないことで,ポジティブな話題が広まっていきやすいという効果もあると考えているからです。それに,⁠いいね!」に続く2つ目が出てくれば,3つ目,4つ目の要望が出てくるはずですからね。

著者プロフィール

芦之由(あしのよし)

Webデザインやサイト制作に役立つブログ記事やニュースをほぼデイリーでお届けするメルマガ「デイリーWebテク」発行人。フリーのWebデザイナー兼イラストレーター&ライター。シャープMZ-80Bからのパソコンユーザーで,Macintosh IIciからのMacユーザー。嫌いな言葉は「IEで見ると表示が崩れてるよ」。

デイリーWebテクの購読やバックナンバーについては,以下の紹介サイトをご覧ください。

デイリーWebテク - Webテク関連の話題を毎日配信 -
URLhttp://www.rgs680.com/dwt/

コメント

コメントの記入