Stardust Crown

  1. ホーム
  2. 案内
  3. CSS展示室
  4. CSS表示サンプル（東大文芸部）

CSS表示サンプル（東大文芸部）

  1. ページ体裁の説明
  2. 要素の例示

　基本の（意味）段落 p の表現です。インデントは全角空白の挿入により実現していますので、CSS に関わらず表示されます。形式段落は br で表現していますが、いまいち形式段落と意味段落が曖昧かもしれません。

ページ体裁の説明

  1. ページヘッダー系
  2. 本文の構成
  3. ページフッター系

　ページの冒頭に Stardust Crown の表示と、JavaScript 有効の場合は Last Updated（最終更新年月日）、また JavaScript 無効の場合は First-Updated（初出年月日）が表示されます。Stardust Crown は、CSS によっては画像で代用されます。

　さらに、表題の上の ol は、ナビゲータであり、全ページに配置されていますが、敢えて非表示にする場合もあります。また、表題の下の ol はページ内メニューで、短めのページで目次を作るほどでない場合に設置しています。

本文の構成

目次

　長めのページでは最初のＨ２見出しを「目次」にして、目次リストを表示します。Ｈ２レベル〜Ｈ３レベルくらいまでを拾っていますので、２重リストになる場合もあります。Ｈ３レベルまで拾うのは特に長いページです。ただし、小説などでは例外もあります。目次は ol を使う場合が多いです。

見出し

　hX 要素は順序通りに使うようにしています。h1 → h2 → h3 → h4 であり、h2 → h4 とか、h1 → h3 とかの構成にはしていません。以下、説明による区別であることを明確にするため、hr 要素で挟み込みます。実際には、hr は全くと言っていいほど使用していない要素です。

h1 レベル見出し

　原則としてページに付き１つだけで『【 h1 レベルの見出し】@ Stardust Crown 」をページタイトルとしています。さらに見出しが分かれる場合でも、その直下に概要を記述することもあります。

h2 レベル見出し

　どのページでも、できる限り h2 が１つだけというのは避けています。h1 以外は、あるとしたら複数が原則であり、もし h2 が１つなら、それは h1 に一致するはずですからね。そのような短いページなら独立させる必要がない場合が多いでしょうから。

h3 レベル見出し

　h3 と h4 に関しては、１つだけになる場合は設けず、h2 や h3 など上位の見出しの直下に文章を記述するのが基本ですね。このような場合は時々あります。特に h4 に関しては頻繁です。

h4 レベル見出し

　h4 レベルの見出しは dl と、どちらを使うべきか迷うこともありますが、説明が短文にまとめられるくらいの細かい項目以外は h4 を使うことにしました。はじめのころは h3 までで済ませていたので、新しい文章に登場頻度が高いです。
　今のところ、h5 レベルの見出しを使用する必要には迫られていません。

制作者の記述

　address 要素に「著作・制作／永施 誠」と入れ、改行してからメールアドレスを書き込みます。@ は @ で書き換えた方がよいでしょうか。「著作・制作」の代わりに Copyright © (©) を使ってもよかったかも。

ナビゲータ

　「ページ先頭へ」で a href="#sdc" を用いて、ページ先頭へのジャンプができます。

valid バナー

　[valid html 4.01!] および [valid css!] のバナーも置いています。

開設時期

　最後に "Copyright © 20XX M.Nagase All rights reserved." がありますが、画像で置き換えたり、潰したりしている場合もあります。

要素の例示

リスト系

ol によるリストと入れ子構造

  1. 親リスト項目１
    1. 子リスト項目１−１
    2. 子リスト項目１−２
  2. 親リスト項目２
    1. 子リスト入れ子項目２−１
      1. 孫リスト入れ子項目３−１

ul によるリスト

　リンク例示を兼ねた ul の例

dl によるリスト

　CSS を覚えたてのころ、そして今も、非常に頻繁に用いる要素があります。それが dl 系のリストです。項目を挙げて説明をするということですね。

項目
補助的な情報
説明文を挿入。インデントはなし。基本的にブロック要素の挿入はさけてテキストのみに留めています。せいぜい画像だけですが、トランプの説明に div ボックスを使ったこともあります。あれは力業に近いものでしたが。
画像リンクの例（推定訪問済）です。
画像リンクの例（未訪問＝デッドリンク）です。

様々なテキスト

　段落については既に例示されていますね。

強調と脚注

　個人的には『強調』「強調」のようにテキスト整形的にすませることも多いのですが、実際には em 要素を使うべきかもしれませんね。あまり使いすぎると困ると思うので控えめにしていますが。
　さらに強調するときは、em よりも強い strong 要素を使って行うわけですが、最近はこちらに統一しています

※さらに、注を表示することもよくあります。

詩歌の表現

　詩歌の表現は草書系の書体になるように、font-family に cursive を設定していますが、お使いのフォント環境によってはほとんど差がないかもしれませんね。

整形済み

pre要素に関しては、
ほとんどの場合codeと
同時に使いますね

引用

　引用は次のように表示されます。

　ブロックレベルでの引用文が挿入されます。ただし、余り使いません。もう少し、参照の多いコラムなどを書くようになったら頻繁に使うようになるのでしょうか。ちょっとあこがれるのですが。
　ちなみに、引用元を blockquote 内に入れるかどうかは議論がありますね。この文章執筆時点では経験がないので何とも言えませんが、私は blockquote 内に入れますかね。 引用元

　インラインでの引用は「短い文章の引用です」みたいにします。今回は区別のために鈎括弧を付けましたが、普段は“引用符”の類は付けないつもりです。

テーブル

　表の例を示しましょう。書くのが面倒なこともあって余り使用していませんけど……。

テーブルサンプル
見出し１見出し２
項目1,1項目1,2
項目2,1項目2.2

オブジェクト

　今のところ画像とアプレットですね。

中型サイズまでのオブジェクト

　最大で横幅が 400 ピクセルくらいまでならこんな感じです。

大型サイズのオブジェクト

　横幅が 640 ピクセル程度であればこちらを使います。（例示なので同じ画像を使用していますけどね。）インデント位置を変えたり、中央揃えにしたりしているものもあります。

著作・制作／永施 誠
e-mail; webmaster@stardustcrown.com

ページ先頭

Valid HTML 4.01! Valid CSS!