日記 | ヨモツネット text ja http://www.yomotsu.net/wp/

日記

マークアップ言語で図画やロゴを描く text ja 2010-06-15 http://www.yomotsu.net/wp/?p=586 CSS, HTML 5, SVG

マークアップ言語で図画やロゴを描く

最近、HTML と CSS を使い、Opera のロゴや、ドラえもん、アンパンマンを描画するといったネタをしばしば目にします。例えば HTML と CSS の表現力を利用すれば SVG のロゴを描画することもできます。

border-radius による角丸や transform による変形などを使えばいろいろな表現ができるようになりますが、一般的な CSS はあくまでも文書の装飾であり、図画の描画をするための技術ではありません。CSS のベンチマーク的にネタとして試す分には別にいいのですが…。

次に用意したのは前記のロゴを SVG を用いて描画した demo です。

スクリーンショット : SVG が描画された様子とそのソースコード。ベクター画像なので図画のエッジは綺麗に描画される。SVG とはベクターグラフィクスを描画するためのマークアップ言語 (XML) です。例えば円や矩形、ベジェ曲線の描画、グラデーションなどを利用することができます。Adobe Illustrator のデータに似ています。アニメーションもできるので Flash 4 くらいのことができます。現在は XHTML 内や、img 要素などの埋め込み対象として利用できます。また、HTML5 では <svg> 要素が登場し、より扱いやすくなる予定です。

e.g.

<head>
  <title></title>
</head>
<body>
  <h1>circle !</h1>
  <svg>
    <circle cx="50" cy="50" r="30" fill="#00f"/>
  </svg>
</body>

CSS ばかりではなく、SVG に注目してみるのも面白いと思います。ここでは簡単な図画を例にしましたが、オーサリングツールを使えば虎とか Firefox のロゴを SVG で描画することもできます。

Raphaël を使う

SVG は IE6 の存在もあり、今すぐに実務で使うのは難しいです。いまベクターグラフィックスを描画したいなら Raphaël を利用するとよさそうです。

Raphael は JavaScript でコードを書くと自動でベクターグラフィックスとして出力してくれるライブラリです。コードの書き方は SVG と canvas の中間のような。SVG または canvas のどちらかを書いた経験があればすぐに書くことが出来るんじゃないでしょうか。

試しに Raphael を使用してみました。SVG から Raphaël に置き換える感覚は XML から JSON を書くみたいな。例えば、円を描くには

var paper = Raphael("testDiv", 600, 600);
paper.circle().attr({cx:100, cy:100, r:50, stroke: "none", fill:"#f00"})

とします。

しっかり IE6 でも描画されます (IE には VML として出力されます)。ただし、VML の仕様にあわせて text に transform が使えないなどの縛りがあります。

コメントはありません

Google I/O で気になった部分 text ja 2010-05-20 http://www.yomotsu.net/wp/?p=566 CSS, Firefox, HTML 5, Internet Explorer, Opera, Web, Web ブラウザー

Google I/O で気になった部分

気になった部分の簡単なまとめ。後で見直す用です。

WebM

<video> でも使われることになる新しいファイル形式。動画部分に VP8、音声部分に Ogg Vorbis をつかった Matroska ベースのコンテナ。H.264 と違い、ロイヤリティーフリーのオープンソース。Ogg Theora と違い、高圧縮で高画質。拡張子は .webm

Chrome, Firefox, Opera でサポートする予定。IE9 は VP8 コーデックをインストールすることで利用することができる予定。Safari は…どうなるか。ブラウザーのほかにも Skype, Adobe Flash, Android, YouTube などでもサポートしていく。

Adobe Dreamweaver CS5 HTML5 Pack

Dreamweaver CS5 では直接 HTML5, CSS3 はサポートしないけど、エクステンションとしてサポートする。

Google App Engine for Business

SSL (HTTPS) と SQL が使えるようになる

Google Storage for Developers

Amazon S3 みたなオンラインストレージの Web サービス。領域 100GB、転送量 300GB / 月までを無料で利用可能。

Google Font API 

Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
  font-family: 'Tangerine';
}
</style>

コメントはありません

WebFonts として利用できるフリーの和文フォント text ja 2010-05-10 http://www.yomotsu.net/wp/?p=565

WebFonts として利用できるフリーの和文フォント

WebFonts とは、ユーザーのローカル環境に左右されずに CSS でフォントを指定できるとても画期的な仕組みです。

