今更ですが、location.hashで現在のステータスを管理するのがマイブームです。しかし、ASCII以外をぶち込むとブラウザごとに挙動が違うっぽいです。というのを調べておいて、書いておくのを忘れたので、まとめておきます。 方法 以下のアクションを起こした場合、location.hashで取得できる値がどうなるか、調べました。なお、ファイルはUTF-8で試しました。 ファイルに書いてあるリンクをクリックした場合 A1:#test B1:#てすと C1:#%E3%81%A6%E3%81%99%E3%81%A8 A2:#test#test B2:#てすと#てすと C2:#%E3%81%A6%E3%81%99%E3%81%A8#%E3%81%A6%E3%81%99%E3%81%A8 A3:#test%23test B3:#てすと%23てすと C3:#%E3%81%A6%E3%81%99%E3%

secretGeek HTML5の仕様策定がある程度進んできたこと、IEを除く最新のブラウザがHTML5機能の実装を順次はじめたこと、MicrosoftのチームがHTML5の策定に積極的に参加をはじめたこと、Webアプリケーション開発者やWebデザイナの関心が高まってきたことなどを受け、HTML5の新機能を紹介したり、HTML4とHTML5の違いを紹介する記事やブログが増えている。 そうした紹介記事のひとつに、secretGeekに掲載されたHTML5, a 3 minute guideがある。HTML5の新機能を紹介する記事では、HTML5が生まれる経緯を簡単に説明したあとで、新しく追加される要素について紹介するスタイルをとることが多いが、この記事では従来の記述例をHTML5にしたらどうなるかという違いを視覚的に示したあとで、その違いを説明している。 HTML5, a 3 minute

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 CSS Nite Vol.40 見てきました。タイトルは「HTML5、きちんと。」 by 矢倉さんです。やはりNiteは初心者向けということで、ブラウザ実装や仕様の根幹に関わるコアな話題はできなかったようですが、落ち着いた進行でありながら良く練られた構成であり、何故か今さらガンガン盛り上がっているHTML5の背景と、仕様策定の方向性みたいなものが感覚的に理解できる、とても有意義なセッションでした。 いや本当にすっきりしました。今まで何となく集めていた情報と併せて、全体の雰囲気みたいなのが掴めたように思うので、個人的には大満足です。 感想としては、やはり仕様の策定にベン

正規表現といえば、主にsedやawkといったUNIXのコマンドで、あるいはPerlやPHP、JavaScriptなどのスクリプト言語の中などで、プログラマーが文字列を操作するために使う道具でした。 その正規表現がHTML5でサポートされる見通しです。いままで正規表現を使わずに済んでいたデザイナやコーダーといった職種の方々も、いずれ仕事としてきちんと正規表現を扱わなければならない時代がやってきます。 HTML5のどこに正規表現が使えるようになるの？ 正規表現は、input要素のpattern属性の中で使えることになる予定です。W3Cが2009年8月25日付け公開しているHTML5のワーキングドラフトの「4.10 Forms」の「4.10.4.2.8 The pattern attribute」では次のように記載されています。 The pattern attribute specifies a

見出しレベルって飛ばしていいと思うんだけれども。 いいというのは、文章の内容的に考えたら、飛んでるのは自然で、色んなアクセシビリティガイドラインでAAAとかとりたいなら飛ばさないでいくしかないと思った。ちなみに、明確な答えは無い（と思う）。 文章的に自然というのはどういう意味かというと、 見出しには、上から考える見出しと、下から発生する見出しがあると思うんですよ。「レベル見出し」と、「汎用見出し」みたいなものが。 自分が良く出会うのは、こんなの これ（右図）の、「注意」って、h2なんでしょうか？ でも「パグ」と「ゴールデンレトリーバー」より明らかに重要度低い。「写真」も同じ。こーいうのって、h1の見出しの下が分かれる場合はh2で、その下で別れる場合はh3で･･･って言う考えとは、逆の考えで、 注意 - 犬が嫌いな人は帰ってください 写真 - 犬の写真 っていうコンテンツの塊だけで考

Blog Search when-present<#else>when-missing. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${entry.path} [in template "__entry.ftlh" at line 3, column 25] - Reached through: #include "__entry.ftlh" [in template "entry.ftlh" at

シリーズの発端 元々、今年に入ってから 2xup.org の上ノ郷谷さんと親しくさせていただいているのですが、今回の上京は連休の絡みもあって、イベントの翌日の飛行機で帰りますよ、ということを話していたのです。 そこで、「だったら帰る前にウチ ( シックス・アパート ) に遊びに来ませんか ? 」とお誘いを受けていたのが今回のシリーズの発端になりました。 シックス・アパートの前にサイボウズ・ラボに行ったのも、ルート的に移動時間が少なくて済むからダメ元でお願いしてみるか、という。 赤坂でランチ サイボウズ・ラボの訪問を終え、上ノ郷谷さんに連絡を取る私。 電話で道順を聞くも、右も左も分かりません。 ( 実はサイボウズ・ラボに行く時も、プルデンシャルタワーを目の前にしてもう一度地図を確認していたくらいに ! ) そこで、私は赤坂見附駅で待機して、シックス・アパートの皆さんに迎えに来てもらうことに。

JavaScriptを使わないスターレイティングの作り方これCSS脳じゃね？と、ほんのりと一部で非難され気味なJavaScriptを使わないスターレイティングの作り方ですが、どこが変なのか明記されているソースが無かったので自分で作ってみる試み。CSSを切ったら意味不明なHTMLサンプルが併記されていますが、CSSを切るとリストに番号が振られているだけで、かなり意味不明です。せめて評価：星1つとか星3つ、とか。class名がCSS依存だよ所謂、class="red"問題ですね。ウノウラボさんで紹介されていた記事も、ul class="rating onestar"といった具合にCSS依存というか、CSSが無いと意味不明のclass名なので、そういうのはよろしくないんじゃないの？ということですね。CSSあってのHTMLになっちゃってるよ！ということです。そもそも、それ（星）はリストなのだろうか

こんにちわ、山下です。 Amazonなどで使われているような商品を☆の数で評価するスターレイティングというものがあります。今回は、CSS The Star Matrix Pre-loadedに紹介されている記事を参考に、その作り方を簡単に紹介しようと思います。 1.画像を用意する まず次のような1枚の画像を用意します。16×16ピクセルの☆が、横に5個、縦に11個並んでいて、下に向かうに従って色の付いている☆の数が増えているのがポイントです。 2.HTMLを書く HTMLはとてもシンプルで、ULリストを使います。 <ul class="rating onestar"> <li class="one"><a href="#" title="1 Star">1</a></li> <li class="two"><a href="#" title="2 Stars">2</a></li> <l

idかclassかでCSS界隈が盛り上がっているようですけれども。 仕様書はある意味どうとでも取れるので、字面から俺が受けるイメージを書いてみようと思う。div.header divが上位に存在していて、headerはpの性格の一つというイメージ。headerはなんかおさまりが悪い感じ。<ul class="car">     <ul class="subaru">        <ul class="legacy">           <li class="price">決算店長気絶特価</li>        </ul>    </ul> <ul> というHTMLに p.car.subaru.legacy.price { color:red; } といった感じでスタイルを書くのが気持ちいいけど、これってどっちかというとプログラミング的な気持ちよさな気がする。 div#header <