普通のHTMLの書き方
保守しやすく、規模に依存しないHTML文書のために 一般 DOCTYPEで始める 置き換えられるべきまたは旧式のDOCTYPEを使わない XML宣言を使用しない 文字参照はできる限り使わない &と<、>、"、'は名前文字参照を使ってエスケープする 制御文字や不可視文字は数値文字参照を使う コメントではその内容の前後へ空白文字を置く 終了タグを省略しない 空要素の書き方を混ぜない タグや属性値の前後へ空白文字を置かない 大文字・小文字を混ぜない 引用符を混ぜない 属性を2文字以上の空白文字で区切らない 真偽値を取る属性の値は省略する 名前空間は省略する XML属性は使わない data-*とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない デフォルトの暗黙のARIAセマンティックスを尊重する 文書要素 lang属性を追加する lang属性の値はできる限り短くする できる限り
URLUtils.hash (location.hash)とその返す値 - Weblog - Hail2u.net
URLUtilsインターフェイスのブラウザーにおける実装であるLocationオブジェクトのhashプロパティーによりURLのフラグメント識別子(と#)を取得・代入できる。最近のブラウザーは非ASCII文字列もURLエンコードせずに扱えるようになっているが、この辺りの挙動がFirefoxだけ少し違うようだ。それはhashプロパティーの返す値で、常にデコードされた形で返ってくるようになっている。 例えば適当なウェブページで開発者ツール(的なもの)を開き、コンソール(などと呼ばれてるもの)で以下を実行してみる。 > location.hash = '#' + 'あいうえお' < "#あいうえお" > location.hash < "#あいうえお" > location.hash = '#' + encodeURIComponent('あいうえお') < "#%E3%81%82%E3%81%8
飛び出す要素をセンタリング
一年くらい前からtop/right/bottom/leftプロパティーを使った水平・垂直センタリングをよく使うようになった。margin: 0 autoによる水平センタリングと同じように、理解できればわかりやすい手法なので気に入っている。ただrelativeを組み合わせたものと違って、センタリングしたい要素が親要素を飛び出す大きさの場合、左上が揃うように配置されるのがちょっと気になる。センタリングしたい要素の中央と親要素の中央とを合わせたい。 Demo: Centering Overflowed Element デモではとりあえず水平方向に飛び出すケースを考えている。見ればわかるようにセンタリングしたい要素が飛び出す場合、top/right/bottom/leftプロパティーを使った方法の場合は左が揃う。対してrelativeを使った方法の場合はセンタリングしたい要素の中央と親要素の中央が
ブラウザーの拡張とユーザーのプライバシー
さすがにここのところはあからさまにユーザーのプライバシーを侵害するようなブラウザーの拡張は少ないような気もする。この記事で話題にしたいのは、ある拡張のユーザーであることをあるウェブページの制作者が容易に知ることができてしまうようなケースの話だ。具体的にはウェブページに特徴的な要素や属性を仕込む拡張ということになる。 例えばPinterest公式のChrome向け拡張である[ピン]ボタンは、インストールするとあらゆるhttp://で始まるウェブページのbody要素にdata-pinterest-extension-installed属性で拡張のバージョンを仕込む。ウェブページ制作者はウェブページのロード後に少し待つ程度でこの属性があるかどうかを確認できるため、この拡張をインストールしていることを知ることは容易で、かつPinterestユーザーであることを推測することもできる。 Readabi
History APIとbase要素
base要素のhref要素で別のドメインのページを指し、リソースの基準となるURLを変更すると、History APIを使った履歴操作が行えなくなる。Same Origin Policyに引っかかって、セキュリティ・エラーが吐かれるようだ。 <!-- http://www.example.com/foo/bar --> <base href="http://other.example.com/"> <script> history.replaceState(null, '', '/replace'); </script> http://www.example.com/上のページでURLの書き換えを行おうと以上のようにすると、ブラウザーはbase要素のhref属性の値を考慮してhttp://other.exmaple.com/replaceに書き換えようとする。しかしSame Origin
FeedlyのMark all as read
Feedlyを使ってる時の懸案事項のひとつだったMark all as readすると読んでいる間に追加された未読も既読になってしまう仕様が、ここ最近の更新で変更され未読のまま残ってくれるようになった気がする。そうであって当然とも言えるものだけど、長い間放置されていたのでもう変わることはないと思ってたため良かった。ちゃんと問題視してたんだなぁ。 細かい所で気になっていた点も色々解消されてきたし、安定して愛用できそうな感じになってきた。カラースキームが変更になってからは気に入ってたカードビューでのマルチカラーが消えちゃったけど……。3か月くらいまではいつでも乗り換える気満々だったのが、今はもう心中しても良い気分になってる。Feedly使うのやめる時は、RSS読むのやめる時だと思う。 Feedlyはユーザーの規模の割りに開発者達の気分で破壊的な変更を加えることが日常化してる。こうやって常に変更
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"
Override device metrics
Chrome 20からviewportを制限または拡張できるOverride device metricsというオプションがデベロッパーツールについていたことを今さら知った。キモはどっちかって言うと自分の使っているマシンよりも高解像度な環境をFit windowオプションでなんとなくざっと確認できるとかそっちなのかも。2048x1536とかまぁアレでコレでソレですよね。20からなので2012-05-17現在の安定版にはまだない。 縦横サイズを入力する横に付いている⇄ボタンはデバイスの回転……というか縦横入れ替えのボタン。 もうひとつchrome://inspect/とか言うのが結構前からあったのも知った……。昔は右クリックからとかで簡単にできてたデベロッパーツールのインスペクトとかそういうのが簡単にアクセスできる。ああいうの覗くとちょっとだけFirefoxのDOM Inspectorを思い
Sassのファイル管理
少し前に変数を格納してたSCSSファイルをフォントや単位などのカテゴリ別に分けた。けど失敗だった気がする。それぞれの値の管理はやりやすいのだけど、使う場所との行き来が煩雑になってとっちらかってしまった感がある。どちらかと言うとエディタのフォールディングとかをうまく使って1ファイルで整理した方が良さそう。 Sassでは機能別にファイルを分けてコンパイル時にまとめる的な管理をする人が多いと思うけど、やりすぎると面倒なことになる。最近になってCSSの@importルールは先頭に集められたりとか、便利なんだけど逆にこれに依存するとCSS書けなくなりそうな機能とかも追加されてて、そろそろCSSとはもう別世界になりつつある。CSSにプラスアルファではなくて、CSSに変換できるなんか似た言語。 依存っていうのは変数とかミックスインとかそういうのを使うことではなくて、 @extendで変わるセレクターの順
ボタンの押し込みを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 ボタンのテキストだけでなく全体を
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なら下に並んだサムネイルをクリックすると大きな画像が表示される。切り替えやア
_corporate-colors.scss
色々なウェブサービスのコーポレートカラーをSassで手軽に扱えるようにするライブラリを洒落で作った。なんとなくこのあたりの色かなとロゴとかメディア向けキットの画像とかからカラーピッカーで拾って勝手にコーポレートカラーと決めてたりするので正確じゃない。 @import "corporate-colors"; .facebook { background-color: $cc-facebook; color: white; display: inline-block; font-family: "Helvetica Neue", "Arial", sans-serif; font-size: 20px; font-weight: bold; height: 32px; line-height: 32px; overflow: hidden; text-align: center; text-d
Google Web Fontsにあるお気に入りのフォント5つ - Weblog - hail2u.net
Google Web Fontsのフォント登録数も随分増えてきてチェックするのが大変になってきました。一応絞り込みとかそういう機能もありますけど、Typekitのようにかゆいところに手が届く感じではありません。そこで……というわけではないですけど、なんかの参考にでもなればと僕のお気に入りを5つだけ簡単な説明付きで紹介してみます。 Demo: Five Favorite Google Web Fonts Amaranth Amaranthはゆるやかにカーブのかかったグリフが特徴です。比較的小さなサイズからその特徴がはっきりと出るので、ロゴ以外にもナビゲーションなどでも使えると思います。斜体ではそのゆるやかなカーブがセクシーに強調され、また違った味わいがあります。 Arvo Google Web Fontsにはあまりスラブ・セリフがないですが、Arvoは唯一まともに使えそうなそれです。評価の高
セクションや段落の区切り線
段落の区切りに使うhr要素をちょっと凝ったデザインにするという話は以前書きました。似たような話はCSS-Tricksでも最近取り上げられていますね。しかしこれらはhr要素でのテクニックです。では、例えばsection要素の最後にこういったちょっと凝った感じの区切り線をつけるにはどうすれば良いのでしょうか？ 結論としては::beforeと::after擬似要素を組み合わせて頑張るということになります。例えば上記CSS-Tricksのサンプルの最後の例やCekerholicなどで見られるセクション記号(§)の左右に罫線がつくようなデザインを作ってみます。 Demo: Section/Paragraph Divider hr要素の場合は結構簡単なものです。 hr { border: none; border-top: 1px dotted #666; position: relative; he
不明な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
たった一行で人生が変わった.vimrcでの設定とその意味 - Weblog - Hail2u.net
僕はVimを使うまでは秀丸エディタを長いこと使用していました。両者の間に設定の項目数やキーバインドに割り当てられる機能に大きな差があるとも思わなかったので、使い始めた当初は「そんな言うほど高機能でもないよなー」とか思っていました。しかし色々なプラグインを試したり、様々な設定を.vimrcに書いているうちに、Vim (やEmacs)がその他エディタと決定的に違うのは設定の豊富さではなく、設定の自由さがもたらすアプローチの多様性なのではないかと考えるようになりました。というわけでそういう設定の自由さを最初に実感した話をVim Advent Calendar 2011の6日目のエントリーとして書かせてもらいます。 昨今のWebサイトではCMSなどを利用することが多く、共通のHTMLコードはテンプレートとして作成されます。その場合そのテンプレートの利用されるパスが様々な場所や階層になりうるので、例
CSSとJavaScriptで文章をメモ書き風に
または和文フォントから仮名部分のみ抜き出してサブセット化したものとYahoo! Japanのルビ振りAPIを組み合わせて、ユーザー環境やサーバー性能に左右されずに比較的自由なフォント表現を行うためのイロハ。おれ ここ めも かき なぐる！ Demo: Scribble My Tweet #3 フォントのサブセット化 ここでいうサブセット化とはつまりフォントから必要な部分のみ抜き出して再構築すること。Webフォントとして使えるからといって、サブセット化までは許されていないことがあったりするので、それには気をつける必要がある。例として新BSDライセンスで提供されている、きろ字 プロポーショナルを取り上げる。 サブセット化に留まらないWebフォントのジェネレーターとしてFont Squirrelの@font-face Generatorが利用できるが、アップロードするフォントのサイズ制限が厳しい
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Image Gallery by pointer-events