WebFonts の demo を用意したので下記で WebFonts を実際にお試しできます。

WebFonts の demo (IE, Fx, Webkit, Opera で動作します)

WebFonts はとても便利で今まで似なかった表現ができる仕組みですがフォントファイル使用時のライセンスは難しく、本当に使えるのかがわかりづらいです。そこで一つずつライセンスを読み、WebFonts として利用できるフォントをまとめてみました。この記事内でもライセンス条文の抜粋を引用していますが、全文ではないのでフォントの利用時にご自身で再度ご確認ください。もし私の解釈に間違いがあったら指摘していただければ幸いです。

ライセンスが不明だったフォントについては作者さんに直接メールを送らせていただき、回答で OK をいただくことができた作品を紹介しています。紹介記事内のフォントのキャプチャは実際に Windows 7 の Chrome で表示した様子です。

なお、下記の表に出現する語句の定義は次のようにしています。

WebFonts
WebFonts として利用可能か (サーバーに UP してもよいか)
形式変換
TTF から EOT や WOFF などに変換してもよいか
形状簡略化
フォントファイルの容量を軽くする目的で、アウトラインのポイントを一部省略してもよいか
サブセット化
フォントファイルの容量を軽くする目的で、Web ページ内に使用しない文字を破棄してもよいか

M+ FONTS

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK
ライセンス抜粋

あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

IPA フォント

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK
ライセンス抜粋
  1. 受領者はコンピュータにインストールされた許諾プログラムをそのまま、または改変を行ったうえで、印刷物およびデジタル・コンテンツにおいて、文字テキスト表現等として使用することができます。
  2. 受領者は前項の定めに従い作成した印刷物およびデジタル・コンテンツにつき、その商用・非商用の別、および放送、通信、各種記録メディアなどの媒体の形式を問わず、複製その他の利用をすることができます。

M+ と IPA フォントの合成フォント

ライセンス抜粋

この配布物は、IPA フォント と M+ フォント および Bitstream Vera フォントの ライセンスに準じます。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

VL ゴシックフォントファミリ

ライセンス抜粋

M+ FONTS 由来の部分については、M+ FONTS PROJECT のライセンスが適用されます。

さざなみゴシックフォント 由来の部分およびそれらの部品を元に改変した一部の文字については、さざなみフォ ントと同様に修正BSDライセンスとします。

なお、文書への埋め込みなど、フォントとしての再使用を目的としない用途におい ては、以下で言う Redistribution には当たらず、制限なく行えるものとします。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

一部が修正 BSD なので無保証、フォントの著作権、ライセンス条文を表示する必要があります。

手書きフォント「アームド・レモン」 / 筆ペンフォント「アームド・バナナ」

作者のミリメートルさんに直接メールをして確認。ご回答いただきありがとうございました。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

青柳疎石フォント / 衡山毛筆フォント / 青柳衡山フォント T / 衡山毛筆フォント行書 / 衡山毛筆フォント草書 / 青柳隷書しも

ライセンス抜粋

著作権放棄で完全フリーです。改編も自由です。使用についての制限はありません。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

あんずもじ

作者の京風子さんに直接メールをして確認。ご回答いただきありがとうございました。

WebFonts形式変換形状簡略化サブセット化
OK (一部制限あり*)OKNGOK

* 悪用や有害サイトでの使用は NG

梅フォント

ライセンス抜粋

これらのフォントはフリー（自由な）ソフトウエアです。あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

小夏フォント

ライセンス抜粋

この作品は、クリエイティブ・コモンズ・ライセンス by-sa 3.0 の下でライセンスされています。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

CC 3.0 表示-継承なのでフォントの著作権を表示する必要があります。

さわらびフォント

ライセンス抜粋

日本語 TrueType フォントを開発するプロジェクトです。現在、Creative Commons Attribution 3.0 ライセンスの元でゴシック体と明朝体を公開しています（が、開発中なので、まだ文字が多数不足しています）。

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

CC 3.0 なのでフォントの著作権を表示する必要があります。

しねきゃぷしょん

ライセンス抜粋

これまで「しねきゃぷしょん」の再配布を禁じてきましたが、PDFなどへの埋め込みなど再配布に近い使用用途を希望される方がいらっしゃるので、配布に関しては制限をなくすことにしました。改造に関しては引き続き禁止とします。詳しくは同梱のテキストファイルを参照してください。

