HTML/CSS

デザインとか適応

今回はcss3アニメーションとWebフォント中心に微修正

他にもSVGとかも使える所に入っているので

色々と細かい修正かけて導入していきます

Published on 04/21/2013 at 03:04 under , .

Webフォント導入してみました

css2時代から長々と待たせてくれましたが、ようやくインストールをユーザーにしてもらわないでも、記事を参考に

フォントが自由に使えるようになってきたので、サイトでも導入してみました

WEBフォントサイトまとめ9選!とりあえず一度使ってみませんか?

まだまだファイルサイズが大きい日本語フォントは制約が大きいですが、昔からPhotoShopで作った画像を貼り付けるだけの簡単なお仕事が亡くなって、やっとひとつ制約が取れてきたかんじです

 

Published on 04/20/2013 at 02:26 under , .

スマートフォン時代のcssの在り方

前回のエントリで、スマートフォンだと、ページみにくい話をしたのですが

今回はその続きの話です。

なんとかスタイルシート側の工夫で、スマートフォンでもPCでも快適にサイトが閲覧できるか考え直すために

久しぶりに、css2の仕様書を見直してみたのですが、主な分類はこのようになっています


all全デバイス向け
braille点字出力
embossed点字プリンタ
handheld白黒の携帯画面
printプリンタ
projectionプロジェクタ
screenコンピュータのディスプレイ
speech音声
tty文字のみ出力可能な低機能プリンタ
tvテレビ

このとき久しぶりに気づく

あ、handheldって白黒画面向けなのね・・・


つまり

  • 片手で持てるサイズの画面サイズ
  • 基本フルカラー

この条件を満たすメディアタイプは存在しないということです。


というわけで、結論から言ってしまいますが

smartmediaって名前で、携帯電話向けのメディアタイプを追加すべきではないでしょうか?

他にも、携帯ゲーム機やカーナビ等、それなりのCPUと画面サイズを持ったデバイスは色々とあります。将来的には、IT家電等も、小さな画面+タッチパネルでの操作を持つデバイスの代表的なものの一つに入るでしょう

(実際には、現在それらのメディアはCSS2にそれなりに対応しています。個人的にはそんなことをするよりcss1に完全対応を目指して欲しい所・・・)


ついでに、ぶっちゃけた話。これだけメディアタイプが使われていない原因って、css2で宣言されているからなんですよね。

css1を完全に理解できないと、css2の仕様を取り込めない。でもメディアタイプに宣言されている点字機器や、白黒画面のデバイス、音声出力など、市場の小ささや機器の性能が低い事を前提とするデバイスにcss1の仕様を全て理解させるのは決して現実的な話ではありません。

この様な状況では、過半数以上のメディアがcssを理解するなと言っている様なものです。

なので、私は次の仕様を含んだ、css1の拡張であるcss1.1を作ることを提唱したいです。


メディアタイプsmatmediaをメディアタイプとして追加

上記のとおりですが、正直そこそこ小さい画面+フルカラーのメディアに対する仕様が存在しないのは初期設計のミスであったとしか言いようが無い

@import "foo.css" screen, tv いう形のメディアタイプの

メディアタイプの定義の方法はたくさんありますが、現在一番良く使われているのはこれですので

css1.0程度しか理解できないブラウザに出来るだけ負担をかけないように実装させるためにこの仕様のみくぉcss1の方に落としてあげるべきだと思います

@cssversion

cssのバージョンを、次の様にして定義します。

@cssversion "1.0"

これを文書の先頭で定義してやることで、自分の対応し切れていないCSSがある場合はシート全体の読み込みをパスします。

現在css3に対応しているブラウザとcss2までしか対応していないブラウザの切り分けをしないといけない問題が出ていますが

今後、様々なメディアタイプのスタイルシートの切り分けを行わなければならないことまで考えると、いいかげん、こういうバージョンでの切り分け機能が必要だと思われます。

