document outline algorithm と h1 要素 | きるこの日記帳
没ネタの供養。 TL;DR h1 を複数置けるわけじゃない アウトラインを生成するアルゴリズムはブラウザで実装されてない 見出しレベルを自動調整するように動いていたが頓挫した section お前は何者だ document outline algorithm について "document outline algorithm" とは、HTML のアウトラインを生成する都市伝説のこと。 アウトラインとは、見出しを持ったセクションで構成される枠を指す。 HTML5 より前は、このアウトラインを表現する方法がなく、広義な wrapper の div が採用されていた。 見出し要素もセクションごと、というよりは文書の階層にかかるもので、兄弟としてのフラットな構造だった。 HTML5 から、 section や nav などで囲みアウトラインを生成する謎のアルゴリズム "document outlin
SVGをobject要素で活用する | 水無月ばけらのえび日記
更新: 2012年2月24日23時20分頃 SVGというものはずっと昔からありました。かつてはブラウザ側の対応がいまいちで、プラグインを入れたりしないと表示できなかったりもしており、あまり使われていませんでした。しかしIE9がSVGに対応したことで、かなり使えるようになってきた印象があります。最近では仕事でもガチでSVGを使うことが増えてきています。 SVGの特長のひとつは、ベクターグラフィックなので伸び縮みに強いという点です。サイズ可変の領域にうまい具合に背景を敷きたいときには便利です。そして、最近はサイトのコンテンツ全体がサイズ可変ということも増えてきました。というか元々可変ではあると思うのですが、Media Queries (www.w3.org)を使った派手な変更を伴うパターンが増えてきて、画像のサイズを大幅に変更したいケースが増えてきています。 写真などはJPEG画像を拡大・縮小
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
みなさんは、サイトをスクラッチで作る時にどうされていますか？ HTMLやCSSをイチから作り込んでいくのは大変ですよね。 フリーでHTMLやCSSのテンプレートもいろいろありますが、デザイン要素がガチガチで修正しづらかったり、あまりにもシンプルすぎて結局ゴリゴリ作らないといけなかったりします。 最近だと、Twitter Bootstrapが使いやすくて、いろんなサイトでも使われています。 特にウェブ系のスタートアップは、ほとんどがTwitter Bootstrapをベースにしているんじゃないかというぐらいよく目にします。 しかし、どれもこれも同じような見た目になっちゃってて、デザイン的にはちょっと残念な感じがします。 Twitter Bootstrapを使うと、なぜここまで似てしまうのか？ それは、 パーツが完璧に揃いすぎている！ のが原因です。 Twitter Bootstrapがバージ
a要素の中にimg要素がある場合のaltテキストの読上げ - White Stage
a要素の中にimg要素がある場合、そのimg要素のalt属性の情報(代替テキスト)をPC-Talkerでは読上げてくれません。 「えっ！alt属性に記述された代替テキストの情報を読上げてくれないの？基本的にalt属性に記述された代替テキストは読上げてくれなくちゃ困るでしょ」と思われたかたが多いと思いますが、残念な事にa要素の中にimg要素がある場合のalt属性に記述された代替テキストはPC-Talkerでは読上げてくれないんです。 そこで、a要素の中にimg要素があり、そのimg要素のalt属性に記述された情報(代替テキスト)をどのように読上げるか、PC-Talker XP Version3.08とNVDA Version R3278jで検証してみました。 次のように別のサイトをリンクしている場合、新しい窓を開くようにa要素にtarget="_blank"を設定する場合があると思います。そ
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
【アクセシビリティ】 ブロック・スキップの“決定版”を考える (ナビゲーション・スキップ):WebClip - ウェブ制作、UXD／IA、アクセシビリティ
この記事のトピック ブロック・スキップの“決定版”をつくる。 ブロック・スキップのよくあるパターン。 【パターンB OffScreenパターン】の問題。 【パターンA: JIS X 8341-3:2004 例示パターン】 におけるPC-Talkerの問題 レイアウトへの影響を失くす。 PC-Talkerのページ内リンクには更なるバグがある。 さらに問題は続く。 PC-Talkerのページ内リンクの特効薬。 まとめ：ブロック・スキップの“決定版” こんにちは。“時代の3歩先をねらうWeb屋さん”ミキ・オキタです。 このブログ「WebClip ウェブデザインのニュース」では、Webデザイン・Webマーケティングの話題をお届けしています。 ブロック・スキップの“決定版”をつくる。 Webアクセシビリティのテクニックに“ブロック・スキップ”(注1)がある。 “ナビゲーション・スキップ”“スキップ・
【ハウツー】FirebugにHTML/CSSリファレンスをアドオン! - FireScope (1) あのプロパティの使い方なんだっけ? これからはFireScopeで一発! | エンタープライズ | マイコミジャーナル
あのプロパティの使い方なんだっけ? これからはFireScopeで一発! SitePoint.comは1月27日(米国時間)、Firebug上で動作するアドオン「FireScope v1.0.1」をリリースした。FireScopeはFirefox2-3のFirebug1.2以降で動作するアドオン。各種HTMLエレメントやCSSプロパティといった要素のリファレンスと各種ブラウザの対応状況、サンプルコードを表示してくれるアドオンだ。SitePointが公開している各種HTML, CSSリファレンスの一部をまとめた内容となっている。 主な機能は次のとおり。 HTML Elements Reference HTML Attributes Reference CSS Properties Reference サンプルコード リファレンス内検索 W3C勧告に準拠しているかどうか 各種ブラウザ対応状況(
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
Takazudoさんの質問に忘年会代わり・バトンに回答する - Trans
ヨモツネットの小山田さんにならい、Takazudoさんからの質問に答えます。 先にエクスキューズ といっても、僕はNPO法人という「組織」に所属するとはいえ、「SOHO」のような個人でサイト制作を請け負っているようなものなので、皆さんと回答の毛色がちょっと異なるかもしれないことをご了承下さい。 あと、Takazudoさんがコーダーが気にしちゃうことバトンというエントリーで、 前回のエントリをバトンにしない？と言われたので とあり、その一人なのですが、まさか質問内容が変わるとは露とも思っておらず、忘年会のときの質問に答えてしまいました...orz重複している質問に関しては忘年会の時の回答にまとめています。また、忘年会の時の回答はこの記事の後半に掲載しています。 てか、バトンと言うからにはやはり誰か指名しないといけないのかな。あ、でも、まずは忘年会参加の人たちが書いてくれるのを待つ感じかなー。
HTML5 で試しに Web ページを組んでみた – VERSIONFIVE
先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。 HTML 5 (W3C Working Draft 10 June 2008) HTML 5 (Editor’s Draft 12 December 2008) HTML 5 における HTML 4 からの変更点 (Working Draft 22 January 2008) HTML 5 の新要素 HTML5が話題になっているので試しに書いてみた。｜CSS HappyLife 試しに
TABLEIZER! | Spreadsheets to HTML Tables Tool
Paste your cells from Excel, Google Docs or another spreadsheet here: Table Style Options
コーダーが気にしちゃうことバトン | Takazudo Clipping*
前回のエントリをバトンにしない？と言われたので、答えられそうな話題にしぼってバトンってことにしてみました。 エディタは何使ってますか？ 高さ揃えるとか、なりで広がるとかいうところに関してtableを使いますか？JavaScriptを使いますか？ ブラウザごとのCSSバグ対処方法はどうしてますか？ 画像置換についてどう思いますか？ 印刷についてどうしてますか？ スクリーンリーダーにて確認などはしますか？ IE7のズーム機能について、対応させていますか？ JavaScriptライブラリのライセンスについてクライアントに説明しますか？ JavaScriptのフレームワークを使いますか？使っている場合は何を使っていますか？ CSSやJavaScriptの圧縮をしていますか？ コーディングにかける時間はどのくらいでしょうか？ あなたのコーディングのこだわりはコレ！みたいなものがあれば。 「コーディン
フレームは非論理的、再掲 (agenda)
このサイトの生い立ちは、とある掲示板で議論が起こり（というよりも一方的に筆者が起こしたものだが）派生したのが理由だが、その掲示板にとあるサイトからの引用が投稿されたので紹介（引用）並びに筆者のそれ対する意見を記しておく。 Personnel - 2001/7/1～15 - agenda - Personnel 私は、サイト構造を明確に示したナビゲーションの存在は、ウェブサイトの構築に是非とも必要なものだと思っている。各文書が、全体構造を示したファイルと直接結び付くことで、初めてウェブサイトたり得るのではないか。結果としてユーザビリティを高めることになるが、本質的な意味はそこにあるのではないかと思っている。 ところがフレームでは、サイト構造と各文書を論理的に結び付けることはできない。視覚的に結び付いていることができるのでさえ、玄関となるトップページを開いた時だけである。ゆえに私はフレームを用
携帯サイトのDOCTYPEについてもう一度考えてみる。 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
以前、 ドコモ iモードサイト作成時のHTML DOCTYPEまとめ （http://dspt.blog59.fc2.com/blog-entry-37.html） について書きましたが、今読み返すとあまりに適当な気がして、 読者の方に誤解を招くのは申し訳ないので、携帯サイトを制作する際に、 DOCTYPEはどのように記述すべきかもう一度考えてみます。 現在、各キャリアが推奨しているDOCTYPEは、 Kamitani79-メロンとバナナとブログさんに書かれているように、各社独自に定めています。 が、しかし実際のところは、3キャリア共通のXHTMLを書く場合には、 XHTML Mobile Profileに従って記述するほうが、各社のXHTMLの仕様を見ても、 一番合っている気がします。 ただ、XHTML Mobile Profileはかの有名なW3Cが勧告したものではなく、 携帯端末の特
マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年 - TRANS [hatena]
東京のマークアップの皆さんと忘年会に行ってきましたというご報告です。 レポエントリー 完全に乗り遅れましたが、参加していただいた皆さんからはすでにレポエントリーが上がっているので、概要を知っている方もいらっしゃると思います。今週月曜日に東京のマークアッパーな方々と出張がてら飲んできました。参加者はこんな感じです。 Archivaのsigさん Takazudo Clipping*のTakazudoさん コリスさん CSS HappyLifeのhiraさん ヨモツネットの小山田さん hamashunさん vantguardeのvantさん なんていうすごい面々だ、これはｗこんな人たちを僕の都合に合わせてもらって、なんかもうごめんなさいというか何というか＞＜月初＋月曜日＋平日っていうかなりの悪条件なのに誰一人も遅れずに来てもらいました！（一番遅かったのが僕というザマ）いやもうほんとありがとうござ
![マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e1f3275295b58535945f2d3a8a439ed200a43e2e/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676522774%2F1365590825)
マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年
ただの雑記。 素晴らしい方々と飲んできた！ こんな面子↓ Arataさん あっきー hamashunさん コリスの中の人 sigさん Takazudoさん vantさん やーホント、ボクが参加しちゃっていいの！？ってくらいすごい方々が揃ってるわけですが、びびりながらでも、参加する価値はありますね。 飲みの内容は、終始hamaさんのお料理トークで盛り上がったわけですが、とても有意義な時間で、素敵なお話満載でした。 特にコリスの中の人とお会いできたのはびっくり。 なんかこーゆーのいいですね。 セミナーとか勉強会より、ただ集まって飲む方がボクは有意義な時間に感じますね。 同じ業界で更に同じような職種が集まると、必然的に会話の内容は、お料理トークになるわけですが、色んな会社の話が聞けるのはやっぱり参考になるっす。 マークアップな人たち（じゃなくてもいいけど）が、ただ集まって飲む会とかってコミュあっ
マークアップな人たち（じゃなくてもいいけど）の忘年会 -2008年 - Archiva
Make a note of it: Web tech, montaineering, and so on. TRANSのarataさんが来るということで開催された、関東のマークアッパっぽい忘年会に行ってきました。改めてみると、というか見れば見るほどそうそうたる面子。 arataさん, TRANS Takazudoさん, Takazudo Clipping* コリスの中の人, coliss 平澤さん, CSS HappyLife 小山田さん, ヨモツネット hamashunさん, hamashun.com vantさん, vantguarde 関西なarataさんに沈黙のTakazudoさんが来るというだけで、どう考えても断るという選択肢はないわけだけど... いや～まさかコリスの中の人に会えるとは。平澤さんも小山田さんも@hamashunもvantさんも、みんな凄い人だし。「いや俺、場違
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create a new fiddle - JSFiddle
サービス終了のお知らせ