2.3・3.0を参照。S.A.Cを別途起動させる必要はありません。メニューバーの「開発」から「Validator-SAC.app」を選択します。DeveloperでHTMLチェックする時に開く程度で、あまり使わなくなってきた。S.A.C.をインストールしてみた。URLを入力し、Checkボタンをクリックローカルのファイルは、ドラッグすると検証ができます。src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script></body></html>SEEditは日本語入力が気に入らないけど、スニペットや補完が強力で使いやすい。Typeのテンプレートタグが必要な場合にはDreamweaverという感じで使い分けています。以前からOGPを設置しようと思っていたが、やっと手を付けた。http://validator.nu/として公開されていたサービスと同じバックエンドを用いており、DTDを利用せずに検証を行うサービスです(HTML5にはDTDがありません)。Liteも検証できるそうです。HTML5」の簡単な解説でメインカラムがほぼ終了しましたので、本日はサイドバーについて解説します。グローバルナビゲーションを設けておらず、主となるナビゲーションをカテゴリとしてnav要素でマークアップした。*ブログにより違うかもしれない。TrackBackとPoweredをaside要素、その他をsection要素でマークアップした。Entries」と「Archives」はul要素ではなくol要素でリスト化した。Type</li><li>@Style</li></ul></aside><section><h2>Search</h2><ul><li>検索フォーム</li></ul></section>コメントとトラックバックの「┗」はCSSの:before擬似要素で表示した。HTML5」の簡単な解説でコメントフォームについてやり残していましたので続きです。コメントフォームでinput要素type属性の値に新しく加えられたemailとurlを利用した。>現在実装できているのはOperaだけらしいが、コメント時に妥当なメールアドレスやURLを記述しないでボタンをクリックすると、以下のようにエラー表示してくれる。HTML5」の簡単な解説です。ブログ記事についてブログ記事リストではないのでol要素でリスト化する必要はない。divで余白の調整、ブログ記事全体をarticleとする。前々回の解説のように「ブログ記事のタイトル」と「メタデータ」をheader要素とした。*余白の調整もarticle要素に任せて良いかもしれない。タグ・トラックバック・コメントはセクションを分けた。それぞれのタイトルをheader要素でマークアップ。他のブログから受けたトラックバックの内容はaside要素とした。コメントごとにarticle。コメントとトラックバック時刻はメタデータと同様にtime要素とした。コメントフォームも解説すると長くなるので次回に。HTML5」でコンテナの幅を調整したいというご要望がありましたので、予定を変更してCSSでの調整を解説します。コンテナやカラムの幅の調整方法Layout部分36行め以降のheader#branding・div#content・footer#copyで全体の幅を指定し、div#mainとdiv#subでカラムの幅を調節します。*ノーマルな状態ではメインコンテンツには468pxのバナーがぴったりと入るように設計されています。.innerの左右padding)=680px(div#main)960px(全体の幅)-680px(上記数値)-2px(IE用調整)=278px(div#sub)サイドバーが48px増えてるが、このままではアイテムのサムネイルが横に3つ入らずおかしな余白ができる。.innerのpadding-leftを2px減らす。HTML5」の簡単な解説です。「HTML5のセクショニングをどうするか」が一番悩んだ。「ブログ記事の概要」全体をarticle要素でマークアップ。*それぞれの「ブログ記事の概要」は初回の解説のようにol要素でリスト化している。ブログ記事のタイトルと各メタデータはheader要素。section要素で区切り、エントリータグ。「続きを読む」をfooter要素でマークアップ。<article><header><h2>ブログ記事のタイトル</h2><ul><li>メタデータ</li></ul></header>ブログ記事の本文<section><h3>タグ:</h3><ul><li>タグ</li></ul></section><footer>続きを読む</footer></article>「ブログ記事」テンプレートは「トラックバック」「コメント」「コメントフォーム」があるのでさらに複雑になる。HTML5の簡単な解説です。ブログ記事のメタデータについて各々のデータをリスト項目として取扱い、セパレータに文字を使わずCSSの:before擬似要素で表示。IEでも表示させるためにIE9.jsが必要となる。投稿時間をtime要素・pubdate属性・datetime属性でマークアップ。format_name="iso8601"とした。HTML5の簡単な解説です。今回は・・・banner_header.mtmlのheaderについてh1要素にはMTBlogName、副題としてh2要素にMTBlogDescriptionを利用、これらをhgroup要素でグループ化。tag="BlogDescription">とし、MTBlogDescriptionがある場合のみh2要素を出力。見出しをグループ化するhgroup要素だが1個以上のh1~h6要素があればよいのでh1のみでも問題はない。tag="BlogDescription"><h2><$MTBlogDescription$></h2></mt:If></hgroup></header>メインページとブログ記事リストメインページとブログ記事リストはol要素でマークアップ。ブログ記事リストという位なのでリストにするのは当然かも知れない。新しい順に並ぶのでul要素ではなくol要素が適当だろう。HTML5は、リリースから約1ヶ月経過し少しずつダウンロードして頂いております。HTML5は初めてという方もいらっしゃるようなので、数回にわたって(簡単に)解説し(ていきたいと思い)ます。Reserved.</small></p></footer></body></html>主要なところだけ抜き出していますが、XHTMLから比べると非常にシンプル。http://html5shiv.googlecode.com/svn/trunk/html5.jsはIEでHTML5の新要素section要素やarticle要素をブロック要素として振るまえるようにし、http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.jsでCSSを少しまともに解釈出来るようにします。header要素とfooter要素でコンテンツ部分との分離を行います。今までaddress要素でマークアップしていたCopyrightはfooter内のsmall要素に変更。*HTML5でsmall要素は、見栄えをコントロールするプレゼンテーションモジュールからセマンティックな「細目を表す注釈」へと変更になったので注意が必要です。Web標準Blog新しいバージョン0.8.0ではアーキテクチャが一新され、検証時間の短縮や信頼性の向上が図られています。タイプに関するチェックなど、XMLに関するエラー検証の精度が高まっています。validatorではinvalidとなる可能性があることにご注意ください。Web標準Blogチェックしてみると検証時間がやけに長い。8」の基本設計を示唆--セキュリティと使いやすさを追求Wilson氏は、「標準化団体ではローカルストレージやセキュリティモデルの改善に関する作業が進んでいる」と語り、MicrosoftがW3Cと、HTMLバージョン5とXHTMLバージョン1および1.1の標準化で協力していることも付け加えた。二年後には一気に加速するかもしれない。リンクとフォームの構成部品、オブジェクトの全体を通しての論理的なTab移動順を設定しておく。重要なリンク(クライアントサイド・イメージマップのリンクも含む)、フォームの構成部品とそのグループには、キーボード・ショートカットを付ける。/></p>隠し技的にaccesskeyを追加するよりも、accesskeyによるショートカットを設けていることを明記すべきである。text/htmlはどうなるのか...W3CXHTMLPosted@Style02:11xml:lang属性2007年2月12日xml:lang属性は、指定した要素内の内容を書き表している言語を示します。xml:lang属性を指定します。lang属性と同じでアルファベット2文字で言語の種類を表す言語コードを指定します。文書内で使用している言語を指定することで、検索エンジンのロボットが情報を収集する際の各言語別の文書インデックス化の手助けや音声出力環境の読み上げ時に言語特有の発声規則を使えるようになることが期待されます。他文書の引用などで文書内(blockquote要素等)での言語コードが変わる場合がある。documents.</p></blockquote>同様に、複数の言語に対応したスピーチ・シンセサイザーが、適切なアクセントの正しい発音で内容を読み上げられるようになります。言語の変更が示されていなければ、スピーチ・シンセサイザーは現在の言語内で最も適切だと思われる言葉で読み上げようとします。したがって、フランス語で車を表す「voiture」という言葉は、基本言語として英語を使用するスピーチ・シンセサイザーでは「voter」(投票者)と発音されてしまうことになります。言語の変更を明示する上で示したようにhtml要素で指定した以外の言語コードが出現するたびに再度指定する必要があり、音声出力の読み上げにも大きく影響する。%i18n;言語コードAccessibilityXHTMLPosted@Style01:53map要素2007年2月8日map要素は複数のリンクをグループ化してナビゲーションの読み飛ばしに利用することができる。【例】この例では、MAP要素によってリンクをグループ化し、title属性によってそれがナビゲーション・バーであることを示しています。グループ化したリンクの中の最初のリンクは、グループの後にあるアンカーへと移動するようになっています。各リンクは、リンクしていない印刷可能な(両端をスペースで囲った)文字で区切られていることに注意してください。(【訳注】MAP要素には、HTML4.01の場合はname属性を、XHTML1.0の場合はid属性を必ず指定する必要がありますので注意してください。>元々イメージマップのために定義された要素型であるため解説しているサイトも少ない。アクセシビリティアップを目指してmap要素を有効に利用しよう。AccessibilityXHTMLPosted@Style01:25dl要素2007年1月22日mixiのXHTML・CSS関連コミュニティでもたまに語られる【dl要素】は様々な使い方がされている。アットスタイルやBlogStyleでも積極的に使用している。(r)evolutionでもプレゼンされている。)によるとh1-h6要素はページ全体から見た文脈上の見出しでしかないため、個別的・直接的な見出しをdt要素で示し、対応する内容をdd要素で示す方法が好んで使われる。dt要素の子要素にはテキスト/インライン要素しか置けないが、dd要素の子要素にはさらにブロックレベル要素も置ける。この内容モデルの自由さが多目的利用のひとつの理由に。dl要素はtable要素の使用を避ける目的でも使われる。th要素をdt要素に、td要素をdd要素になぞらえる。<dt>(タイトル)</dt></dl>dtより先にddが出現している。DTDから考えると間違いではないが、文書の構造的にはおかしくはないか...1月22日追記:記事を一部修正いたしました。acronym要素は廃止される予定です。abbr要素・acronym要素闘争問題にも終止符が打たれることとなりました。abbr要素に統一しなさいということになるのでしょう。acronym要素の違いIE7の対応についてはまったく確認していなかった。他のモダンブラウザのように下部に点線ボーダーが出ないので、カーソルを合わせてみないとabbrを使っていることが一切解からない。現在は閉鎖した個人的なブログへ2005年7月20日にエントリーしたものですが、本日、あえてこのブログにエントリーいたします。去年くらいから、いろんなところで【ビジネスブログ】という言葉を見るようになった。ビジネスブログウオッチを見てみたら、アフェリエイトばっかり。私のサイトでは、ビジネスブログという言い方は一切していない。テンプレートも【商用テンプレート】Nucleusで構築した奥さんのサイトもコメントやトラックバックは受け付ける(本当はいらないんですが...)ようにしているけれども、サイドバーに一覧はない。エントリーの中に買い物カゴは、ちゃんとある。「BlogをCMSとして使う」という目標で、変更を続けている。(更新ではありません)よく制作会社ではこんなことを書いてる。ビジネスブログとは、ブログを利用したサイト構築サービスです。HTMLがわからない人でも簡単に、素早くサイトの更新をすることが可能となりました。Strictで記述し、基本的にStandard(標準準拠)モードで表示する。beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。beta2」と略している。7に於けるCSS実装を検証している記事だ。7でもapplication/xhtml+xmlをサポートしないのだろうか。Jaの開発プロジェクトサイトを構築されるとの事で有限会社ITプロフェッショナルの蒲生(Dakiny)さんと電話の最中、address要素の話となった。address要素は問合せ先等の情報を示す際に用る。メールアドレス等記述する。address要素はブロックレベル要素で中身はインライン要素に限られる。上記程度の知識なので、うまく説明できなかった。気になる...Web標準の教科書これまでのWebページ制作においても、かなり限定的ではあるがメタデータが利用されてきた。(X)HTMLのmeta要素(p.48)でその文書のキーワード、制作者などを示す、link要素(p.53)で他の文書との関係を示す、address要素(p.59)で作成者情報を示す、xml:lang属性で自然言語を示すといったことは、まさにその文書に関するメタデータの記述例である。こんなに近くに答えがあった。目指すを読んで初めて知ったのですが、MSNサーチには以下のような推奨事項があります。コードのみを使用してページを作成します。すべてのタグに終了タグが存在すること、およびすべてのリンクが正常に動作することを確認します。そのサイトに関するインデックスを効率的に作成できないことがあります。ユーザーがサイトに含まれる一部のページを見ることができないことがあります。1テキストであれ子要素であれ、コンテンツのあるに要素は必ず開始タグと終了タグがなければならない。<P>、<DT>、<DD>、<LI>は、単独で使われる場合が多い。これはブラウザの種類によりけりで、要素がどこで終了するのかを正しく推測してくれればの話だ。ブラウザはいつも著者が考える通りに推測してくれる訳ではない。よって、開始タグは必ず終了タグで閉じたほうが賢明である。1XHTMLでは終了タグは必須。Validのバナーをはりたい。