日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Webの高PPI対応はどうするのだろう
DPI(Dot per inch)といい、PPI(Pixel per inch)といい、同じ意味である。本来、DPIは印刷に対して用いられ、PPIは、ディスプレイに対して用いられるのだが、本質的に意味するところは同じである。 印刷やディスプレイの表示は、細かな点をもって表している。この点が細ければ細かいほど、人間の目には、自然に見える。しかし、あまりに細かすぎるのは、コストがかかるし、また現代の技術では難しいということもある。 今日、日本において、紙への印刷は、最低でも数百DPIはある。漢字を表現するには、ある程度の細かさが必要なのだ。 ところが、ディスプレイは、いまだに、紙の質に達していない。デスクトップに使われるディスプレイは、通常96PPI、高くても、120PPI程度が関の山である。携帯電話などの小さいディスプレイは、200から300PPIのディスプレイを備えるものもある。しかし、こ
css3-text-layout（W3C）におけるウェブ縦書き議論の現場報告
もしかして、これ、大変なことを議論してない？ と思ってまとめてみました。W3CのML原文に当たっていないため、なにか誤解しているかもしれません。また抜けもあるかも。どうかご容赦されたし。
Bulletproof @font-face: Smiley variation
CSS の @font-face ルールの「安全な」書式として Paul Irish 氏の提唱する Bulletproof @font-face syntax (邦訳: hail2u.net - Weblog - 安全な@font-faceの書き方(抄訳)) がいつの間にかアップデートされていました。“Smiley variation” と名付けられたその最新版はこうなってます: @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.otf') format('opentype'); } “☺”。そう、「スマイリー・フェイス」です。はじめはなにかのジョークかと思いましたがそんなことはなく、マジでした。これを src プロパティのローカル
印刷用の CSS と jQuery プラグイン
URL のリストを出力するスクリプトを一部修正して Gist に置きました。 このサイトの印刷時のスタイルというものをまったく考えていなかったことに気づいたので、あわてて CSS と jQuery プラグインを書いて対応した。テストするのに結構な量の紙を消費したけど、サイトを見てる人には印刷してもらわない限り工夫が伝わんないってのがなんかもったいないとか思ったので、やったことをまとめて記事にしてみる。 Fig 1: スクリーンショット Fig 2: 印刷プレヴュー CSS ファイル 印刷専用の CSS ファイルは用意せず、汎用 CSS ファイルの末尾に @media ルールで記述している。サイトの規模や運用方法なんかにもよるだろうけど、ファイル数はなるべく減らしたいので。 不要な要素を削除 CSS ではまずは印刷物として必要のない要素を display: none; で削除。各種ナビゲーシ
CSS Text Layout Module Level 3におけるウェブ縦書き議論
CSS Text Layout Module Level 3（W3C）における ウェブ縦書き議論 最終更新日: 2010/06/06 アンテナハウス株式会社 趣旨 CSS Text Layout Module Level 3（W3C）に縦書き仕様をどのように盛り込むかについて活発な議論が行われている。これについて現時点（2010年6月6日）での議論と対策を整理しておく。 スコープ CSS3は、現在策定中の仕様であり、完成は数年先になるであろう。そして、少なくともその先10年から20年程度はその影響は有効であろう。そうなると電子的なコンテンツから紙の書籍を実現する手段であるPDFを通じて紙の書籍に影響を与えるし、さらに将来どういう形になるかは分からない電子書籍に影響を与えることになる。そこで、ここでは検討の範囲を、Webページに限らず、書籍等まで広げて考える。 現状 従来、Webブラウザは縦
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
高レベルな質問です。WEB標準でのtable要素のボックス計算について。 - 今まで、tableを使わずにレイアウトをし... - Yahoo!知恵袋
高レベルな質問です。WEB標準でのtable要素のボックス計算について。 今まで、tableを使わずにレイアウトをしてきたので、少し頭がこんがらがってます。 WEB標準では、ブロック要素のボックスの全ての大きさは、width+padding+borderになり、paddingとborderを含まないはずですよね。 （互換IEの致命的なwidthにpaddingとborderを含んでレンタリングしてしまうバグ及び対策は、既知しております。） 最近、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> （標準準拠モード）で、table要素を使う機会があり、 IE8開発者ツールや、safari google chromeのデベロッパ
CSS3 border-radius で曲線を表現 « Black Box
赤いリボンがくるっと巻いている感じ。左下角も少し曲げ、左の画像とより自然に繋げている。 CSS ルールと対応環境 h2 { border-right : 24px #D00 double; border-bottom: 5px #B00 double; /* Opera, Chrome */; border-radius: 0 40px 90px 20px; /* Firefox */; -moz-border-radius: 0 40px 90px 20px; /* Safari (イマイチ) */; -webkit-border-top-right-radius: 40px; -webkit-border-bottom-right-radius: 90px; -webkit-border-bottom-left-radius: 20px; } 当然ですが、border-radius プ
:visited の挙動が変更に。制作への影響は？ | Web標準Blog | ミツエーリンクス
次期バージョンのFirefoxのプレビュー版 “Mozilla Developer Preview” ですが、新しいアルファ版が公開されました (プレビュー版ですので、常用のものではありません)。 このアルファ版には、先日より各所で取り上げられている、CSSの:visited擬似クラスに関する大きな修正が現在Firefoxで行われています。詳しくは、次のページをお読みください。 CSS によるブラウザ履歴の漏えいを防ぐ取り組み (原文: “Plugging the CSS History Leak”) CSS の :visited に行われるプライバシー対策 (原文: “privacy-related changes coming to CSS :visited”) (二つ目の記事について、翻訳をMozilla Developers Streetに寄稿させていただきました。) :visit
CSS Backgrounds Module Level 4
CSS Backgrounds Module Level 4 Editor’s Draft, 24 January 2024 More details about this document This version: https://drafts.csswg.org/css-backgrounds-4/ Issue Tracking: CSSWG Issues Repository Inline In Spec Editors: Bert Bos (W3C) Elika J. Etemad / fantasai (Apple) Lea Verou (Invited Expert) Sebastian Zartner (Invited Expert) Suggest an Edit for this Spec: GitHub Editor Not Ready For Implementat
第2回コーディングコンテスト（#lp9cc）に応募しようとして挫折したので晒してみる - ysk_lucky-star’s diary
おおよそ2週間くらいかけて、仕事の合間チマチマやってたら結局間に合わなかったので、どんな感じになったか、今回の問題点、実現可能な手法の考察をまとめてみた。今さら感満載でお送りしますｗ スクリーンショット オリジナル 作ったページ 実際のページはこれ 不足点 出来てるところより出来てないところを挙げた方が早いので。 一番上の黒いバーみたいなところ 右上の「Movable Type ドキュメントプラグイン」ボタン画像の :hover,:active の実装 キャプチャの拡大（フツーに画像ファイルにリンクする予定だった） 「個人ライセンス」のダウンロードボタン（2番目と同じ理由） 「関連製品・ソリューション」の画像が違う（ミスですｗ） 上記5点さえクリアされてれば提出できたけど、なんだかめんどくさかったのを後回しにしてたら間に合わなかったｗ 「Movable Type ドキュメントプラグイン」画
CSS による履歴の漏えいを防ぐ取り組み « Mozilla Developer Street (modest)
これは、Mozilla Security Blog の記事 Plugging the CSS History Leak (英文) の抄訳です。Web 開発者の方は Mozilla Hacks の記事抄訳 CSS の :visited に行われるプライバシー対策 も参照してください。 プライバシーの保護は必ずしも簡単なことではありません Mozilla では近く、以前からブラウザ各社が取り組んでいる個人情報漏えい問題の対策を Firefox の開発ツリーに追加します。私たちはこの改善を非常に楽しみにしており、他のブラウザも後に続いてくれることを期待しています。しかし、これは解決が難しい問題であるため、Mozilla がなぜこのようなアプローチを取ることにしたのか説明しておきたいと思います。 履歴の取得 Web ページ上のリンクは、ユーザがそのリンク先を訪れたことがあるかどうかによって見た目が
とてもCSSハックが面倒ですので、何か用意してください
IE9のベータ版が公開されて間もありませんが、すでにいろいろとCSSハックが解明されていますね。 Firefox3.6以降のCSSハック IE9へのCSSハック いやー、こういうの見つけ出しちゃう方ってすごいですね。ChoromeとかOperaなんかもドンドン見つけてしまってください！ と、思うのですが、なんだか実装者が面倒になる一方ですよね。こういうの。 そろそろ特定のブラウザだけにCSSを指定する方法を準備してもらいたい 各ブラウザのW3C仕様への準拠がドドドーっと進んできていますので、これからはもうCSSハックとかはいらなかなーとか思ったりもします。実際に、PC用のサイトをコーディングして、最近FirefoxやSafariへのハックを使った記憶がありません。 ただ、今後僕たちが担保しなきゃいけないデバイスがめっちゃ増えていった時のことを考えると、今のうちから何かしらの対策を練っておい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML+CSS templating
css3- text-layout（W3C）におけるウェブ縦書き議論の現場報告②
HugeDomains.com
Multicol Google Search更新 / 新しくなったGoogleのSERPについて (agenda)
::before ::after を使いたいんですけど : The Trap of Web Design
わずか四文字でIE6/7/8を区別するCSSハック | コリス