ウノウラボ Unoh Labs: buttonタグでサブミットするあれこれ
CSSでいつも悩まされるのはクロスブラウザですけど、フォームでは特に面倒くさい要素が山盛りですよね。ボタンの文言を動的に変えたいから画像はなるべく使いたくないけど、だからといってブラウザのデフォルトのボタンとか、味気ないですものね。 今日は、フォームにつきもののボタンについて考えてみます。 私たちがボタンに求めるモノって、何でしょう。 データを送信（submit）する どのブラウザでも同じように見える 使い回しが聞く ボタンについている文言がどんなに長くなっても、水平方向の長さがフレキシブル 上記のようにサイズ的にフレキシブルであっても、見た目の美しさを阻害しない ボタンの大きさ＝クリックできるエリアの大きさ 画像がdiableされていても使用可 CSSがdisableされていても使用可 ボタンのように見えて実はただのリンクの時のもある これらの要求を解決してくれる方法が複数出
ウェブ標準、それは状況や環境に左右されない情報伝達を実現するためのもの
何がウェブ標準で、何がウェブ標準でないか一般にW3C、ISO/IEC、IETF、ECMA、IANA、OASISといった国際的な標準化団体やガイドライン策定機関によって発行された技術や仕様、ガイドラインが、ウェブ標準の「標準」で表される技術や仕様であるとされており、「ウェブ標準技術」あるいは「ウェブ標準仕様」という。また、ウェブ標準的な仕様に基づいて定義されたウェブサイトを「ウェブ標準に準拠している」などという。 そういった団体のなかでも、特にW3C（ワールドワイドウェブコンソーシアム）が策定する各種の仕様が、最も「ウェブ標準的」だといえる。しかし、W3Cの仕様であればすなわちウェブ標準なのかというと、必ずしもそうではないのが困ったところだ。なぜこうも曖昧なのかといえば、ウェブ標準とは、「なんとなく標準的な仕様であろうもの」のこと全般を指すからだ。「ウェブ標準」に厳密な定義はなく、ときにはマ
見出しと木構造
見出しと木構造（石川一靖さん） HTML4 では見出しレベルは内容の重要度によって決めるという指針が示されているけれど、見出しの重要度が木構造をなすとまではいっていない。内田明さんの邦訳が上位とか下位といった表現を採用しているのが間違いだとは思わないが……。 7.5.5 Headings: The H1, H2, H3, H4, H5, H6 elements（W3C） A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically. There are six
名前のウェブとXHTML文書のプロファイル
情報は伝わるか？ そもそも情報は伝わらない… 生命情報：生物が世界と関係することで出現する、意味のある（識別できる）パターン 観察者（主体）が世界をどのように捉えるか（関係）を表すパターン。人によってその関係＝パターンは異なるので、完全には伝えられない。 社会情報：生命情報を人間が（ことばとして）記述する 共同体（国家、コミュニティ…）での共通了解＝意味のとりあえずの固定（規範化作用） 機械情報：言葉の記号作用の「記号表現」だけを取り出したもの コンピュータ、ネットワーク上のデータとして蓄積、交換される （西垣通 『ウェブ社会をどう生きるか』） そこを何とかうまく伝えるためには 明晰な論理と文章 分かりやすい情報のかたち 互いに理解できる名前 情報の伝達と名前 機械情報を介した情報のコード化と再構築 情報が伝わるためには、まず社会情報が適切に再現される必要がある 同じ社会情報でも人によって
はてなブックマークコメントを表示する - カナかな団首領の自転車置き場ダイアリー
「カナかな団の躁鬱」に、はてブコメントを表示するようにしてみた。が、たいしてブクマされてない（2個くらい）のでアレですが。とりあえずメモ。 <?php #リクエストURLを取得 $var = $_SERVER["REQUEST_URI"] ; #リクエストURLからクエリ以後を取り出す $dataurl = preg_replace ("/.*read|\.|php|\/|\?/", "", $var) ; //はてブコメント #フラグメント識別子を作るための元 $hatenano = substr ($dataurl, 8, 1) ; $hatenafla = preg_replace ("/0/", "10", $hatenano) ; #print "$var%23PrintNo$hatenafla"; #フラグメント識別子なしURLのはてなブックマークコメントを読み込む $hate
論理構造を文脈に読み換えながら class 名を考える - 我的春秋
POSH encapsulates the best practices of using semantic HTML to author web pages. Semantic HTML is the subset of HTML 4.01 (or XHTML 1.0) elements and attributes that are semantic rather than presentational. posh - Microformatsより 基本的にはより論理構造を意識した class名をつけることが、今日のお話の目的なんですが、semantic-class-names のリンク先にない新味は、論理構造を文脈に読み換えながら class 名を考えるという点。（ただし、普段から意識的に文書全体の構造に照らして class名をつけている方には、それほど新味はないかも。） 例によって
HTML に装飾要素は必要
HTML 5（WHATWG） HTML 5 differences from HTML 4（W3C） HTML 5の覚書（石川一靖さん） 英語の方は拾い読み。どうせろくに読めないし……。 b 要素、i 要素、small 要素、sup 要素、sub 要素などの存続を石川さんは理解できないようだけど、私は工学部の卒論を HTML 文書化したので、物理的な装飾を行う要素の存在理由はよく分かります。 当時、学内には古い UNIX が残っていて、搭載ブラウザは Mosaic でした。CSS 以前の時代のブラウザ。製作者スタイルがユーザ環境に反映される保証が全くない。じつは今後も、製作者スタイルに対応しないブラウザは残り続けると W3C も WHATWG も考えていると思う。チープな環境はいつまでも消えてなくならない。 例えば、iPod nano クラスの携帯機器が HTML 文書に対応するとき、製作
Webstemmer（クローラーツール）
日本語サイトでは、具体的な性能は測定していませんが、 以下のようなサイトで正しく動くことがわかっています: アサヒ・コム Nikkei NET Mainichi INTERACTIVE Yomiuri On-line IT media 東京新聞 日刊スポーツ 信濃毎日新聞 livedoor ニュース 使いかた Webstemmer をつかったテキスト抽出は以下のようなステップになります: まず、特定のニュースサイトから種となる HTML ページを多数取得する。 取得したページのレイアウトを学習する。 別の日に、同一のニュースサイトから新しい HTML ページを取得する。 2. で学習した結果をつかって、新しい HTML ページから本文を抽出する。 1. および 2. のステップが必要なのは最初の 1回だけです。 ひとたびサイトのレイアウトを学習してしまえば、 あとはレイアウトが大きく変更さ
XHTML CSS (r)evolution vol.3の骨子 (kuruman.org > Kuruman Memo)
益子さん主催のXHTML + CSS (r)evolution vol.3と云うイベントに足を伸ばしてきました。題目はHTML 5の概要、との事。取り急ぎ骨子を紹介いたします。なるべく実際の表現を尊重してメモをとるよう心掛けましたが、誤りを含む可能性があります。 私見を述べるのは、またの機会にでも。関連エントリーとしてXHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか?を公開しました。私なりの結論を述べるとこのイベントの内容は信じるに値しないと考えます。 なお、このエントリーを読む方には途中で止めず、対談後半のW3Cの主張もきちんと読むことを強く推奨します。この部分については公開された音声を文字起こしし、書き改めました。十分正確な情報を得ることができるようになったと思います。 益子さんのプレゼン HTML 5のきっかけはtbl 彼がブログへエントリーを投稿した
Ordinary person drawing Udonge with text
From Nico Nico Video. This is simply way too awesome XD I have nothing but respect for this person. Ordinary my ass, this person is about as ordinary as Marisa is. Oh and you suck Youtube, you and your shitty compression. Original: http://www.nicovideo.jp/watch/sm336877 Song is from this video/flash: http://youtube.com/watch?v=8SE4DPZ4Il8 Check out the related video by mecorx: http:
colgroup / col 要素を活用してみる | WWW WATCH
table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組み... table 関連の要素とか属性っていろいろあるにもかかわらず、結構使われていないなと思ったり。 上手にマークアップしておけば、アクセシビリティ的にも優れた表組みが再現できるだけでなく、CSS で見た目をいじるときにも、無駄に class 属性なんかをつける必要もなかったりと、いろいろ良い事あるのになということで、今回はその中から colgroup 要素と col 要素について書いてみることにします。 例えば上記サンプルのような表を作りたいと思ったとき、列方向 （縦方向） のセルに背景色を指定するためだけに class 属性を付けていったりするのは面倒だしスマートじゃない。サンプルのように列方向の各データが構造的にグループ化で
最新のHTMLって何? | 水無月ばけらのえび日記
更新: 2007年5月16日 「全問正解できる？ HTML文法基礎クイズ (allabout.co.jp)」というものがあるようですが、難易度がとても高いですね。全問正解できる人いるんでしょうか? 私が悩んだ難問だけメモ。 Q1. 非推奨要素 以下の4つの記述のうち、文法的に最新のHTMLでは使わないことが推奨されているものがあります。それはどれでしょうか？ 1. <strong> ～ </strong> 2. <b> ～ </b> 3. <table> ～ </table> 4. <h1> ～ </h1> 以上、全問正解できる？ HTML文法基礎クイズ より 初っぱなから超難問で、私には答えが全く分からないのですが……。ちなみに、b要素は使わない方が良いと個人的には思いますが、HTML4.01 では deprecated になっていませんし、XHTML1.1 でも Presentatio
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
対策遅らせるHTMLエンコーディングの「神話」
クロスサイト・スクリプティングという言葉は元々，WebアプリケーションのHTMLエンコード漏れなどを利用することによって第三者にJavaScriptを実行させる手法を指す。広義では，HTMLのエンコードによる画面改変などを含むこともある。 前回述べたように，クロスサイト・スクリプティングのぜい弱性はWebアプリケーションに見付かるぜい弱性の半分以上を占める。数年前から指摘されているにもかかわらず，一向になくならない。その理由として，クロスサイト・スクリプティング対策あるいはHTMLエンコード注1）に対する「神話」があり，正しい対策の普及を遅らせているように思う。その「神話」の数々について説明しよう。 注1）実体参照（entity reference）というのが正式だが，あまり普及していない用語なので，HTMLエンコードという用語を用いる 「すべからくHTMLエンコードすべし」が鉄則 HTM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://mynotes.jp/blog/2007/07/inline_in_div
http://mynotes.jp/blog/2007/07/html5_elements
d:id:quaa - 最小のHTML 4.01?
cybergarden.net
http://masairuka.seesaa.net/article/42980362.html
PECL :: Package :: tidy