W3C HTML5仕様に見るアクセシビリティーに関する記述 - 血統の森+はてな
この記事はWeb Accessibility Advent Calendar 2014 - Adventarの6日目のエントリーです。このエントリーのタイトルからは、やれW3Cだやれ仕様だとお堅いイメージがぷんぷん漂いますが、易しいめに書くことを心がけてみました。そのため、ガチ勢には物足りなさを感じるかもしれません。 ウェブ業界の人にとっては周知のことだと思いますが、去る10月28日付けでHTML5仕様（以下単に仕様と書きます）が勧告されました。この仕様の意義はさまざまな切り口で捉えることが考えられますが、アクセシビリティーという観点から1つ前のバージョンのHTMLであるHTML4と比較して、この仕様で特に目立って強化されたと思われる点を挙げるとすると、 img要素のalt属性が大幅に拡充されている WAI-ARIA1.0を取り込んでいる 映像や音声のための要素（video要素、audio
技術評論社のWebサイトが改ざんされた件をまとめてみた - piyolog
2014年12月5日11時頃から、技術評論社のWebサイトを閲覧すると別のサイトに転送される事象が発生しました。ここではその関連情報をまとめます。 公式発表 12/6 サーバ障害のお詫び 12/8 弊社ホームページ改ざんに関するお詫びとご報告 技術評論社Twitterアカウントのアナウンス（一部） 【本日11時ころより発生してる状況について】本日11時ころ，サーバ管理ツールに侵入されサーバそのものを入れ替えることにより，外部サイトにリダイレクトされるように設定されました。危険なサイトである可能性があるため，現状アクセスしないでください。— gihyo.jp (@gihyojp) 2014, 12月 6 サーバOSそのものへの侵入ではなく，OSの入れ替えが行われたため，情報漏洩等は確認されておりません。詳細は後日改めてご報告いたします。 ご報告が遅れておりますことをお詫びいたします。— gi
Fetch and Start
この記事はSublime Text Advent Calendar 2014の6日目の記事です。 5日目のtoru_inoueさんにご紹介いただきまして、6日目を担当いたしますは、私こもり（Tシャツの人）でございます。あ、空前の大ブームを巻き起こしたオレンジの教科書の監修者です。 ロケットスタートしたい… どうでしょう、最近のWebの制作とかの仕事は使う技術も増え、それに伴ってあれやこれやと設定ファイルの類も増えてませんか？ 「.gitignore」「.editorconfig」「.jshintrc」に「package.json」「bower.json」「Gemfile」とかいろいろ。 それぞれコマンドで自動的、もしくは手動でファイルを追加するわけですが、いちいちコマンド打つのもまた面倒くさい。だったら、「何か新しく作り始める時に最初から使いそうなオレオレセットを作っちまおうじゃないか」と
SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる
SVGスプライト(symbol)でposition:absoluteを使うとIEでずれる2014.12.06 これはSVG Advent Calendar 2014の参加記事です。 昨日（12/4）はshino212さんの「はじめてSVGでアニメーションを作った時の話」でした。おじさんのアニメーションが可愛い。 6日に投稿しようと思ったのですが、空きがあるので5日も投稿することにしました。まだ空きがあるのでぜひご参加下さい。 SVGスプライトとは body直下などにインラインSVGを貼り付け、gタグの代わりにsymbolタグを用いて使いまわす手法です。リクエスト数を減らす効果があり、ページを書き換えるタイプのpjaxやSPAと一緒に用いるといい感じがします。 SVGスプライトでハマる 上記のように、ロゴを多用している箇所をSVGスプライト（symbol）を用いて対処しようとしてハマりました
I am mitsuruog | 進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話
フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello World から実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世界で、より早く未開の土地に慣れるためにスタイルガイドを有効活用しているという話です。 ちなみにこの記事はFrontrend Advent Calendar 2014 - Qiitaの 6 日目の記事です。 5 日目はじめての CSS 設計 - Qiita(@moschann) 7 日目CSS のプリプロセスとポストプロセス、そして Rework と PostCSS(@morishitter) 良
IEにも対応したレスポンシブSVGの作り方
これはSVG Advent Calendar 2014の参加記事です。 昨日（12/5）に引き続き僕が担当します。 明日（12/7）も空きがありますので、ぜひご参加下さい。 レスポンシブなSVGを作る SVGは、Retinaであっても綺麗に表示されるため、僕はテキストや図など、Retinaのために2倍サイズを書き出すのが面倒くさい箇所をSVGで書き出しています。 通常のimg要素であれば、 的な感じで、ウィンドウ幅が狭まっても横100%で画像が表示されるはずです。svgでも同じような感じにしてあげると、モダンブラウザではうまく表示されるはずです。 IEで表示がバグる ところがどっこい、IEだけはうまくいきませんでした。 （ここでのIEはIE9、10、11を指します。） ChromeとIEの比較。Firefox、SafariもChromeと同じ表示でしたが、IEだけは表示がおかしい。 サンプ
CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog
この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサー（またはメタ言語）とは、CSSとは異なる独自の構文で記述された文字列を入力とし、ブラウザが解釈可能なCSSコードを出力するもの。SassやLess、Stylus等がその実装に当たる。 次にCSSポストプロセッサーとは、CSSを入力とし、より効果的なCSSに変換し、最適化するもの。例えば、コードを圧縮したり、自動でベンダープリフィックスを付与したり、プロパティ宣言の順番を読みやすいように並び変えたりするもので、CSSWringやAutoprefixer、CSSCombがその実装。いわゆるオプ
pixivのCSSで使われるクラス名ルール
pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない方がいい。 コード例。 HTML: <section class="_foo-container"> <h1 class="title">foo</h1> <ul class="_bar-items"> <li class="item"><span class="title">item 1</span></li> <li class="item"><span class="title">item
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
好みや多数決で決めない、デザインとの正しい付き合い方
これからの新しいサービスの産み出し方
Webアクセシビリティの現状ダイジェスト 2014