CSS Architecture — Philip Walton
To many Web developers, being good at CSS means you can take a visual mock-up and replicate it perfectly in code. You don’t use tables, and you pride yourself on using as few images as possible. If you’re really good, you use the latest and greatest techniques like media queries, transitions and transforms. While all this is certainly true of good CSS developers, there’s an entirely separate side
プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
HTML / DOM におけるキーボードイベント周りの話 - ひだまりソケットは壊れない
最近キーボードショートカットの実装をしようと思ってキー入力によるイベント周りについて調べてみたのだけれど、日本語でまとまった情報が見つからなかったので、キーボードショートカットの実装に必要そうな内容を簡単にまとめておこうと思う。 キーボードショートカットに限らず、キー入力によるイベント周りの何かをする場合には参考になると思う。 本記事では、DOM 3 Events spec の 2012-09-06 の版を参照しており、将来の版では変更されている可能性がある。 最新の版は下記リンクから確認のこと。 Document Object Model (DOM) Level 3 Events Specification (DOM 3 Events spec の最新安定板) keydown イベント、keypress イベント、keyup イベントについて keydown イベント は、キーが押された
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
jQueryだけ使うのが馬鹿らしくなる。KnockoutJSに触れる
久保田です。最近KnockoutJSというJavaScriptフレームワークを勉強しています。 KnouckoutJSはjQueryの上に構築されているフレームワークです。jQueryのみ使うのと比べてKnockoutJSを利用すると、ウェブページ上のインタラクションを圧倒的に簡単に記述できます。この記事では、簡単にKnockoutJSの概要を説明し、KnockoutJSを用いたデモを紹介します。 このフレームワークの特徴としてあるのは、HTML内に宣言的な記述を埋め込むことでインタラクションが実装できることです。HTML5のカスタム属性(data*属性)を用いて、その要素に関する処理を宣言してきます。裏側の処理は、JavaScriptでViewModelを定義し、そこにビューが必要とする値を管理します。 例えば、あるチェックボックスにチェックを入れると下の要素がトグルする簡単な例は、以下
Big Sky :: zen-codingの殆どの機能をzencoding.vimに取り込んだ。
全国１億８千万人のzen-codingファンの皆様、如何お過ごしでしょうか。 先日の記事でzen-codingをpure vimscriptに移植した「zencoding.vim」をご紹介させて頂きました。 あの時は略語の展開(Expand Abbreviation)しか機能がなく物足りなかったかもしれません。まぁ殆どの移植品はExpand Abbreviationしか無いのですが。 zen-codingには他どんな機能があるかというと、実はまだ便利な機能があったりします。 オフィシャルのサイトによると Expand Abbreviation Wrap with Abbreviation Balance Tag Inward/Outward Go to Next/Previous Edit Point Update Image Size Merge Lines Remove Tag Spl
W3C - 『HTML 5 differences from HTML 4』日本語訳 - HTML5.JP
一部、直訳ではなく意訳した部分がございます。原文と表現が異なることがございますので、ご了承ください。この日本語訳は、私が理解を深めるために、自分なりに日本語化したものです。本日本語訳には、翻訳上の誤りがある可能性があります。したがって、内容について一切保証をするものではありません。正確さを求める場合には、必ず原文を参照してください。当方は、この文書によって利用者が被るいかなる損害の責任を負いません。もし誤りなどを見つけたら、当サイトのお問い合わせより連絡いただければ幸いです。 原文URL：http://www.w3.org/TR/2011/WD-html5-diff-20110525// 原文タイトル：HTML 5 differences from HTML 4 - W3C Working Draft 25 May 2011 翻訳日：2011/05/26 最終更新日：2011/05/26
「HTML5 Rocks」だけじゃない、ブラウザ各社のHTML5チュートリアルを集めました
Webブラウザを提供する主なベンダ、グーグル、マイクロソフト、モジラ、オペラ、アップルらは、HTML5への対応を急ぐと同時に、相次いでHTML5の魅力や内容をデベロッパー向けに紹介するサイトを開設しています。この記事では、それらをまとめて紹介することにしましょう。 グーグルの「HTML5 Rocks」 グーグルは6月22日に開発者向けにHTML5を紹介し、学習するためのWebサイト「HTML5 Rocks」をオープンしました。 HTML5 Rocksは現在3つのコーナーに分かれています。 1つ目は「Interactive Presentation」。これはHTML5の新たなAPI、DOM APIやLocal Storage、WebWorkerなどさまざまな機能を紹介するプレゼンテーション。機能と共にJavaScriptでのコーディング例や実際に動作するデモなどが用意されており、HTML5の
Javascriptで数値文字参照の値を求める方法
具体的なJavascriptのコードは、このページのHTMLソースを見ていただいければ分かりますが、charCodeAtメソッドを用います。HTMLのヘッダー部分に、左のようにConvertという自作関数を定義しています。意外と簡単な仕組みになっています。 Javascriptの関数定義の部分は、左のテキストボックスの中に記したコードのようになります。参考にしてください。 もう一つの方法は、特定文字のUnicode（ユニコード）値（16進数）を10進数表記にすることです。Unicode値は、WindowsのIME 2002なら「ツール→IMEパッド→文字一覧」を選びます。そこで、左端の「シフト JIS」という文字の横の三角印をクリックして「unicode」を選択します。これで、Unicodeの文字一覧が表示されます。 上の例のように、「考」という漢字は、unicodeは「0x8003」（「
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://html5please.us/
ウェブアーキテクチャの歴史と未来