Webデザインの可能性が飛躍的に広がる！SVGパターンを活用しよう
SVGによる背景パターンを解説します。まだ広まっていませんが、優れたデザインが多く、選択肢が増えます。SVGパターンの仕組みを解説し、活かすための6つのツールを紹介します。 ツールが持つ機能と、パターンを知識と組み合わせれば、新しいデザインの扉が開けるはずです。 SVGパターンの仕組みとは 時代を問わず、Webデザインではパターン（模様）を使ってきました。CSSの知識が少なくても、背景に好みの画像をタイル状で並べる方法を知っていると思います。 div { background-image: url("sitepoint-tile.svg"); } 背景にはJPGやPNGなどWeb用の画像フォーマットが使えますが、SVGは効率が良く鮮明で、劣化せずに拡縮できるため、CSSの背景画像にも適しています。 SVG本来のやり方（SVGパターン）で、同じ画像を繰り返し並べて背景画像に設定する方法を詳し
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の領域に大きく形を変えて引
商用可で無料！シンプルで使いやすい1000＋個のフリーアイコンをダウンロードできる Unicons
ウェブ制作はもちろん、ブログ運営や資料・スライド作成まで、なにかと重宝するアイコン素材。今回は、1000個以上のフリーアイコン素材を自由に無料ダウンロード、商用利用できる Uniconsをご紹介します。 ブックマークしておくと、デザイン制作が捗るシンプルで、使いやすいデザインが特長となっています。 シンプルで使いやすい！商用可1000+個のフリーアイコンを揃えた Unicons Unicons は、デザイン制作で便利な、シンプルで使い勝手の良いベクターアイコン素材を、無料ダウンロード＆商用利用できるウェブサービスです。 使い方はとても簡単で、カテゴリ分けされたコレクションの中から、お好みのデザインを選択し、クリックするだけ。 ウェブサイトやブログなどで複数のアイコンを利用したいときは、以下のスタイルシートを読み込み、アイコン用マークアップを追加しましょう。CDNリンクをコピーすれば、直接表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
