週刊Webテク通信

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

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

ネットで見かけた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を生成するジェネレーター

今週の気になるWebネタ

花火大会の穴場を探せ!「花火大会シミュレーター2013夏」 WomanApps(ウーマンアプス)http://www.womanapps.net/news_cHZJhSMeMk.html

昨年の夏,スマートフォンのカメラを向けると花火の打ち上げ場所がARで分かる花火大会アプリがあればいいなというネタを書いたのですが,ついにそういったアプリが登場しました。

花火大会を選び,シミュレーションカメラを起動させると画面に矢印が出て,矢印がiPhoneの画面中央に来るように向きを合わせると,AR花火が打ち上がるそうです。

なお,⁠開催場所が遠く打ち上げ花火が見えない場合は方角のみを示しています」とのこと。実際に近くにいかないと試せないのはしょうがないですね。

しかしこのアプリ,ちゃんと正しい位置を示していればとっても便利な反面,ちょっとでもズレていると批判や苦情が多そうで,人ごとながらちょっと不安です。⁠※実際の打ち上げ場所と違う方角を示す場合がございます」とアプリの紹介文に書いてありますし,ユーザーもお遊び程度に考えてもらえればいいんでしょうけどね。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入