規格と歴史にはベクトルと質量がありますから。ここを逃すとズルズルと代替手段の無いまま後方互換性の波に飲まれて規格自体が消えかねない所に来ています。

正直、それを考えると、CMS等を使わないでアマチュアがデザインを管理するためには、メディアタイプを有効に使うしかないし、今は、その最大最後のチャンスではないかと思っています。

こんなネットの片隅で叫んでもなかなかうまくはいかないのは分かっていますが、何方かこの危機を感じ取っていただける型の目に留まることを祈るばかりです

Published on 06/12/2010 at 02:34 under .

Safariを中心にCSSでアニメーションをできる規格が進行中…

そうとう昔ですが、CSSに関してアニメーション規格のお話をしたのを思い出したのでここでちょっと掲載。

私のアニメーション規格に関する意見は現在でも変わっていませんが、市場というのは消費者の高度な選択によって決まってくる物なので私がどうこう言っただけで何かが変わるところと言うのはほとんど無いのですよね

アニメーションが出来ること自体に反対の気持ちは全くないので事の成り行きをゆっくり見守っていきましょう

Published on 04/14/2008 at 21:59 under .

Acid3 が正式リリース(今度こそ)

Published on 03/06/2008 at 22:12 under .

HTML5にかかわる情報集積サイトHTML5.JP

すでにXHMTLの方に世界は舵を切り出しているのになんで、HTML5なんて規格をわざわざ作り出すんだろう、という疑問がみんな沸くのですがこんな記事を発見しました。

なるほど、確かにXHTML1.1は無意味に厳しすぎるといわれて共感できないことも無い。あのタグもこのタグも無くなってしまっている。

なるほど、確かにXHTML2.0は文書構造の再現を意識しすぎるあまり、マクロなしのテキストエディタなどで打つと難しいかもしれません。

ですが、全体としてWeb技術はCMSを利用して、開発者やデザイナ以外はHTMLを見ないで済むようにしようと動いています。

「やっぱりこの規格、全体としてみてみればおかしくない?」

と思ったのですが、Web KANZAKIでも似たような事を言ってらっしゃった。嗚呼、やっぱり…。

Published on 02/02/2008 at 15:34 under .

html5の簡単な感想

変更点をざっと読んだ限り

  • 今まで存在した無駄な要素、属性の整理
  • JavaScript関連ですでにデファクトスタンダードとなっていた企画の追認

等がありますが

やはりマルチメディア関連のタグの大幅追加、が大きいですね。

ドラッグ&ドロップを認めるdraggable属性等うれしい追加もありますが・・・

全体的な話をすると

  • canvas、progress、figure等のマルチメディア関連のタグの追加は歓迎
  • 正直blog関連で使われるようなarticle、footer等は過剰仕様の雰囲気
  • form関連のタグはむしろXFORMを理解するべきでHTMLの企画でカバーするのは邪道

かな


ところですごく地味に気になるんですが・・・

strong 要素は部分的な強調ではなく、文章の重要性を表すようになりました。

え? strong要素が強調のために結構まっとうに使われているタグであることをご理解で? ちょっと他の要素の存続はまだ分かるけどその変更は痛い!

撤廃を要請します。

Published on 01/29/2008 at 22:43 under .

Acid2テストの功罪

Published on 01/27/2008 at 20:26 under .

「HTML 5」ドラフト、W3Cが公開

Published on 01/26/2008 at 16:14 under .

XHTML1.1第2版が出る予定なんですね。

上のリンク先の主な改定点を読む限り、きれいな使用のXHTML1.1に、現実を見据えた修正を行うというのがその趣旨ととれますね。

地味に美味しいのがmime-typeを「text/html」と「application/xhtml+xml」のどちらを指定しても良くなったこと。

rubyタグを使いたくってxhtml1.1を待望しているのですが、XHTML1.1で指定されている「application/xhtml+xml」をmime-typeで指定すると、そもそもサイトがIE6で表示されなくなるという罠(IE7ではなんか対応していた)

Published on 10/22/2007 at 07:01 under .