週刊Webテク通信

2013年7月第4週号1位は、背景全体に画像を表示したWebページの作り方とギャラリー、気になるネタは、花火大会の穴場を探せ!「花火大会シミュレーター2013夏」

ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2013年7月15日~7月21日の間に見つけた記事のベスト5です。

1. Large Background Images in Web Design: Tips and Exampleshttp://www.hongkiat.com/blog/oversized-background-image-design/

背景全体に画像を表示したWebページの作り方とギャラリーです。

背景全体にフィットするように画像を配置するために、CSS3を使う方法、CSS2でなんとかする方法、JavaScriptを使用する方法が解説されています。

古いブラウザのサポートを考えるとJavaScriptを使う方法が良いのですが、CSS3を使う方法で十分だろうということでした。

実例のギャラリーもキレイな写真が使われた刺激的なサイトばかりです。

図1 背景全体に画像を表示したWebページの作り方とギャラリー
図1 背景全体に画像を表示したWebページの作り方とギャラリー

2. What’s new for designers, July 2013 | Webdesigner Depothttp://www.webdesignerdepot.com/2013/07/whats-new-for-designers-july-2013/

Webデザイナー/デベロッパーに役立つツールや素材などを多数紹介しています。

掲載されているのは、Webアプリ、JavaScript、iOS開発ツール、レスポンシブWebデザインのためのツールとフレームワーク、アイコン、フォントなどです。

図2 Webデザイナーに役立つツールや素材など
図2 Webデザイナーに役立つツールや素材など

3. エンジニアならトコトンこだわりたい!Markdownエディタ20選【Mac, iPhone他】 | Find Job ! Startuphttp://www.find-job.net/startup/20-markdown-editors

最近ちょっと盛り上がっている、Markdown(マークダウン)記法のためのエディタを多数紹介した記事です。

オンライン/Mac/Windows/iOSそれぞれで使える、Markdownエディタが掲載されています。

リアルタイムプレビューのできるMarkdownエディタが充実してきたことが、Markdownが話題になることが増えてきた原因なのでしょうね。

図3 Markdownエディタ20選
図3 Markdownエディタ20選

4. Responsive Websites Design | Web Design | Graphic Design Junctionhttp://graphicdesignjunction.com/2013/07/responsive-websites-design/

レスポンシブWebデザインの、新しめの実例を多数紹介しています。

ここでレスポンシブサイトの例として取り上げられているSquarespaceは、簡単にWebサイトを構築できるツールとして、最近話題となっているサービスです。

図4 レスポンシブWebデザインのギャラリー
図4 レスポンシブWebデザインのギャラリー

5. 10 Useful Responsive Design Testing Toolshttp://inspiretrends.com/responsive-design-testing-tools/

レスポンシブWebデザインのための、テスト用ツールをまとめた記事です。

ブックマークレットになっているものが使い勝手がいいのですが、プレビュー状態のURLを生成できるツールだとクライアントなどに見てもらう場合に便利ですね。

図5 レスポンシブWebデザインのためのテスト用ツールいろいろ
図5 レスポンシブWebデザインのためのテスト用ツールいろいろ

そのほか、最近の記事の中から、日本の有名サイトに関するニュースを2つ紹介します。

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

Long Shadows Generator - by Juanihttp://sandbox.juan-i.com/longshadows/

最近話題のロングシャドウの効果を、CSSで実現するためのジェネレーターです。

テキストとそれを囲んだボックスのそれぞれに、長い影をつけることができます。色、影のサイズ、透明度、フェードを調整できるようになっています。

気に入ったロングシャドウが完成したら、CSSのコードを表示させてコピーして使用します。ボックスなしでテキストだけにもできますし、ロングじゃなく短い影を作ることも可能です。

カスタマイズ性は低いですが、画像加工ではなくCSSだけでロングシャドウが気軽に使えるところが便利だと思いました。

図6 ロングシャドウのCSSを生成するジェネレーター
図6 ロングシャドウのCSSを生成するジェネレーター

おすすめ記事

記事・ニュース一覧