お久しぶりです。 パラジです。 今回はHTML5のSVG要素についてです。 本日もHTML5とか勉強会に参加してきました。 http://html5j.komasshu.info/ri35th.html 勉強会ではWeb OSのお話をしていました。 Web OSはHTML5 + CSS3 + JavAScriptでいろいろなことが実現できるので 夢がひろがりますね(小学生並みの感想) さて、勉強会の内容とは全く異なることを書いていこうかと思います。 まず、HTML5で図形を描画する際には、canvasというHTML5の新要素を使うことが多いと思います。 (僕もちらっと書いたことがあります。機会があれば公開して行きたいと思います。) 今回紹介するSVGと、Canvasの違いはベクターベースか、ピクセルベースで描画しているかにあります。 要するに、SVGは関数で描画してあるた
SVG オプションダイアログボックスで設定を行い、「OK」をクリックします。 ※ 「詳細オプション」ボタンをクリックすると、さらに設定項目が表示されます。 SVG プロファイル : 文書型定義(SVG XML DTD)を指定します。 文字 : テキストの保存形式を指定します。 サブセット : ファイルに埋め込む文字を指定します。 参考方法 : ラスタライズされた画像を埋め込むか、リンク配置にするかを指定します。画像を埋め込むとファイルサイズがその分大きくなりますが、画像は閲覧環境に依存せずに必ず表示されるようになります。 Illustrator の編集機能を保持 : AI ファイルを SVG ファイルに埋め込むことによって、Illustrator 固有のデータを保持します。そのため、このオプションを有効にするとファイルサイズは大きくなりますが、後から Illustrator で修正を加える
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは? まず始めに、SVGとは何か?の簡単な説明です。 SVGとはScalable Vector Graphics(スケーラブルベクターグラフィックス)の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル(ドット)ごとに色を表現したもので、総じてラスター(ビットマップ)画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグ CSS JavaScript Google Map
二度目まして。デザイナーの野田です。 レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました! レスポンシブWebデザインとは 「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。 現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル
入力欄・ボタン width: ***; height: ***; フォーム部品の大きさ指定する background-color: ***; フォーム部品の背景色を指定する (focus) background-color: ***; フォーカス時の背景色を指定する border: ***; フォーム部品の境界線を指定する padding: ***; フォーム部品のパディング(内側の余白)を指定する (focus) outline: ***; フォーカス時のアウトラインを指定する scrollbar-***-color: ***; テキストエリアのスクロールバーの色を変える line-height: ***; テキストエリア内の行の高さを指定する 部品グループ background-color: ***; 部品グループの背景色を指定する border: ***; 部品グループの境界線を指定
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く