1. 弓状列島「高天原」
  2. より良いWorld Wide Webを目指す為の覚書
  3. 「高天原」スタイルシートギャラリー
  4. 新緑スタイルX

新緑スタイルX（h1）

概要

目標
新緑スタイルのXHTML対応版の作成
感想
<div class="section">による擬似構造化のためのCSSとして初めて作成。
エメラルドグリーンが好きなので、それを全面に出してみました。個人的には見出しと定義リストの色の相性が気に入っています。
定義していない要素
XHTMLの要素のうち、big,small,dfn,kbd,cite,strong,var,samp,acronym,address要素は、高天原下では使用しない事を前提に定義していません。もしユーザスタイルとして使用なされる場合は各自で定義する必要があります。
使用CSSファイル
lightgreen-x.css｜base.css
履歴
2004年12月28日作成。
2005年09月12日大幅改良。
2006年01月06日一部の要素へのスタイル定義を削除。

この文章はファイルの要約を表しています。（<div class="summary">）

警告の文章

この文章はファイルについての注意書きを表しています。（<div class="warning">）

この文章は附記・註釈を表しています。（<div class="note">）

スタイル確認用サンプル（h2）

なお、この段落にはレベル2のセクション疑似要素<div class="section">が適応されています。

見出し要素（h3）

これは第四レベルの見出しです（h4）

これは第五レベルの見出しです（h5）
これは第六レベルの見出しです（h6）

第六レベルにもなるとどうやって地の文章や定義リストと区別するかが難しくなってきますね。

段落（p）

p要素の「p」は「paragraph」の略です。

もちろん、「空白を空ける改行」などではないのでご注意ください。単なる改行は、br要素によって実現しますが、段落が変わらないのに改行するというのは、本来なら稀なケースです。

インラインリンク（a）

箇条書き

順不同リスト（ul）

  • これは順不同の箇条書きです。
  • 出現の順番に特にこだわらない時に使用します。
    • このように箇条書きの中の箇条書きと言う書き方も出来ます。
    • 次のような利用法があります（一例）
      • 文章にすると長くなるのだけど、なるべく簡潔に書きたい時。
      • 見出し一覧（見出しのレベルに応じて箇条書きのレベルを深くする事も出来ます）
  • 項目が一つしかなくても構いません。
  • もちろん「強調」の意味で使ってはいけませんけど。

順序つきリスト（ol）

  1. これは順序つきの箇条書きです。
  2. 出現順番に特に意味を持たせたい時に使用します。
    1. ただし、マーカーが数字とは限りません。
    2. 次のような利用法があります（一例）
      1. 何か（例えば料理など）の作業手順
      2. 一番上から順番に紹介したい項目（私の好きなもの好きな順など）
  3. 順不同リストに比べてあまり使用する機会の無い要素です。
  4. といっても、無かったら無かったで困ることもあるんですよね。

定義リスト（dl）要素

定義リスト
一般に辞書など、定義されたものとそれの解説を述べる際に用いられます。
辞書以外にも、「画像とその解説」や「リンクバーナーとリンク先の解説」など、結構幅広く応用されています。

分かりにくいのでもう一例

FFT
「ファイナルファンタジータクティクス」の略
「高速フーリエ変換」の略
FFT
ファイナルファンタジータクティクス
エニックス・スクウェア社が発売している戦略シミュレーションゲーム。一般には前者の略称を用いるが、検索エンジンでは「高速フーリエ変換」と混合される虞がある。

引用

引用を表します。ブロックレベルの要素で、段落ごと引用してきたようなものを貼り付けるのに使います。

blockquote要素の中身は body要素と同じです。HTML4 Strict では blockquote直下にテキストを書くことが出来ませんので、さらに p要素などでマーク付けする必要があります。

短いフレーズの引用には blcokquote要素ではなく q要素を使うと良いでしょう。

以上は水無月ばけらのHTMLリファレンスから引用しました（引用元はこのcite要素を使わずにcite属性を使った方がいい気もします）

テーブル（table）

テーブル考察
検討項目検討結果補足
結論テーブルはなるべく使わない方が良いです。どうしても使う時はテーブルが外れても読めるようにして下さい。
表として使用視覚的には整理されて見やすい。ただしきっちりと全要素を指定した時の話。
レイアウトとして使用読み上げ式ブラウザではわけが分からなくなる。ユーザースタイルシートを使っていると非常に見苦しくなる。
テーブルの欠点体感的な読み込み速度が遅い。テーブル内部を全て読み終えてから描写しますからね。
セルの結合下手すると読むほうも書くほうも分けが分からなくなる。面倒でも同じ事項を書き入れましょう。

整形済みテキスト（pre）

これは整形がなされた文章です。
詩や俳句など、空白や改行自体に意味がある時に用います。
ただ、普通には改行されなくなるので、
あまり行が長いと横スクロールを出す原因になります。
プログラム（HTML）ソースなどを表すのにも使えます。
ではここで一句。

　整形を
　　きちんとしてから
　　　マークアップ

※タブ文字は使わない方が良いそうです。

追加された文章（ins）・削除された文章（del）

公開した後で追加した（削除した）文章を表します。datetime属性でいつ削除（追加）したかを明記しておけばいい感じ。（XHTMLではインラインとして使用しないことにしました）

ただ、削除したと言っても、削除した跡を残す意味がある時にだけ使うのが普通でしょう。ブロック要素になる時とならない時がありますが、普通はインライン要素として使った方が無難です。

ただ、削除したと言っても、削除した跡を残す意味がある時にだけ使うのが普通でしょう。今までは、インライン要素として使った方が無難と思っていましたが、最近そんなこともないような気がしてきました。

その他インライン要素

  • 私は正しいCSSを強く推奨します（em）
  • ISO-HTMLのDTD宣言は<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">です（code）
  • HTMLとはHyperText Markup Languageの略です（abbr）※abbr要素はInternet Explorerではサポートされていません。
  • エネルギーと質量にはE＝Mc2の関係が成り立っています（sup）
  • 水の化学式はH2Oです（sub）
  • 難しい字には「魑魅魍魎（ちみもうりよう）」「天上天下唯我独尊（てんじようてんげゆいがどくそん）」のようにルビを振ることも出来ます（ruby）

その他ブロック要素

以下は区切り用の水平罫線（hr）要素です。何らかの理由で区切り線を入れたいときに使います。