タグ

2015年3月29日のブックマーク (3件)

  • Textures.js - SVGをパターンで塗りつぶし MOONGIFT

    SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。 そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。 Textures.jsの使い方 デモです。線は素のSVG(d3.js)で描いて、その内容をTextures.jsで描いています。 ライン系。 色の変更もできます。 線を細くしたり、間隔を調整するのも簡単にできます。 サークル、ドット系。 こういう特定のパスを描くことも、自分でカスタマイズすることもできます。 SVGで描いているとついベタ塗りになってしまいがちですが、さらにその描画内容をパターンで描けるようになるとカラーだけでなく、グレースケールで表現した際にも分かりやすくなりそ

    Textures.js - SVGをパターンで塗りつぶし MOONGIFT
  • レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編 | SEO Packブログ by ディーボ

    ビューポートとメディアクエリを設定した後は、スマホ用のcssを調整しながら各デバイスに対応していくわけですが、その際によく使う、cssのポイントをご紹介します。 画像を可変にする レスポンシブデザインは、ビューポートの設置によって表示されるサイトの表示領域がデバイスのサイズへと変わります。その横幅に対して画像を可変にします。 下記の設定で、最大でも実寸サイズとなり、画面サイズからはみ出すことを防ぐことができます。それ以下のサイズの場合は画面幅に合わせて縮小されます。 img {max-width:100%;} スマホを横にしても文字サイズを変えない デフォルトでは、スマホを横にすると横幅に応じて、文字サイズが大きくなります。これはこれで見やすいですが、文字数が多い時など、デザイン上フォントサイズを変えたくない場合は、スマホ用cssに下記タグを追記します。 body {-webkit-te

    レスポンシブデザイン簡単導入法02 – よく使う項目まとめ編 | SEO Packブログ by ディーボ
  • ウェブサイトやメルマガ用のテキスト作成に便利なウェブサービス5選

    業務でウェブやメールマガジン、SNS向けの文章を作成する場合、一般的な業務で文章を書くのとはまた違った、さまざまなテクニックが要求される。今回はこうした用途に適した、文章作成時の補助ツールとして重宝するウェブサービスをまとめて紹介する。外部のサイトということで、利用にあたっては社内のセキュリティポリシーに違反しないよう、予め確認を取った上で、どしどし活用してほしい。 ◇ワンクリックでExcelHTMLのテーブルに変換「TABLEIZER!」 「TABLEIZER!」は、Excelの表を貼り付けるだけで、ワンクリックでHTMLのテーブルに変換してくれるツール。フォントサイズ、ヘッダ部分のカラーを指定できるほか、スタイルシートを使わないよう指定することもでき、手持ちの表を手軽にウェブに貼り付けたい場合に便利。

    ウェブサイトやメルマガ用のテキスト作成に便利なウェブサービス5選