タグ

HTMLとmarkupに関するB-SAKATUのブックマーク (24)

  • HTMLにおけるimg要素のalt属性

    HTML Standardの4.8.1.1 Requirements for providing text to act as an alternative for imagesをざっと把握できるように日語で箇条書きにしただけのものです。最終的には原文をしっかりと読むべきでしょう。 基 必ず定義されるべきである その値は空であってはならない その画像に代わりになる最適な文字列である ページ上の全ての画像をそのalt属性の値で置き換えてもページの意味合いが変わってはならない 画像のキャプションや題名、銘とみなされるような補助的な説明を意味するものであってはならない 前後で解説されている情報の繰り返しであってはならない 画像以外に何も含まれていないリンクやボタンで使われる場合 リンクやボタンの目的を明確に伝える文字列を指定する わかりやすく説明するために文章ではなく画像のチャートやグラフを

  • [CSS]パンくずの実装はどのようにするのがよいかの考察

    パンくずは何要素で実装していますか? ul要素? ol要素? p要素? パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。 パンくずのマークアップの考察のきっかけ -ul要素で同列配置 パンくずのマークアップの考察 -ul要素で親子 パンくずのマークアップの考察 -ol要素で順序づけ パンくずのマークアップの考察 -セパレーターの使用 パンくずのマークアップの考察 -Googleを参考に パンくずのマークアップの考察 -HTML5の使用 パンくずのマークアップの考察 -おわりに パンくずのマークアップの考察のきっかけ -ul

  • HTML5 での引用と引用元のマークアップ

    前回の記事 で、HTML5 における引用と引用元のマークアップについて以下のような提案をしました: <blockquote> <p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエレベーターは上昇していたのだろうと私は思う。</p> <footer> 村上春樹『<cite>世界の終りとハードボイルド・ワンダーランド</cite>』より </footer> </blockquote> 引用元についての情報を footer 要素でマークアップし、かつ blockquote 要素の中に置くというアプローチです。かなり気に入っていたのですが、はてなブックマークでこんなコメントをいただきました (ありがとうございます): “Content inside a blockquote must be quoted from another source” なので引用文以外の情報を含めるのは

    HTML5 での引用と引用元のマークアップ
  • 【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次

  • Makes you HTML souce eautifully indented - Ham Cutlet

    インデントを綺麗に

  • address要素の正しい使い方 « HTML5.JP ブログ

    日、html5doctor の記事「The Address Element」の日語訳を公開しました。私の翻訳がうまくないためかもしれませんが、個人的には、この記事には誤解を招いてしまうのではないかと感じるところがありましたので、個人的な見解ですが、私なりの補足を。 該当の記事では、address 要素に住所を入れてはいけないと読み取れてしまいます。しかし、私は、そう思っていません。HTML5 仕様の address 要素の定義でも、そのようなことは言っていないと解釈しています。 address 要素の用途の質は、address 要素に住所を入れて良いかどうかどうかが問題なのではなく、ドキュメントやセクションに関する著者への連絡先情報に相当するかどうかです。もし、これに該当するのであれば、住所でも構わないと思います。 HTML5 仕様では、次のように言っています: The addres

  • Webサイトの「Copyright~」にaddressタグは適切? – メール人語

    皆さん、ホームページの著作権表示のタグは何使ってますか? よくWebサイトのフッターに、「Copyright ~」みたいな著作権の表示がされているのを見かけますよね。 あの著作権表記のHTMLのタグは何を使ってますか? 個人的に、ずーっと気になってたのが、著作権表示に利用されるaddressタグです。 実際に有名なサイトでも多数使われています。 Yahoo! JAPAN <address>Copyright (C) 2009 Yahoo Japan Corporation. All Rights Reserved.</address> mixi <address>Copyright (C) 1999-2009 mixi, Inc. All rights reserved.</address> 三井住友銀行 <address lang="en" class="en">Copyright

  • HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。

    読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。 都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。 7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。 題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。 ちょっと読んでて泣きそうになるくらい事細かに書かれています。 これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。 4.8.2.1 Requirements for providing text to act as an alternative for images 4.8.2.1 イメージの代替として作用するテキストを提供するための要件 ざっくりまとめ

    HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。
  • del要素はあまり使わない方がいいかも - Webtech Walker

    Home Archive del要素はあまり使わない方がいいかも del要素はあまり使わない方がいいかも 2007年11月19日 category:XHTML/CSS Comment(0) Trackback(0) del要素とかins要素って音声ブラウザとかで区別されず、普通のテキストとして読み上げられるんですよね。Web標準の日々のアクセシビリティトラックのメモをぱらぱらと見ていて、そういえば記事にしよう、と思ったのを忘れてました。 通常のdel要素を使った文章 下記のような文章は構造的に問題ないし、一般的なブラウザでは削除された部分と追加された部分がわかりやすく表示されるので問題ないですよね。 例文 15日16日は雨らしいです。 <p><del>15日</del><ins>16日</ins>は雨らしいです。</p> 問題点 上記の例だと音声ブラウザで「15

    B-SAKATU
    B-SAKATU 2007/11/25
    とりあえずは実装していない UA 側に問題があると思うのだが。まあ現実はそれたけじゃすまないんだよね。
  • 何で見出しレベルを飛ばしちゃいけないの? | Takazudo Clipping*

    見出しレベルって飛ばしていいと思うんだけれども。 いいというのは、文章の内容的に考えたら、飛んでるのは自然で、色んなアクセシビリティガイドラインでAAAとかとりたいなら飛ばさないでいくしかないと思った。ちなみに、明確な答えは無い(と思う)。 文章的に自然というのはどういう意味かというと、 見出しには、上から考える見出しと、下から発生する見出しがあると思うんですよ。「レベル見出し」と、「汎用見出し」みたいなものが。 自分が良く出会うのは、こんなの これ(右図)の、「注意」って、h2なんでしょうか? でも「パグ」と「ゴールデンレトリーバー」より明らかに重要度低い。「写真」も同じ。こーいうのって、h1の見出しの下が分かれる場合はh2で、その下で別れる場合はh3で・・・って言う考えとは、逆の考えで、 注意 - 犬が嫌いな人は帰ってください 写真 - 犬の写真 っていうコンテンツの塊だけで考

    B-SAKATU
    B-SAKATU 2007/10/31
    そもそも注意とか写真は見出しじゃないと思うが。 dl 要素を使えば丸く収まると思う。
  • 栄光ゼミナール;塾選びガイド

    栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなDVD(届くまでお楽しみ) 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制(6人から20人程度)できめ細やかな授業を受けることができるタイプと個人指導で1対1、1対2でもっと自分のペースにあわせることがで

  • 見出し要素に関する議論 - 徒委記

    見出し要素に関する議論 2007年6月30日 2007年7月2日 2007年7月4日 2007年7月5日 2007年7月6日 2007年7月7日 2007年7月8日 2007年7月9日 2007年7月10日 2007年7月11日 2007年7月13日 2007年7月14日 2007年7月15日 2007年7月17日 2007年7月26日 サイト内の各ページで常にh1要素をサイト名とすることについて、等々。 2007年6月30日 CSSでイケてるデザインサイト : 雑記帳 : der Gegenwart Rusicaさん。「イケてる」条件に「トップページ以外のh1要素がサイト名になっていないかどうか」を提示。 die Vernunft - 個人的なイケてるサイト基準 emiさん。「駄目ですか…?」 2007年7月2日 h1は最も重要な見出し - 徒書 北村曉。文書作成者は重要と思うものをh1

    B-SAKATU
    B-SAKATU 2007/07/12
    色々気づかされる。今度不自然なところを直すか。
  • 論理構造を文脈に読み換えながら 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名をつけている方には、それほど新味はないかも。) 例によって

    論理構造を文脈に読み換えながら class 名を考える - 我的春秋
  • 諸君 私はコーディングが好きだ - Like@Lunatic

    「諸君 私はコーディングが好きだ 諸君 私はコーディングが好きだ 諸君 私はコーディングが大好きだ マークアップが好きだ サイトの設計が好きだ デザインの実装が好きだ デザインカンプにスライスを切っていくのが好きだ JPEGの圧縮率を決めるが好きだ ファイル名を考えるのが好きだ 文書構造を考えるのが好きだ バリデーションが好きだ 自分が書いたソースを眺めるのが好きだ HTML で XHTMLCSSJavaScript で Microformats で DOMで XML で XSLT で RSS で Atom で この地上で行われる ありとあらゆるコーディング行為が大好きだ 戦列をならべたコーダーの一斉タイピングが 轟音と共に修正依頼を吹き飛ばしていくのが好きだ 空中高く放り上げられた修正依頼が 効力射でばらばらになった時など心がおどる コーダーの操

    B-SAKATU
    B-SAKATU 2007/04/19
    少佐の演説、コーダーバージョン。「後任のコーダーに~」のくだりは、経験はないが想像に難くないなぁ。
  • この1年余り、HTML への関心が薄れてる

    「正しくHTMLを(中略)5つの質問」への回答まとめ(Rusica さん) 「正しくHTMLを(中略)5つの質問」への回答結果に対する感想(Rusica さん) 私は最近、正しく云々の意欲がないので回答しませんでしたが、他の人の回答はちょっと興味を持って読んでいました。まとめが出たこの機会に、私なりの回答と、他の方の回答を読んでの感想を少々。 正しくHTMLを書こうと心がけている人に5つの質問:私の回答 1. HTML文書を制作する際に使用しているプログラムをお答えください。(Webプログラムも含む) インデックスとかナビゲーションとかは、面倒くさいので MT 任せ。文は TTTEditor と Crescent Eve で文章を書き、マークアップをしています。ほとんど TTTEditor です。 2. 採用しているDTDとその理由をお答えください。 HTML4.01 Strict です

    B-SAKATU
    B-SAKATU 2007/04/18
    「括弧書きで読み仮名を書くので何が不満なのか、よくわかりません。」振り仮名を ruby でマークアップして何が悪い。使ってはいないが。
  • http://mynotes.jp/blog/2007/04/emphasis

    B-SAKATU
    B-SAKATU 2007/04/07
    「強調されていたほうが閲覧者にとっては読みやすい」構造ではなく見栄えをメインに考えているからそう思ってしまう。
  • class属性とid属性に関する議論リンク集 - 徒委記

    class属性とid属性に関する議論リンク集 発端 過去の経緯や参考情報 2007年3月18日 2007年3月21日 2007年3月22日 2007年3月23日 2007年3月25日 2007年3月28日 「私はheaderやfooterはidじゃなくてclassだと思うけど、皆さんはどう思います?」 (CSS Nite公式ブログでのレポートより) 発端 CSS Nite Vol.18交流会「HTMLへの回帰」 CSS Nite Vol.18 謝恩会「HTMLへの回帰」の資料公開 過去の経緯や参考情報 CSS Nite Vol.3の企画「木達さんに聞いてみよう」 id属性とclass属性 | Web標準Blog | ミツエーリンクス Tips/WebPage/class と id の違いとは? - outsider reflex idとclassの違い 2007年3月18日 WEBTECH

    B-SAKATU
    B-SAKATU 2007/03/23
    class のほうがいいと思う。header やら footer なんて class 名はよろしくないが。
  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    B-SAKATU
    B-SAKATU 2007/03/21
    『「文書中にひとつしかないからidで」という考えは、良いマークアップフローを生み出さないのではないか』同意。
  • 5W1H のマークアップ 1: When(日時) - 我的春秋

    ちょっと思い立って、5W1H の XHTML マークアップの手段について、少しずつ整理してみることにしました。 理由や意義については、また別エントリーを立てるとして、とりあえず今日のところは、When?(いつ?)...つまり、日時のマークアップ手段から。 (X)HTML meta name="date" syntax <meta name="date" content="[W3C-DTF]" /> [W3C-DTF]: YYYY-MM-DDThh:mm:ssTZD(≒ ISO 8601。必要に応じて、秒・分・時・日・月は省略可。) [TZD]: ±hh:mm | Z(タイムゾーン。日なら "+09:00"。UTC 協定世界時なら "Z"。) 追記: W3C-DTF のバリアントと (X)HTML における %Datetime について 北村さんよりご指摘をいただきまして(→ はてブ コメ

    5W1H のマークアップ 1: When(日時) - 我的春秋
    B-SAKATU
    B-SAKATU 2007/03/13
    abbr より span のほうがいいと思う。
  • HTML における引用とは - まじかんと雑記

    昨日のの続き 自分の文章をより解りやすくするために他の文章の一部などを引き写すこと、これは確かに引用であるが、HTMLblockquote/q 要素が表しうる引用がこれに限られるのかといえば、そうとはいえない。 HTML 4.01 仕様書 9.2.2.1 に次のような例がある: John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q> ここで q 要素は明らかにその内容が他の文章からの引き写しであることを示すために用いられているのではない。こ

    HTML における引用とは - まじかんと雑記
    B-SAKATU
    B-SAKATU 2007/02/17
    HTML の blockquote/q 要素の使用範囲について。普通に引用だと思うんだが。