WebFonts形式変換形状簡略化サブセット化
OK?NGNG

たれフォント

ライセンス抜粋

１２）たれフォントをベースとして違うフォントを作る。

再配布、及びご自分のホームページスペースに置く・・・ＯＫです

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

出島明朝

ライセンス抜粋

Code license:ﾂꀀMIT License

WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

MIT License なのでフォントの著作権を表示する必要があります。

ぬかみそフォント

ライセンス抜粋
  • 当該フォントは、非営利目的および営利目的での使用が可能です
  • 当該フォントは、後述の再配布条件を満たす限り、再配布が可能です
  • 当該フォントは、後述の改変条件を満たす限り、改変が可能です
  • 当該フォントは、後述の改変再配布条件を満たす限り、改変再配布が可能です
WebFonts形式変換形状簡略化サブセット化
OKOKOKOK

ふい字 / まきばフォント / おひさまフォント

作者のふいさんに直接メールをして確認。ご回答いただきありがとうございました。

WebFonts形式変換形状簡略化サブセット化
OKOKNGNG

最後に

特に和文フォントは漢字を含めて数千字と膨大な字数の構成となります。そして、それらを一文字ずつ用意しなくてはなりません。また、作者さんにとってはフォントは作品です。WebFonts として無償で使えるとはいえ、作者さんへの感謝は忘れないようにしましょう。WebFonts として利用させていただく際には著作権表示を忘れずに。

あと、あのフォントもライセンス的に OK などという情報ありましたらコメントなどいただけると嬉しいです。

おまけ

キャプチャをとる際に、1回ずつ CSS の @font-face などを書き換えるのがめんどくさかったため、TTF ファイルをウィンドウ内にドラッグすればフォントが適用できるツールを作りました。Fx で動作し、Webkit では下記の HTML がローカル環境にあるときのみ動作します。

WebFonts 適用確認ツール (?)

5件のコメントがあります

いまどき ? いまさら ? clear fix のコード text ja 2010-03-04 http://www.yomotsu.net/wp/?p=561

いまどき ? いまさら ? clear fix のコード

float によるレイアウトフローをクリアランスする手法として知られる通称 "clear fix"、昔は長いコードを書いていましたが、今ならもっと短くても問題ないです。

しかし、最近見かけたある weblog の記事内では昔から知られる長いコードを利用していたので、日々 CSS を書く皆様はどんな感じにしているのか気になりました。

自分は

element{ /zoom : 1; }
element:after{ content : ''; display : block; clear : both; height:0; }

のようなコードをスニペットにして使い回しています。

昔から知られる clear fix のコードでは content : '.' がありましたが、これは Netscape のための対応です。"." が擬似的に追加されることにより、高さを 0 にしたり、表示を消したりとコードが長くなっていましたが、Netspace に対応しないのならこれらをバッサリなくすことができます。

また、Mac IE をもう対象にしなければいけないケースも少ないでしょう。なので Mac IE 用のコードもバッサリなくせます。

IE 6, 7 は hasLayout を true にすることができればいいので /zoom:1 があれば 6, 7 ともに対応することができます。IE 8 では :before, :after と content プロパティーに対応しているので問題ありません。

いま対応しなくてはいけないような PC 用 Web ブラウザーのことを考慮すれば 4 つのプロパティーを書くだけで対応できます。昔からの clear fix のコードを使っているかたはこの機会にスニペットを更新してみては ?

ちなみに、overflow プロパティーの値を visible 以外にして float のレイアウトフローをクリアランスすることもできますが、この方法はあまり積極的に使わないほうがよさそうです。例えば、Firefox で印刷時に意図しない印刷になってしまうことがあります。Firefox では overflow プロパティーの値が visible 以外の要素内では印刷時に改ページを避けようとするためです。

つまり、overflow:hidden が適用された要素は

  1. 現在のページに収まらなければ改ページして次のページに表示される
  2. 改ページ後、そのページ内に収まらなければページに収まらなかった部分は印刷されない

といった流れになり、印刷時におかしな余白があいてしまったりする原因になります。

あと、Takazudo さん曰く、focus したときなどの outline が切れてしまう問題もあるみたいです。

12件のコメントがあります

Opera 10.50 が新たにサポートした CSS text ja 2010-03-02 http://www.yomotsu.net/wp/?p=560 CSS, Opera

Opera 10.50 が新たにサポートした CSS

