プログレッシブエンハンスメント（Progressive Enhancement）という考えかた｜ウェブユーザビリティ向上を支援するWebsite Usability Info
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
コーディング前に確認しておきたいこと。 - CSS HappyLife
CSS HappyLife ZERO が移転したのでお手数ですが、消えちゃう前にブックマーク等変更してもらえるととても嬉しいです。 制作会社でコーディングする場合、社内のガイドライン的なのが有ったりデザイナーもある程度固定されてると思うので、毎回似たような事を確認したりとか、このデザインはどういう意図なんだろう？ってのも、何度か同じ人とやってれば見えてくる訳ですが、フリーランスの場合だとデザイナーは毎回違っていたり、当然ディレクションをする人も違うので最初に確認しておきたい事が有ったりします。 って事で、その辺りをまとめてみたり、デザインを渡されたときにこのデザインの意図は？って思う事とかもばーっと書いてみます。はい。 なので、デザイナーさんもコーダーにデザインを渡すときに気をつけて欲しい点とかもわかってしまうすばらしい内容（だと良いな）！ じゃあまずは最初に確認しておきたい基本的なことか
コピペで使えるマークアップ済みダミーテキスト
現在、フリーランスとしてやってるんですが、そっちの屋号が「underHat」に変わったので、もしリンクとかしてくれてる方が居ましたら変更してもらえると幸いです。 屋号が変更になりました｜お知らせ｜underHat さて、今回はブログ記事のダミーエントリーとかに使えそうな、マークアップ済みダミーテキストです。 何気に今まで使ってたのが有ったんですが、メインPC逝ったりしてる内にどっかに消えてしまったので作り直したのを忘れないようにブログにアップです。 一応それなりに出てきそうな要素を使ってマークアップしております。 h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, a, q, blockquote, table, td, th, pre 辺りです。 ダミーテキストだけならジェネレータとか何か色んなサービス有るんですけど、イマイチ自由に使っていいの
行長よりも長い親文字列のルビ - 日本語練習虫
HTML5(とCSS3)における縦書きやルビの仕様を見直しより良いものにしようという最近の努力がpublic-html-ig-jp@w3.orgに積み上げられているのを拝読して、深い敬意を覚えた。とりわけ、「Re: ルビ問題の妥協点を探る」の前後に刺激を受け、次のような実験を試みることにした。 実験は、「日本の神話時代の終わりに登場する神に、ウガヤフキアエズノミコトがいる。初代天皇神武の父であり、古事記では天津日高日子波限建鵜葺草葺不合命、日本書紀では彦波瀲武鸕鶿草葺不合尊と書かれている。」という例文に出てくる神の名にルビを振る、というもの。ただし以下の実験では都合により0208外字の「鸕鶿」を「〓〓」に置き換えている。 さて、実は私、決して日本神話について詳しいわけではない。それどころか、一般的な知識も持ち合わせていない。上記の例文は、Wikipediaの記述をもとに作文したものだ。 そ
HTML要素の正式名称 : Weblog : SimpleIsm
HTML 例えば、a要素のaはanchorの略とか、そういうの。HTML要素はhtml要素ではなく、HTMLの要素を指します。 どうせなら全部探してみようと思って1時間ぐらい探してたら、HTML 要素型名索引を見つけて嬉しさ半分、ショック半分、みたいな。まぁせっかくなんで、表にまとめてみました。順番はXHTML Abstract Modulesに沿っています。あと、一応th要素にid属性を振っています。 要素名と正式名称が同じだったり、一致しないものがありますが、それはそのままの意味だったり、脳内補完してください(例えば"field"が"area"になるとか)。 正式名称や意味が分かれば、自ずと用途も分かってくる…はず。間違いがあったら教えていただけるとありがたいです。 XHTML Abstract Modules ElementFormal nomenclature Structure
HTMLエンティティ生成
[使い方] JavaScriptを使用可能にしておきます。 オプションを選択します。どれを選択して良いか解らない場合はそのままがいいです。 メールアドレスやURLを「変換したいアドレス」に入力します。 「変換」ボタンを押します。 結果が「変換後のアドレス」欄に出ます。元のアドレスからあまり変わってない場合は、気に入るまで「変換」ボタンを押してください。 「Clipコピー」ボタンを押すと「変換後のアドレス」がクリップボードにコピーされます(Windows版 IEのみ)。 HTMLファイルやブログの設定画面など、メールアドレス・URLを記述する部分にペーストしてください。 [注意事項] 日本語など、多バイト文字コードを入力した場合の動作は検証してません。 このツールを使って生じたあらゆる影響に関して、制作者は責任を負いかねます。自己の責任においてご使用下さい。 このツールは、Appli Box
floatプロパティのテスト - 3ping.org
Comments:7 MaKOTO 2007年11月15日 01:27 こういう授業を受けている生徒さん達が羨ましいです。 web制作の道へ進む生徒さんは知らず知らずの内に近道を進んでいることに気づいていると思いますが、 ネスケ4の崩壊っぷりを見せて「お前たちは幸せもんだぁ」と武田鉄矢口調で言い放って欲しいです。 ※役所関連の仕事ではネスケ4.xが対象ブラウザに入る可能性がなきにしもあらずですが・・・。 wu 2007年11月15日 12:59 MaKOTOさん、お久しぶりです! 生徒たちは「ふーん」という顔で淡々と勉強しています。(笑 テーブルデザインを知らない人は、逆にすごい素直にHTMLとCSSを覚えられるようです。 「おじさんが勉強した頃は大変だったんだぞ」みたいな時代になるのでしょうか‥ ｶﾞｺﾌﾞﾙ。 sf 2007年11月21日 03:10 答えは？ wu 2007
Basic HTML data types (ja)
上記の通り、色指定の値「#800080」と「Purple」とは、どちらも紫色を表す。 6.5.1 色を用いる際の注意 カラー化によって、文書はより多くの情報を表すようになり、また読みやすくもなるだろう。しかし、カラー化については以下の指針を考慮に入れられたい。 HTMLの要素や属性によって色指定を行うことは 推奨しない。その代わりにスタイルシートを用いるよう勧める。 色盲の人を困らせるような配色には様々なパターンがあり、どの組み合わせにおいても慎むこと。 背景画像や背景色の指定を行う場合は、テキスト類への色指定も行うこと。 BODY要素や FONT要素、そして表のbgcolorによる色指定は、環境が違うと見え方も異なる。 (例えば、ワークステーション、マック、ウインドウズの違いや、液晶表示とCRT表示の違い。)従って、ある特定機種での見栄えに完全に依存するべきではない。 ただし将来的には、
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
趣味のWebデザイン - p要素は最小の節
初稿：2003年8月24日～9月11日 平成15年8月24日 読点をまたいでの blockquote というのは、アリなのですかね。頭の中では、<p>hoge、<blockquote>hogehoge</blockquote>hoge。</p>こういう感じなのだけれど、これだと文法違反以前の問題として、頭の中で描いたとおりの意味としては解釈されない。で、あるならば、q タグでもって同一段落内に内包させるのが適切な感じもするけれど。強引に<p>hoge、hoge。</p><blockquote>hogehoge</blockquote><p>hoge。</p>こうすると、丸く収まる。けれど、意味付けのために語群を変えるのは本末転倒というか。 「paragraph＝段落」ではないのが問題の出発点。p要素はDTDにある通り、HTMLでは最小の節を担当している。だから、ブロックレベル要素を内包でき
引用のやり方についての論争まとめ
ウェブでは、「引用はこうやってするよ」「それでは駄目だよ」といった論争・トラブルが時折発生します。 内容はいずれも似たり寄ったりで、要するに「HTMLの規格に基づいて引用するよ」という考え方と、 「そんな規格に従ったから何？」という考え方の衝突というパターンです。 毎度毎度似たようなやり取りが繰り返されて不毛なようにも思うのですが、 以前の論争を誰もが知っているわけではないので、仕方のないことなのでしょう。 以前の論争は、ログが消えてしまうことも珍しくありませんし。 というわけでこのページでは、現時点でログが確認できる範囲でそういった論争・トラブルをまとめてみたいと思います。 2001年7月：ありみかさとみさんvs佐藤治さん 2002年12月：野嵜健秀さんvsいずしさん 2005年9～10月：真名垣郁夫さんvsAkkyさん 2006年10月：中島聡さんvs高木浩光さん なお、このページには
textareaのサイズを可変にするJavaScript - ウェブユーザビリティ.JP
jQuery TextAreaResizerはjQueryのプラグインとして提供されているスクリプトです。jQuery TextAreaResizerを使うと、ユーザーが自由にテキストエリアのサイズを変えられるようになります。規約の「テキストエリアのサイズは可変にしておく」で書いたように、テキストエリアが小さくて使いづらいというような点を解決し、ユーザビリティを高めるのに効果的です。 動作サンプルを見る限り、textareaだけでなく、iframeのサイズを変更できるようになるみたいですが、iframeのほうは処理が重くて高速に動かした場合にあまりきちんとは動きませんでした。でもtextareaのほうは大丈夫みたいですね。リサイズ中は微妙に白くなるなどのエフェクトもあり、分かりやすいと思います。 ■リンク 公式サイト こちら デモ あり ダウンロード 記事の中に記載 (ページ下段
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
link要素覚書
概要 所謂リンク（ハイパーリンク）に主として用いられるのはa要素です。これは、文章内のあるキーワードと別の文章を関係付けるための要素です。一方、link要素は、head要素内に記述される文章全体と別の文章を関係付けるための要素です。 例えば、コンテンツ内にトップ（index）ページへのリンクを設けるには、a要素で「トップページへ戻る]]>」と記述するのが最も一般的ですが、head要素内に「<link rel="start" href="index.htm">」と記述することも出来ます。 一般にlink要素を記述すると、仕様書上では次のようなことが期待されています。 ページに適応させる外部CSSやJava Scriptを呼び出す。 link要素で指定されたページを、ツールバーなどでリスト化して表示する。 nextで指定されたページをブラウザが先読みすることによってダウンロード時間を短縮する。
HTML - link要素の使い方 - linkとサーチエンジン
HTML のhead要素の中で使われる要素の一つにlinkがありますが、きちんと実装しているブラウザが少なく、入門用の解説書でもほとんど触れられていないので、存在もあまり知られていません（最近ではスタイルシートのために少しずつ使われ始めているような）。ここでは、その基本的な役割と使い方を紹介します。 link要素タイプ リンクタイプ linkとサーチエンジン 順方向リンクと逆方向リンク link要素タイプ アンカー（a）要素は、文書の本文であるbody要素の中で、文書の特定箇所にハイパーリンクの始点や終点を設定し、利用者がそのリンクをたどれるようにする役割を持ちます。これに対し、link要素は文書全体についての情報を記述するhead要素の中に置かれ、HTML文書を前後の文書、スタイルシート、スクリプト、代替文書などの様々なリソースと結びつける働きをします。ブラウザなどのユーザーエージェント
rel="Bookmark" のなぞ / おのひろきおんらいん
HTML+ では REL=BOOKMARK ってのがあったみたい．その時の定義は今の HTML 4.0.1 や XHTML とはちょっと違っていたように見えます．最終的には破棄された規格 HTML 3.0 の検討では HTML 4.01 とほぼ同じ定義がされていました．それは HTML 3.2 の Proposed Recommendation 05-Nov-1996 にもありましたが，HTML 3.2 の勧告では REL=Bookmark が無くなっているみたい．ぼくが HTML の仕様を気にするようになったのは HTML 4.0 以降ですから HTML 3.2 とか HTML+ なんてのは良く知りません．でも HTML 4.0 以降は rel="Bookmark" については，本当に簡単にしか書いてないので良くわからないのですよ．だから古い規格についての文書を見てみたのです． HTML
rel-bookmark - ロックスターになりたい
コピー終わらないので『オレ、rel-bookmarkも嫌いなんだわー』とブツクサ言うsnj14 - otsune tumblr まとめサイト 画像保管庫Q読んできた。 The HTML4 spec (http://www.w3.org/TR/REC-html40/types.html#h-6.12) describes a bookmark as "a link to a key entry point within an extended document". By convention (citation needed), this entry point also captures the notion of a "permalink". microformatsのドキュメントには By convention (citation needed), this entry point a
canonical属性とは／link rel=”canonical”によるURL正規化タグ——SEOにとって非常に重要な進歩（前編） | Web担当者Forum
canonical（カノニカル）タグは、<link rel="canonical" href="○○">のように使われます。そもそもcanonical属性とは検索エンジンに対してどんな意味を持ったタグなのでしょうか？ 基本情報からSEOで活用すべきシーンなどを事例で紹介します。 ヤフー、グーグル、そしてMSN Live Search（マイクロソフト）は、新しい「URL正規化タグ」をサポートすると発表した。 このタグを使えば、ウェブマスターやサイトオーナーが検索エンジンのインデックス内での重複コンテンツ問題を解消できる（ただし、自サイト内の問題のせいで生じる重複インデックスのみ）。 僕が思うに、これはSEOのベストプラクティスにとって、サイトマップの登場以来最大の変化だと思う。SEOmozでは最新ニュースを届けることより戦略について論じることに重点を置いているから、このブログで検索エンジン関
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting