新緑スタイル

概要

目標
新緑の明るいスタイルの作成。
採用期間
2004年10月31日よりメインスタイルとして採用。
配色
背景色は限りなく淡い緑。基本的にエメラルドグリーンは好きです。
今回は色の統一にはあまりこだわっていません。見出しの色もばらしました。
感想
個人的には暗い色の方が眼に優しい(ダークムーンスタイルとか)と思うのですが、あまり万人向けではないので明るいスタイルを作りました。
まあ、可もなく不可もなくといった感じでしょうか。久しぶりにソースを一から書き直したので、割と整ったソースになってます。
使用CSSファイル
lightgreen.css
履歴
2004年10月10日作成。

スタイル確認用サンプル(h2)

見出し要素(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属性でいつ削除(追加)したかを明記しておけばいい感じ。

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

そんなこともないような気がしてきました。

その他インライン要素

  • 私は正しいCSSを強く推奨します(em)
  • 私は正しいHTMLを強く強く推奨します(strong)
  • Windowsでは、CtrlSキーを押すと上書き保存出来ます(kbd)
  • ISO-HTMLのDTD宣言は<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN">です(code)
  • Googleで「高天原」と検索すると約13,900件表示されます(samp)
  • Y=2X+3にX=4を代入すると、11になります(var)
  • 定義とは、概念の内容を明確に決めて述べることです(dfn)
  • HTMLとはHyperText Markup Languageの略です(abbr)※abbr要素はInternet Explorerではサポートされていません。
  • acronym要素は定義していません。
  • 大き目の文字小さ目の文字。これらの要素を使う機会があるかどうかはわかりませんが。
  • エネルギーと質量にはE=Mc2の関係が成り立っています(sup)
  • 水の化学式はH2Oです(sub)
  • 難しい字には「魑魅魍魎ちみもうりよう」「天上天下唯我独尊てんじようてんげゆいがどくそん」のようにルビを振ることも出来ます(ruby)

その他ブロック要素

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


以下はアドレス(address)要素です。管理人への連絡手段を明記する際に使います。

amateru@takamagahara.info