はてな記法とHTMLマークアップまとめ - dobby dog doughnut
はてな記法を使ったとき実際にどのようなHTMLが出力されるのか、CSS用にクラスやIDに特化したまとめを作ってみたよー。簡潔にするためにはと略してあります。 07/11/22 自動リンク系記法を追加しました。 07/11/21 とりあえず自動リンク系以外の記法だけ 見出し記法 記法 *[カテゴリ1][カテゴリ2]見出し HTML（1段表示） <h3> <a><span.sanchor>■</span></a> [<a.sectioncategory>カテゴリ1</a>][<a.sectioncategory>カテゴリ2</a>]見出し <span.timestamp>00:00</span> </h3> HTML（2段表示） <h3.title>見出し</h3> <p.sectionheader> <span.sectioncategory><a.sectioncategory>カテゴリ1
横並びのフォームのマークアップ - 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
DLをTableに見せる
コンテンツメニュー dtにメニューの名前、ddに説明。 プロフィール dtに項目名、ddにその項目の値。 dtに「血液型」、ddに「B型」など。 リンク dtにサイト名、ddに説明やバナー。 ギャラリー dtに画像、ddに説明など。(複数のリストの場合) チャット・対談・会話 dtに発言者名、ddにメッセージ。 /* dl-sample */ #sample * { margin:0; padding:0; border:0; } #sample dl { border-top:0; border-bottom:1px solid; border-left:1px solid; border-right:1px solid; background:#eee; } #sample dt { float:left; clear:both; width:9em; padding:0.5em; _
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cheat Sheets - Added Bytes
DIV要素で構造を補強
