抄訳 RDFa Lite 1.1
この文書はRDFa Lite 1.1 (W3C Recommendation June 07 2012)の一部を日本語に訳したものです。正確な仕様についての情報を得たい方は、上記URLを参照してください。 Table of Contents 1. はじめに 2. 属性 2.1 vocab、typeof、property 2.2 resource 2.3 prefix 1. はじめに RDFaの完全な文法 [RDFA-CORE] は、人間関係や場所、イベントなどの構造化されたデータをHTMLやXML文書でかなり複雑な形で表現する事ができるよう、基本的なものから高級なものまで様々な機能を規定しています。それら高級な機能は時に構造化されたデータについてあまり詳しくない制作者によるRDFaの利用を難しくしています。この簡略化されたバージョンのRDFaは構造化データの世界の優しい手引きで、Webペー
W3CDTFとHTML5の日付と時刻の違い - Weblog - Hail2u.net
てっきりHTML5のtime要素のdatetime属性などで使われる日付と時刻のフォーマットはW3CDTFだと思い込んでいたんだけど、違った。ISO 8601というわけでも、W3CDTFのようにそのサブセットというわけでもないので、パースする時はそこそこ気をつける必要がありそう。知らなければ幸せだったような気がしないでもない。 日付けと時刻の間のT A "T" (U+0054) character or a U+0020 SPACE character Tの代わりに半角スペースでも良い。ISO 8601では許可されないので、ISO 8601のパーサーではエラーが起こる可能性が高い。 タイムゾーンの: Optionally, a ":" (U+003A) character コロンは省略可能になっている。これはISO 8601と同じ。Nu Validatorとかは非対応なのでエラーになる。
ベンダー独自拡張について取り上げること
Webの世界は独自拡張だらけなのでそのことについて積極的に知る必要はある。けどそれについて個人的に使い方とかを具体的に書くことはリスクでしか無い。どうやって使うものかとかは大体ベンダー側がドキュメント化していて、それは変更があったら修正されるので、それにリンクを張れば良い。修正することのないであろうブログ等で具体的に書くのは意味がないを通り越して害悪になりうる。Twitterとか流れて忘れられるメディアなら良いけど。 例えば::-moz-placeholderとか::-webkit-input-placeholderとかいう便利な代物がある。プレースホルダー文字列のスタイルを指定するための擬似なんとかだ。便利というか場合によっては必携に近いので、これについて書きたい気持ちはわかるんだけど、どういうものかということならともかく使い方をWebに流すのは害悪にしかならない。まず間違いなくどちらか
Inkscapeでちゃんと移動させる - Hail2u
Inkscapeでオブジェクトを移動させたりする時に適当にドラッグアンドドロップとかでやるとtransformプロパティーでtranslate()関数を使った形の移動が行われる。出力されるSVGのサイズの節約などのためにちゃんと(?)移動させたい場合はメニューのオブジェクトにある整列と配置を使ったり、変形ダイアログで相対移動のチェックボックスをオフにして座標指定で移動させる必要がある。 Inkscape's Transform Dialog 既にtransformプロパティーがついてしまっている場合はメニューの編集からXMLエディタで消した後にちゃんとやり直すとか……なのかよくわからない。他になんかちゃんとやり方ありそう。 スクリーンショットみたいにWindowsのInkscapeのUIフォントをまともに(Segoe UIとメイリオの組み合わせに)する方法は思い出せたら書く。
HTML -> CSS -> SVG -> CSS
HTMLで参照しているCSSでSVGを参照する……まではマイナーとはいえ使っている人はいると思う。これでまぁスケーラブルな画像という条件は満たせるのだけど、せっかくSVGではCSSを参照できるのだから、そのCSSでSVGのスタイルも指定できたら色々便利でリソースの節約にもなるんじゃないかという実験……が失敗に終わった話。タイトルわかりづらい。 Demo: HTML -> CSS -> SVG -> CSS SVGでCSSを使う方法は簡単で、<?xml-stylesheet?>を使うだけ。CSSでスタイルを書きやすくするためid属性を指定しておくと良い。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml-stylesheet type="text/css" href="test.css"?> <svg id="foo"
Blosxom Fanatics
Blosxom FanaticsというGitHubのオーガニゼーションを作った。具体的に何かBlosxomを啓蒙するとか懐かしむ活動を行う場とかそういうわけではなく、単にBlosxom関連のゴミを一手に引き受ける非営利組織。例えばとりあえず作ってみただけのBlosxomクローンを捨てたり。自作のプラグインになんかあった時に修正するためにリポジトリは作っておきたいけど、積極的にメンテナンスする気はないんだよなぁ……という時にこっそり捨てたり。 なので「昔使ってた。プラグイン(フレーバー)まだ残ってるので捨てたい！」という人とかは気軽にどうぞ。参加希望はJoin Blosxom Fanatics!というIssueからで、なんとなくでOwnerかCommitterとして追加されると思う。 プラグインやフレーバーを捨てる時はpluginsやflavoursをforkせずに直接いじっちゃうと良い。ゴ
効率の良いBlosxomプラグイン
Blosxomではプラグイン同士が連携することはほとんど考慮されていない。プラグインで何でも出来るけど、なんでも効率的にできるわけではないということで、ここらへんはBlosxomの語られていない闇の部分(誰も興味ないから)。例えばhead.flavourでエントリーのタイトルとかを利用しようとするとプラグインが必要になるので書くわけだけど、いずれblosxom.cgiが読んでくれるファイルを自前で読まなくてはならなくてスーパー非効率的。 上で例として挙げたpermalinkでエントリーのタイトルをtitle要素にぶち込むプラグインというのを考えてみる。ストレートに実装すると、better_titleやstorytitle、entry_titleみたいにheadサブルーチンでエントリーファイルを読んでタイトルを切り出して変数に格納することになる。これをどうにかして自前でファイルを読まないよう
Sassの存在意義への補足
Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはいくつもあるが、それらはだいたいユニークなクラス名を持っている。例えばTwitter Bootstrapで2カラムレイアウトを作る場合は以下のようなHTMLにしなくてはならない。 <div class="row"> <div class="span4">...</div> <div class="span8">...</div> </div> div要素はsectionやaside要素などを使っても良いが、クラス名はこうでなくてはならない。Sass (やLESS)があ
なぜnormalize.cssなのか
リセットでは弊害がありすぎるとか、ノーマライズの控えめなところが良いとか、まぁいろいろだとは思う。僕はそもそもリセットとかノーマライズとか自分で書いていないルールを取り込むのが好きではないので、なるべくその類のものの使用は最小限に抑えたい。YUI CSS Resetなどでは好むと好まざるに関わらず全て取り込まないとならないけど、normalize.cssではブラウザ間での差異を統一するための各コードが独立しているので、必要なものだけを取り込むなどというような使い方も難しくない。そういった自分の書くCSSとブラウザー側の実装の緩衝材(polyfill)として機能するというところがnormalize.cssを気に入った理由で、これからも使っていきたい理由。 各ルールを個別にインポートできるようにした形でnormalize.scssを作ったのはつまりそういうことで、Sassで手軽に使えるように…
ボタンの押し込みをCSSで表現する
時代は:active！ タッチ・デバイスに:hoverなどない！ みたいになりつつあるような気がしないでもないので、ボタンの押し込みの表現を色々考えている。とは言ってもタッチ・デバイスでは:active擬似クラスもいまいちアレなのでまだあんまり意味なかったりするけど。三周回ってデフォルト使えみたいな感じになっている節もある。ですよねー。 Demo: Pixel Pushing padding 一番のメジャーで安定のクオリティー。 .test { padding-top: 10px; padding-bottom: 10px; } .test:active { padding-top: 11px; padding-bottom: 9px; } 欠点はpx単位でpaddingプロパティーを制御せざるを得ないのでスケーラブルにしづらくなること。 position ボタンのテキストだけでなく全体を
ベンダー拡張プリフィックスを使いまくり更新しまくろう
ベンダー拡張プリフィックスはそれそのものがWebを破壊することはないし、ベンダー独自のプロパティーや関数が数万追加されて使われまくったとしても本当はWebは壊れない。またその文法が変更されても修正または追加すれば対応できるし、その余裕は十分にある。つまり壊れるのはほとんど全てのケースで開発者の怠慢に過ぎないので、ちゃんと仕様と実装を理解して必要ならば寝る間を惜しんで修正作業に血眼になるべき。みたいな実践を伴わない意識を僕は持っている。 なので憂うべきこの現状は、IE6が拡散して残り続けたことと同じようにベンダー側ではなくWeb開発者側に非があると思っている。 コピペしない 更新する ドキュメントを読む Web開発者たちがこう心がけるだけで良いんじゃないか。ベンダー拡張プリフィックスに変わる新しい何かとかはそれにより起こる混乱を考えるとぞっとする。 ただそれらベンダー拡張プリフィックス付きの
border-*-radius: 100%
あんまりborder-top-left-radiusプロパティーとか使ったことなかったのでスケーラブルな半円をborder-*-radiusプロパティーを組み合わせて作ろうとしてうまく行かなかった。スケーラブルにするのは仕様の理解と一工夫が必要なようだ。100%が100%じゃないことがあるので。 Demo: border-*-radius: 100% デモを見るとわかる(わからない)ように組み合わせによって100%が50%になってしまう。角を丸めた時にその丸まりが重ならないように適当に値を小さくして丸めるとちゃんと仕様で決められていた。つまりデモの最後の例のように縦と横の丸めを別々に指定して重ならないようにすれば、意図した通りに角を丸めることができるだろう。 例えばおわんを伏せたような半円を作りたいなら以下のようなCSSを書けばいける。 .test { border-top-left-ra
CSSのelement()関数
せめてWebKitに実装されてからとか思ってたけど、CSS Image Values and Replaced Content Module Level 3がLast Callになったのでいい機会ということにしてelement()関数についてエントリを書く。element()関数は任意のIDを引数に取ることができ、その要素を画像として参照できるというなかなかの荒業な関数。具体的には画像のサムネイルを簡単に作成できるとかそういうものをイメージするとわかりやすいと思う。 Demo: Filmstrip View いわゆる「フィルムストリップ」のようなものを作るデモだけど、element()はまだFirefox 4以降でしかサポートされていないので、ChromeやSafariなどでは意図した通りに動かない。Firefoxなら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
Blosxom: monthviewプラグイン
月毎のビューの時にflavourをサクっと切り替えるmonthviewというBlosxomのプラグインを書いた。list_title_at_monthの汎用版みたいな感じ。 story.monthviewという名前でflavourを作って置いておくと、story.$default_flavourの代わりにそっちを使うというもので、例えばこのサイトのように月毎のビューではリスト表示にするとかできる。head.monthview等がない場合はデフォルトのflavourをそのまま使うのでローコスト。とは言うもののリストにする場合はul要素で括らなくてはならないので、多くの場合はhead.$default_flavourをコピーしてhead.monthviewを別に作らなくてはならない事になる。ただし$monthview::enabledという月毎のビューの時だけ1を返す変数を用意しておいたので、
2012年のMedia Queries
2011年にはMobile Firstという手法が浸透した。当初は多分に技術的な事情によるもので、先に低解像度向けのスタイルを書くことによって、高解像度向けのスタイルで使われる大きな画像を読み込まれないようにするというテクニックでしかなかった。しかし、結果としてコンテンツ重視でCSSを書きやすくなることがわかり、急速に浸透することになった。Media QueriesはそんなMobile Firstの中核をなす技術だが、その使われ方は限定的なもの(ほぼmin-widthとprintだけ)だ。2012年にはそこらへんも変わってくるんじゃないかと思う。 @media screen and (min-width: 481px) { /* do something */ } こういった強く「スマートフォン」を意識した書き方をするのではなく、コンテンツに応じて切り替えポイントを探る必要があるだろう。例
フロートした要素に続くリスト
通常フロートした要素とデフォルトの文書フローで配置された要素は重なります。CSS 2.1仕様書のフロートの解説にある図Dがその例です。なので、通常フロートした要素に続くリストはそのブレット(や数字等)がフロートした要素の下に隠れてしまいます。この挙動には結構困らされることが多いですが、実はoverflow: autoとすると簡単に回避できます。 Demo: ul after floated element デモのようにリストにoverflow: autoするだけで、キレイにリストが配置されるようになります。overflow: autoを使った場合と使わなかった場合でどう重なりに違いが出るかわかるように、outlineプロパティーでピンクの線を引いておきました。 これはブラウザの挙動がたまたまそうなったということではなく、実にさり気なくCSS 2.1仕様書にも記述があります。 The bor
引用元のマークアップ
引用で引用元について明らかにすることは大切です。blockquote要素にはそのための属性としてciteが用意されていますが、ほとんど飾りのようなもので、効果的にその情報を表示することは出来ません。じゃどうすれば良いのかというような話です。 figcaption要素で引用元の情報をマークアップし、blockquote要素と共にfigure要素で括るというのがどうやら王道なようです。 <figure> <blockquote cite="http://example.com/"> <p>Lorem ipsum dolor sit amet.</p> </blockquote> <figcaption> <p><cite><a href="http://example.com/">Example Website</a></cite></p> </figcaption> </figure> bl
不明なCSSセレクター
ブラウザーがCSSをパースする際、不明なセレクターに遭遇するとどうなると思いますか？ 実はそのセレクターを含むルール全体が無視されます。何を当たり前のことを言っているんだと思われるかもしれませんが、そのルールが複数のセレクターを持っていて、そのうちひとつだけが不明なものだとしてもルール全体が無視されるということはあまり知られていないような気がします。知られていないというよりも意識する必要があまりなかったという方が近いですかね。 つまり以下のようなCSSコードは無意味です。 :-moz-any(article, aside, nav, section) h1, :-webkit-any(article, aside, nav, section) h1, :matches(article, aside, nav, section) h1 { color: red; } CSS4の:matche
:targetでpadding-top
ちょっと何を言っているのかよくわからないですね。つまり:target擬似クラスでpadding-topを使うことによって、アンカーでページ内ジャンプ(<a href="#foo">...</a>とかで飛ぶやつです)した時に上部に余白をとってやろうというアイディアです。こうすることによって上部にメニューを固定していても重ならなくすることができるでしょうし、そうでなくても多くの場合ジャンプした先のコンテンツに対してキレイに余白が確保できるんではないかと。 Demo: Refine Anchor Jump with :target Section #4に飛ぶリンクはデフォルトのもので、描画領域の上端に見出しが来てしまっています。Section #7に飛ぶリンクが:targetを使って改良したもので、上部に少し余白が確保されていることと思います。 #test7:target { padding-t
mit-license.org
Open Source InitiativeのMITライセンスのページのURLを使ってMITライセンスと明示している人は結構多いと思います。ライセンス全文コピペするの面倒ですしね……。ただその場合は権利者の名前等を予め書き、ライセンス条項については以下のURLを参照……などと注意書きも含めた方が無難です。そういうのを「忘れるし！ 面倒だし！」と思ったRemy Sharpがmit-license.orgというウェブサービスを作ってくれました。 登録するとユーザー名をサブドメインとしたURLが確保されます。例えば僕の場合はhail2u.mit-license.orgです。このページを見るとわかるように権利者の名前と発行年、オプションとしてWebサイトのURLにリンクを張れたりもします。 curlでJSONを送りつけるという方法でも登録できるみたいですが、JSONファイルの登録とバッティングした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