本日 Opera 10.50 がリリースされました。Opera 10.05Opera 10.50 では新たに CSS 3 の一部をサポートしています。ちなみにオートアップデートはないらしいです。

Multiple backgrounds

Opera で Multiple backgrounds を利用した様子Multiple background images : ひとつの要素に対して background-image の値を複数適用できる。

e.g.

div {background:url(bg1.png) no-repeat 0 0, url(bg2) repeat-x 0 100% ;}

demo

see also : 3.1. Layering multiple background images

background-origin

背景の開始位置を変更できる。 border から、 padding から、 content からのいずれかから始めることができる。padding-box | border-box | content-box

see also : 3.8. The ‘background-origin’ property

background-clip

背景で塗りつぶす領域を変更できる。padding のエッジからまたは border のエッジからのどちらかを選択できる。 padding-box | border-box

see also : 3.7. The ‘background-clip’ property

border-radius

Opera で border-radius を適用したときの表示角丸のためのプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。

e.g.

div {border-radius : 10px;}

demo

see also : 4.4. The ‘border-radius’ properties

border-image

Opera で border-image を適用したときの表示要素の枠線に画像を適用できる。Adobe Fireworks の 9 スライスのような仕組み。strach |ﾂꀀrepeat |ﾂꀀround に対応。Opera 10.50 では接頭辞は必要ない。Webkit でも既に実装済み。

e.g.

div {border-image : url(border.png) 20 20 20 20 round; }

demo

see also : 5. Border Images

box-shadow

Opera で box-shadow を適用したときの表示要素にドロップシャドウの効果を与えるプロパティー。Opera 10.50 では接頭辞は必要ない。Mozilla と Webkit でも既に実装済み。ただし、box-shadow プロパティーは border-image プロパティーと矛盾が生じるため現在は CSS 3 の草案からなくなっている。

e.g.

div {box-shadow : 10px 10px 20px #000;}

demo

transform (-o-transform として)

Opera で transform を利用した様子要素を移動、拡大縮小、回転、傾かせるプロパティー。接頭辞として -o- が必要。matrix() |ﾂꀀtranslate() |ﾂꀀscale() |ﾂꀀrotate() |ﾂꀀskew() に対応。Mozilla と Webkit でも既に実装済み。

e.g.

div {-o-transform : rotate(45deg);}

demo

see also : CSS 2D Transforms Module Level 3

transition (-o-transition として)

要素の状態が変化したときにアニメーションで遷移させるプロパティー。接頭辞として -o- が必要。ease |ﾂꀀlinear |ﾂꀀease-in |ﾂꀀease-out |ﾂꀀease-in-out に対応。バグなのか :forcus には効かない。Webkit でも既に実装済み。

e.g.

div {-o-transition : background 1s ease;}
div:hover {background:blue;}

demo

CSS Transitions Module Level 3

あと、待望の <video>, <audio> もサポートするようです。Opera 10.50 が対応する形式は Ogg のみです。

また、Opera 10 (Presto 2.2 rendering engin) までのバージョンでは既に次の規則やプロパティー、値などに対応しています。

  • Media queries 規則
  • @font-face 規則 (Web Fonts)
  • color プロパティーの値に RGBA/HSLA 指定と透明度
  • CSS 3 のセレクター
  • background-size プロパティー (-o-background-size として)
  • text-overflow プロパティー
  • overflow-x/overflow-y プロパティー

ここで紹介したように Opera 10.50 が新たに実装するプロパティーの多くは接頭辞を必要としません。そのため、ベンダー接頭辞をつけたプロパティー (-moz-border-radius など) と同時に接頭辞をつけないプロパティー (border-radius など) を書いていた人は恩恵がありそうです。

ちなみに次期 IE でも border-radius プロパティーを実装しそうな様子です。こういった未知の実装のことも考え、新たに登場するプロパティーを利用するときには -ms-、-o- など、各ベンダー接頭辞をつけたプロパティーを同時に書いておくと将来いいことがあるかもしれません。

e.g.

div{
	        border-radius : 10px;
	    -ms-border-radius : 10px; /* IE */
	     -o-border-radius : 10px; /* Opera なくてもいいけどつけてある */
	   -moz-border-radius : 10px; /* Fx */
	-webkit-border-radius : 10px; /* Webkit */
}

2件のコメントがあります

次のページへ

カテゴリー一覧

この Weblog の FEED

この Weblog の FEED