Tag: Markup

タグ Markup がつけられた記事のリストです。

最近試している Sass の書き方

Sass 3.2 の % セレクタと @extend を使って、スタイルの実装とそれらを利用するためのインターフェイスを分離する、みたいな書き方ができないかという模索。ご意見求む。

ブログ記事リストのマークアップ

サイトをリデザインした のにともない、全体的にマークアップについても見直しているのですが、ちょっと悩んだのがホームやアーカイヴ・ページなどにある「ブログ記事の概要や抜粋のリスト」です。

Microdata + schema.org を実際に使ってみる

schema.org は Google、Microsoft (Bing)、Yahoo! という Web 検索の大手 3 社が共同で取り組んでいる試みで、より構造化されたマークアップのための共有の語彙集 (vocabula […]

HTML5 のテーブル関連要素

HTML5 の テーブル関連要素の仕様 は HTML 4.01 から変更されている部分がけっこうあるようなので、変更点を簡単にまとめてみました。なお本稿での HTML5 の仕様は 2010 年 10 月 19 日付 W3 […]

HTML5 + WAI-ARIA: 入門篇

このサイトを HTML5 でリニューアルした際に保留としたまますっかり忘れかけていましたが、ようやく WAI-ARIA を導入してみました。 WAI-ARIA は W3C の Web Accessibility Init […]

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

前回の記事 で、HTML5 における引用と引用元のマークアップについて以下のような提案をしました: <blockquote> <p>エレベーターはきわめて緩慢な速度で上昇をつづけていた。おそらくエ […]

blockquote + footer

コメントでの指摘を受け、新しく記事を起こしました: HTML5 での引用と引用元のマークアップ HTML5 の 2010 年 3 月 4 日付 W3C 草案 で、footer 要素は以下のように定義されています: The […]

aside 要素とプル・クオート

HTML5 の 2010 年 3 月 4 日付 W3C 草案 では、aside 要素は以下のように定義されています: The aside element represents a section of a page th […]

HTML5 の dl 要素

HTML5 の 2010 年 3 月 4 日付 W3C 草案 で、dl 要素は以下のように定義されています: The dl element represents an association list consistin […]

HTML5 へ移行

というわけで、このサイトを HTML5 でマークアップしてみました。個別記事内のフレージング系の見直しはまだ手つかずで、まずはセクショニングまわりから固めています。納得のいかない部分もありますが、まずは公開して、これから […]

WordPress で HTML5 を書くための準備

現在、このサイトを HTML5 で再構築しようと画策しています。今日はその「準備編」ということで、WordPress で HTML5 をパブリッシュするために、どのようにテンプレートをいじればよいかを考えてみました。ここ […]

要素を非表示化するスタイル

HTML にはスクリプトが有効である場合は表示されない noscript 要素というのがあるけど、同様に「スタイルシートが有効の場合」や「印刷した場合」など、状況に応じて要素を非表示化するスタイルを書いてモジュール化しておくと便利。 /* スタイルシートが有効の場合は非表示 */ .nostyle { display: none; } /* スクリーンメディアでは非表示 */ @media screen { .noscreen { diaply: none; } } /* 印刷では非表示 */ @media print { .noprint { diaply: none; } } <p class=”nostyle”>こ…

僕が HTML 4.01 を選ぶ理由

このサイトの文書型を XHTML 1.0 から HTML 4.01 に変更しました。 その理由を説明するために、まずはそもそも XHTML だった理由から振り返ってみます。結論から言ってしまえば、まあその、「とりあえず」、ですね。僕が Web デザインの勉強を始めたのが 2006 年初頭で、そのときに参考書として選んだのが 2005 年 7 月に初版が発行された『Web 標準の教科書 — XHTML と CSSでつくる “正しい” Web サイト』。なんとなく雰囲気が伝わるといいんですけど、いわゆる「Web 標準の時代」とでも言うべき時代に僕はこの世界に入ったわけです。当時の空気としては「これから…

チェック/ペケ

HTML/XHTML で チェックマーク (Tick) や ペケ (X mark) を表示させるには以下の文字参照が使える。 数値文字参照名称 ✓&#10003;CHECK MARK (tick) ✔&#10004;HEAVY CHECK MARK (bold tick) ✗&#10007;BALLOT X (cross) ✘&#10008;HEAVY BALLOT X (bold cross) しかし IE6 では文字化けすることが多いようなので、CSS で Unicode フォントを指定するといいみたい。 <!– HTML/XHTML…

この数値文字参照がすごい! 2008 年版

早いもので今年ももうこの季節である。文字実体参照に比べて覚えづらい数値文字参照、その中でも使用頻度の高いものにスポットを当てる「この数値文字参照がすごい!」の 2008 年版をお届けする。 第 1 位: 〜 (&#12316;) 満場一致。文句なしでぶっちぎりの首位に立ったのはご存知「波ダッシュ」。その ややこしい背景 を考えれば HTML での表記は可能な限り避けて他の表現で代替したいところ。たとえば英語圏では「いつからいつまで」「どこからどこまで」の「から」は en ダッシュ (–) を使うことが多いみたい (ソース: Dash – Wikipedia, the free encyclopedi…

(要素に) 名前をつけてやる

いわゆるヘッダやフッタなど、ページを構成する主要なブロックをマークアップする際、div 要素に id 属性で名前をつけることが多い。<div id=”header”> とか。なぜ class ではなく id なのか? その理由としておそらく最も多いのが、「ページ内で唯一のものだから」。HTML を解説した本やなんかを読むと、「複数出現する (またはその可能性のある) 要素は class で、唯一の要素は id で」なんて書いてあることがよくある。 僕も長いことそうしてたんだけど、どうも違うんじゃないか、と最近は考えてる。今しっくりくるのは、「id 属性は唯一の要素に名前をつけるためのものではなく、要素に一意の (uniq…