週刊Webテク通信

2014年10月第4週号 1位は,SVG画像をCSSでデザインする方法,気になるネタは,「OS X Yosemite」が正式リリース--無料提供を開始

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

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

1. Styling SVG (Scalable Vector Graphic) with CSS | RealcomBizhttp://www.realcombiz.com/2014/10/styling-svg-scalable-vector-graphic.html

SVG画像をCSSでデザインする方法を解説した記事です。SVG画像はCSSを使って,塗りや枠線を色/グラデーション/パターンで設定できます。

インラインスタイルとしてsvgタグ内に直接スタイルを記述できるほか,HTML内にCSSを記述するか外部ファイルとしてCSSをリンクする方法があります。

また,SVGに対しても「:hover」⁠:active」などの疑似クラスも使用できます。⁠transition」⁠transform」と組み合わせることで,マウスオーバーでじわじわと色が変わるSVG図形などを作ることも可能とのことで,デモも用意されていました。

レスポンシブにSVG画像を配置するテクニックも紹介されています。

図1 SVG画像をCSSでデザインする方法

図1 SVG画像をCSSでデザインする方法

2. 7 Bootstrap Editors for Rapid Development of Responsive Websites - BootstrapBayhttp://bootstrapbay.com/blog/bootstrap-editors/

Bootstrapをベースとした,Webデザイン制作のエディターやビルダーをまとめた記事です。

Webサイトのプロトタイプを迅速に作る際に役立つツールが各種紹介してあり,有料のものが多いようです。

図2 Bootstrapベースのエディターやビルダーまとめ

図2 Bootstrapベースのエディターやビルダーまとめ

3. 36 Examples of Web Design Homepage Layout Conceptshttp://designwoop.com/2014/10/36-examples-web-design-homepage-layout-concepts/

WebサイトのTOPページデザインの,いろいろなパターンを集めています。

Dribbbleに参加しているデザイナーの作品をまとめており,実在するサイトもあればデザイン案だけのものもあります。

図3 TOPページデザインの参考となる作品集

図3 TOPページデザインの参考となる作品集

4. Mobile Editing Apps - iOS Code Editorshttp://haeckdesign.com/blog/favorites/technology/mobile-editing-apps

モバイルでWebページのコードを編集できるアプリをまとめています。iOS向けのものがほとんどですが,Android用のものもありました。

まず最初に紹介されているのが,Mac版Web制作アプリCodaでおなじみのPanic社によるiPad版のDiet Codaで,このアプリは絶賛されています。

iPhoneも6/6 plusで大型化したので,iPadではなくiPhoneでのコード編集も現実味が出てくるかもしれませんね。

図4 コード編集のためのモバイルアプリいろいろ

図4 コード編集のためのモバイルアプリいろいろ

5. 35 New Clean & Minimalist Websites | Splashnology.comhttp://mag.splashnology.com/article/clean-minimalist-websites/13146/

ミニマルでシンプルなWebデザインのギャラリーです。

「≡」のボタンを押すとメニューが出現するハンバーガーメニューを使用しているサイトが目立ちますが,シンプルな画面だとハンバーガーメニューも目立ちますし,UI的に問題ないように思えます。

図5 ミニマルでシンプルなWebサイトのギャラリー

図5 ミニマルでシンプルなWebサイトのギャラリー

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

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

BeeFree | Free email editor to build responsive design messageshttps://beefree.io/

あらかじめ用意されたテンプレートを利用して,レスポンシブなHTMLメールを簡単に作成できるサービスです。HTMLメールの場合,様々なメーラーへの対応を考えるとシンプルなレイアウトしかできないので,このサービスだけで必要十分な機能があると感じました。

PC版とモバイル版の2種類のプレビューができ,HTMLメールとして指定したメールアドレスにテスト配信できるのも便利です。

テスト配信ではBeeFreeのサーバー上の画像がリンクされていましたが,完成後ダウンロードしたHTMLでは画像リンクは相対パスで記述されています。実際に配信する場合は,画像をどこかのサーバーに上げて,HTML上のパスを書き換える必要がありますね。

このBeeFreeを提供しているのはMailUpというメール配信や管理のサービス業者で,このMailUpで配信するためのエディタという位置付けでした。MailUpのユーザーを増やすためのものでしょうが,今後も無償で提供してくれることを期待します。

図6 レスポンシブなHTMLメールを作成するエディタ

図6 レスポンシブなHTMLメールを作成するエディタ

今週の気になるWebネタ

「OS X Yosemite」が正式リリース--無料提供を開始 - CNET Japanhttp://japan.cnet.com/news/service/35055286/

OS X Yosemiteがリリースされました。今回も無償でアップデートできます。ほかにも,Retina 5KのiMacに久々のニューMac mini,商品名に数字が付き始めたiPad Air2にiPad mini 3と,アップル関係の話題で目白押しですね。

わたしもOS X Yosemiteにアップデートして,フラットになったデザインなんかは気に入っていました。しかし,⁠そういえばiPhoneとAirDropできるようになったんだよな」と試してみてもできません。何度も試してダメそうなので調べてみると,Bluetooth 4.0に対応したMacでないと使えないとのこと。

しかも,ほかにもInstant Hotspot,Handoffも使えないそうで,Macが古いせいで目玉の機能が軒並みアウトでした。うーん,これを機会に新しいMacをと考えざるをえません。同様の理由でMacの新調を検討している人も多いんじゃないでしょうか。

著者プロフィール

芦之由(あしのよし)

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

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

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

コメント

コメントの記入