SVGをもっと使いこなすために知っておきたい、HTML DOMとSVG座標の相互変換
Web制作でもよく使うようになったSVG。インタラクションなどを作るときにハマるのが座標に関する理解です。HTMLと組み合わせて使うときの座標の変換方法について解説します。 クールな人はもれなくSVGを使います。ただ、すばらしいSVGも、DOMやベクターインタラクションと一緒に使おうとすると複雑になります。 SVGは独自の座標系を持っており、viewbox属性を介して定義されます。たとえば、viewbox="0 0 800 600"とすると、幅800ユニット、高さ600ユニット、初期位置(0, 0)と設定されます。このSVGを800 x 600ピクセルの領域に置く場合、各SVGユニットは画面のピクセルに直接マッピングされます。 しかし、ベクター画像は美しさを保ったまま任意のサイズに拡大縮小できます。SVGは400 x 300の領域にも縮小でき、100 x 1200の領域に大きく形を変えて引
流行なんて関係ない！いつでも使える黄金ウェブレイアウトUIパターン12個まとめ
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
