横並びのフォームのマークアップ - Webtech Walker
以下のような、よくある横並びのフォームですが、どのようにマークアップするのがいいのか迷います。 今まではよく定義リスト(dl)を使ってマークアップしていまたのですが、他にもいろいろなマークアップがありそうなので書き出して見ました。 labelをうまく使えば余計なタグを入れなくてすみます。今回はposition:absoluteで横並びを実現してます（tableを除く）が、floatを使う方法もあります。僕はもっぱらposition派。 リスト(ul,ol) シンプルで、構造の意味的にもしっくりきます。順序付きリスト(ol)か順序無しリスト(ul)にするかはケースバイケースです。 DEMO <ul id="formItems_1"> <li><label for="commentAuthor_1">名前</label><input type="text" name="author" valu
linkのススメ (kuruman.org > 駄的HTML改善計画)
リンクを作る、これはHTML文書の、非常に多くの場面で使われています。 その場合には専らa要素が使われています。 コレはまぁ、当然のことでしょう。 しかし、他の文書との関係を示すlink要素の存在を知っていますか? ココでお勧めするのはlink要素です。 UAによってはこの関係を辿って他の文書へ進める場合もあるのです。 ココではlink要素について、ちょっぴり知識を深めていこうと思います。 link要素とは link要素はただスタイルシートを読み込む為だけに存在する……などと思っていませんか? そんな事はありません。 link要素は head要素の子要素 として存在し得る、 別の文書等との関係を定義する要素 です。 これは空要素(エンプティタグ)として定義されています。 よってスタイルシートの呼び出しの他、 ナビゲーション情報を記述する事が出来る のです。 ……がしかし、圧倒的シェアを誇る
WinIEでabbr要素を何とかする - 徒書
WinIEがabbr要素を理解しないことへの対応として、The Web Kanzakiで用いられいてたスクリプトを少し変更したものを使ってました（参照: 見よう見まねJavascript）。それで今まで動作上特に問題もなく、またinnerHTMLと正規表現を使ってソースを書き替えるという手法はスクリプトの見た目もすっきりしていて分かりやすいのですが、別の手段として、正規のDOM的手法を用いてなんとかならないかと考えまして、試してみることにしました。DOMの勉強も兼ねて。 やり方としては、abbr要素ノードからその子テキストノードとtitle属性を取り出して、それを新しく作ったspan要素に適用し、span要素を文書に追加する、という感じで行けるかなと思っていたのですが、実際にやってみるとabbr要素の子ノードが取り出せなくて躓きました。色々と試してみる中で、確認のため、 <abbr tit
HTMLにおける「段落」をめぐって
HTMLにおける「段落」をめぐって HTML文書での段落の表現について、混乱し た議論や解説が少なからず見受けられる。この小文では、 HTMLの仕様で定義されるP要素と、日本語文の 段落に関したことを扱う。 HTMLではP要素がparagraphを表す HTMLにおいてparagraphを表す要素はP要素であって、それ以 外には無い。これは疑う余地のない事実である。 段落 = paragraph 英語の "paragraph" に対応する日本 語は「段落」である、ということにすると何かと都合が良い。ただ し、「段落」は "paragraph" の訳語とし ては必ずしも適当とは言えず、敢えて「段落」と言わずに「パラグ ラフ」という言い方がなされることもある。しかしながら、paragraphの意味で「段落」という言葉を用いる のは一般の国語辞典にも見ることができ、ほかに適当な言葉が見当 たらな
WinIE で abbr 要素にスタイルを適用させる @ ぽかぽかWeb研究室
旧来 WinIE での abbr 要素 かつて WinIE 5/6 では、 abbr 要素にスタイルを適用させたり、 title 属性によるポップアップ表示をさせたりすることが出来ませんでした。 現在は Windows でも Microsoft Edge, Google chrome や Firefox 等 (これらを用いた派生ブラウザ含む) が主流であり、現状役立つ内容ではありません。「史料」的位置付けとして残しておく次第です。 PC Tips の記事より WinIE6.0 WinIE5.5 WinIE5.01 解決方法 XML 文書として認識させる HTML ではなく XML として認識させることで、 abbr 要素へのスタイル指定などが可能になります。 本文書において、 HTML や XML の部分にマーク附けされた abbr 要素が WinIE でも有効になっていることを確認してみ
「XHTML文書」を text/html として認識させるべからず @ ぽかぽかWeb研究室
text/html と認識された XHTML 文書は XHTML 文書ではない XHTML の理念 W3C では、 HTML を XML 応用系として再構築するため、 XHTML を策定しました。 XHTML は XML であるが故に、従来の HTML としての機能を保持しつつも、他の XML 応用系への組込みや、XSLT などによるデータの再加工、独自のサブセットやスーパーセットの製作など、従来の HTML では困難だったことが容易に、かつ低コストで出来るようになりました。 また、 XHTML は XML であるが故に、 XML 宣言や名前空間という概念、 lang, space などの予約属性や終了タグ省略の禁止など、 XML に特化した記法が必要になります。 text/html として扱われた場合 XHTML 文書を text/html として認識させることは可能ですし、現状 XHT
ISO/IEC 15445:2000 (ISO-HTML)の書式について
2022-09-20 リンク先を修正。 単語の修正。 2004-06-26 DTD の書き換えについてを追加。リンクの不具合を修正。 Pre-HTML に関する記述を追加。「他の SGML 応用系への利用」を変更。 2002-08-31 DTD 上の記述ミスを一つ追加。属性に関する細かい差異を追加。 2002-02-17 address 要素に関して、注意書きを追加。 2002-01-22 実体参照に関する記事、リンクなどを加筆・修正。 目次 はじめに 注意点 ISO-HTML の要素群 HTML 4.01 との相違点 要素・属性の有無 文法上の違い 見出しの階層 見出しの階層構造； DTD によって明記 見出しの階層構造が「あらわ」でない記述 どちらを採用するのか? 見出しの順序はでたらめで良いのか 前者(DTD に階層を明記した記述)の利用法 見出しの出現場所 タグの省略法則 フォーム
ISO-HTML夜話
ISO-HTML夜話――ISO/IEC 15445:2000で作るウェブサイト ISO-HTMLの紹介 ISO/IEC 15445:2000(ISO-HTML)とは何か 2002-09-14 2008-01-03 ISO/IEC 15445:2000(ISO-HTML)の性質 2002-09-14 2004-06-27 ISO/IEC 15445:2000(ISO-HTML)に基くサイト制作 2002-09-14 2005-12-25 ISO/IEC 15445:2000(ISO-HTML)を採用する利点 2002-09-14 2005-12-25 ISO-HTMLに関するメモ ISO/IEC 15445:2000(ISO-HTML)の理念 2002-09-14 2005-07-02 「Pre-HTML」とは何か 2002-09-14 2007-04-09 適合システムであるブラウザの挙動
XHTML文書をtext/htmlとして認識させるべからず 2 @ ぽかぽかWeb研究室
XHTML文書をtext/htmlとして認識させるべからず その2 XHTML 1.1 文書を text/html としてwebで公開している理由の一つとしてMSIE では application/xhtml+xml を認識出来ないからという意見が少なからず散見されます。 ただし、XHTML文書を「正当に」扱うという観点から見れば、やはり上記の意見は理想にも現実にも即していないと思われます。 XHTML 1.1(以上)の実態 XHTML 1.1 (あるいは XHTML Basic など、XHTML 1.1 ベースのもの)では、「HTMLに即した記述」が排除されており、 XML に即した記述に置き換わっています。 言語を指定するための lang 属性は排除され、 xml:lang 属性に置き換わっています。ただし、 text/html では xml:lang 属性は「無用の長物」です。例えば
文書型を選択しよう - Personnel
文書型を選択しよう～ WD ～ （2003-02-25）文書型とは （2003-02-25）何故文書型宣言をしなければならないのか （2003-10-16）どの文書型を選ぶべきか （2003-02-25）補足: XHTMLについての勘違い （2004-06-10）推奨記事 HTMLといっても、若干異なる文法を持った複数のタイプがあります。これを文書型と呼び、一般的には： 文書型宣言（DOCTYPE宣言） をHTML文書の先頭に記述することでそれを示します（XHTML文書ではあるいはXML宣言の次）。例えばHTML 4.01 strictでは、文書の先頭に次のような文書型宣言を記述します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dublin Core（ダブリン・コア）: ウェブ資源メタデータの共通語彙
メタデータをコンピュータが理解して有益な情報とするには、その意味が共通の認識となっている語彙が必要です。Dublin Coreは、ウェブや文書の作者、タイトル、作成日といった書誌的な情報をメタデータとして記述するためのボキャブラリを定めています。15の基本要素と、そのRDFによる表現方法、またより精度の高い情報を提供するための拡張語彙について説明します。 DCMES:基本となる15のプロパティ DCMIメタデータ語彙 拡張プロパティ 符号化スキーム タイプ要素 ウェブ文書でのDublin Coreプロパティの利用 RDFでDublin Coreを使う RDFでDC拡張語彙を用いる 外部RDFメタデータをHTML文書にリンクする XHTMLにDCメタデータを直接記述する 参照文献 DCMES:基本となる15のプロパティ DCMI (Dublin Core Metadata Initiativ
色の組み合わせチェック - 読みやすい前景色と背景色
誰にも読みやすいコンテンツとするためには、文字色と背景色のコントラストをしっかり確保しなければなりません。これを客観的にチェックするため、色の明るさの差などを計算する仕組みを用意してみました。 色の組み合わせ検証 テストの手法 コントラストの計算 色覚偏位のシミュレーション 当サイトが独自に加えたコントラストの段階評価 コントラストと読みやすさの相関関係 色の組み合わせ検証 検証してみたい文字色と背景色の組み合わせを入力してみてください。色の指定には3桁もしくは6桁の16進数カラーコード、あるいは色名（CSS2の色名＋SVGの色名、計147色）およびrgb()の表現が使えます（初期値は、読みにくい例が入っています）。また、入力欄左ボックスから216色のパレットを呼び出して入力することもできます。文字色2、3は、複数の文字色の組み合わせを表示するためのオプションで、コントラストなどの計算は行
テーブルとアクセシビリティ -- ごく簡単なHTMLの説明
大きなテーブルは、音声読み上げで内容を聞いているとき、データが何を示す値であるかが混乱してきます。音声ブラウザは、th要素の内容やtd要素のheaders属性を利用して、補助的な情報を読者（聴取者）に伝える機能を持っています（WebSite DesignのVol.3で「音声ブラウザでもまだサポートされていない」と書いてしまいましたが、新しいバージョンはかなり対応が進んできました）。 音声ブラウザとth要素 長い見出し項目の省略形 セルの関係を示す属性 scope属性 headers属性 データの次元と軸 補足：テーブルsummary属性の読み上げ 音声ブラウザとth要素 表（テーブル）は、大量のデータを縦横の二次元に整理することで、視覚的に把握しやすくします。しかし、音声合成でテーブルを読み上げる場合、データは順番に一次元的に読み上げられるため、全体像を把握することが難しくなります。たとえ
文月氏アンケートの平均値を計算してみた | Adan Kadan Blog
平均顔が美人という話題がかつてあったが。 それだったらば、文月氏アンケート([読みやすさアンケート]800件集計)の平均値をとったら、そこそこ「美人」なCSSができるんではないか、と考えてｗ、平均値を計算してみた。 文字サイズ：14.6px 余白：16.0%（1024モニターと仮定すると、文字表示幅：696px） 行間：169.8% で。「文字色」「背景」は、薄地に濃い文字、濃地に薄文字が混じっているので無視することにし。 「文字色×背景色」(0.5%超えているのはたまたますべて薄地に濃い文字)の平均をとってみたところ、 バック：RGB(241,241,241) 文字：RGB(31,31,31) となった。 これを16進変換したら バック：#f1f1f1 文字：#1f1f1f になった!!! むろんまったくの偶然だし、次回の集計で平均値を計算したら、違う結果になるのだろうけど。文字の並びが
AdanKadan_テキストサイトのための“最低限”HTML
テキストサイトのための“最低限”HTML by 阿檀 "支店"ページ、営業中ｗ。 携帯電話用サイト『AdanKadan-K』 (KUTIKOMI) Excite Blog Links (Google窓あり) 『ブログで小説！』 (《FC2》ブログ) 付・《FC2》"勝手に厳選"リンク集 このサイトについて HTMLを勉強する為のサイトはたくさんあります。非常に充実したところも多いです。ただ…、充実した老舗であればあるほど、情報量が多すぎるの(笑)。どっから手をつけたらいいのか、くらくらしてしまう方も多いはず。 だから、このサイトは、「文章を載せるサイトを作りたい方が」「テンプレートに文章をはめこんで」「タグを３つ覚えたらサイトが始められる」という最小限の内容を目標にすることにしました…。あくまで目標＆未達成ｗ “工夫”しないとどうなる? 行間と余白をあけただけで… 【おまけ】フォントサ
画像の使用を極力控えてかっこいいCSSデザインをやってみよう
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
ウェブのテキストがもっとも読みやすい文字色と背景色は？ | POP*POP
1997年の研究ではありますが、「ウェブ上のテキストがもっとも読みやすいのはどういうとき？」なるものが紹介されていました。 » Web page readability: Green text on yellow works the best この研究では、フォント、色、スタイルをいろいろ変えてどの組み合わせが読みやすいかを調べたようです。 いくつか参考になりそうな結果があったのでご紹介していきます。 では早速その研究結果から。 もっとも読みやすかったのは「黄色の背景」に「緑の文字」だそうです。ただしフォントが斜体のArialのときはこの組み合わせは最悪だそうです。 Times New RomanのほうがArialより読みやすい。 フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。 ↑ こんな感じですね・・・。 「グ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WDG HTML Validator
W3J.org
小説HTMLの小人さん