いろいろなサイトで使われるようになったSVG。でも、WordPressはなぜかSVGファイルをサポートしていません。その理由と、メディアライブラリを拡張して対応する方法を徹底的に解説します。 ベクターイメージはWebの世界でますます一般的になりつつあります。SVGは標準的なイメージに代わる、スケーラブルでレスポンシブかつ高速な代替手段を提供します。SVGの主なメリットは、どのデバイスからでもくっき…

Simon Codrington

Simon Codrington

デザイナー、開発者で、Webが大好きです。Webやデザインに関することはなんでも興味があり、驚くべきWebサイトをクライアントに作ることに情熱を注いでいます。WordPressに注目していて、テーマ、プラグインをWeb Bird Digitalのチームと作っています。

Loading...

カード型、タイル型などのグリッドをベースにしたレイアウトに、曲線や斜めを取り入れるのが最近のWebデザインのトレンド。CSS3やSVGを使った実装方法と合わせてトレンドを取り入れるヒントをお届け。 Webサイトは基本的に長方形がベースになっています。 もちろんこれには理由があります。古代から伝わった粘土板、パピルス、本のように、Webサイトも文字、言葉、文章が詰まった行でほとんど成り立っています。…

Copyright © 2016, Daniel Schwarz All Rights Reserved.

Daniel Schwarz

Daniel Schwarz

フルタイムのデザインライター、デジタルノマドです。デザインやコードに関する執筆以外には、自身が立ち上げたクリエイティブスタジオ「Airwalk Studios」で作業することもあります。ロンドン出身の24歳。

Loading...

Web制作でもよく使うようになったSVG。インタラクションなどを作るときにハマるのが座標に関する理解です。HTMLと組み合わせて使うときの座標の変換方法について解説します。 クールな人はもれなくSVGを使います。ただ、すばらしいSVGも、DOMやベクターインタラクションと一緒に使おうとすると複雑になります。 SVGは独自の座標系を持っており、viewbox属性を介して定義されます。たとえば、vie…

Copyright © 2016, Craig Buckler All Rights Reserved.

Craig Buckler

Craig Buckler

1995年に処女作としてIE2.0でページを作ったイギリス人のフリーランスWebコンサルタントです。以来、スタンダード、アクセシビリティとHTML5のテクニックの伝道者として活躍し、SitePointでは1000以上の記事を書いています。ツイッターのアカウントは@craigbuckler。

Loading...

SVG使ってますか? 「解像度に依存しないし便利そうだからもっと使いたいんだけど、面倒くさそうで」と思っているWeb制作者の方へ。アクセシビリティを確保しながら、効率よく回せるワークフローを考えてみました。 一般的にアイコンにフォントを使うのはあまりよろしくないとされてきました。なぜならサイズや位置調整が難しく、プロキシブラウザー、CORS(Cross-Origin Resource Sharin…

Copyright © 2016, Hugo Giraudel All Rights Reserved.

Hugo Giraudel

Hugo Giraudel

CSSのゴブリン、Sassハッカー、マージン狂。Sass GuidelinesSassDocSass CompatibilityBrowserhacks 、ほか多くのSass関連の著者。

Loading...