CSS アーカイブ

目次
スタイル紹介ページ一覧
スタイル一覧
スタイルの利用条件
スタイルファイルのURI一覧
再利用可能なスタイルのリンク集

スタイル紹介ページ一覧

当サイトで使用してきたスタイルを紹介します。

ページ名
紹介するスタイル
CSS テストページ（now）　参考：テスト2
green(now), green(1011), think(now), plant(1011)
CSS アーカイブ（2010-09-07）
plant(1009), think(1009), ankoku(1009), tnstyle(1009)
CSS アーカイブ（2006-01-19）
think(0601), plant(0601), folio(0601), ankoku(0601), tnstyle(0601), think_mono(0601), think_sepia(0601), toki(0601)
CSS アーカイブ（2005-01-01）
think(0501), folio(0501), tnstyle(0501)
CSS アーカイブ（2003-10-09）
think(0310), ankoku(0310), tnstyle(0310)
CSS アーカイブ（2003-02-07）
Change!!(0302), flower(0302), ankoku(0302), tnstyle(0302)
CSS アーカイブ（2002-10-25）
Change!!(0210), flower(0210), ankoku(0210), tnstyle(0210), print(0210)
CSS アーカイブ（2002-05-05）
deceiver(0205), dino(0205), dummy(0205), flower(0205), deceiver_n(0207), works(0207), delta(0205), 2ch(0205)

スタイル一覧

現役のスタイル

green

WebbingStudioさんに製作していただいたスタイルのアップデート版。水平repeat対応のメインイラストがレイアウトと一体化。divなし前提の素朴な1カラムながら、現代的な装い。2010年11月4日よりデフォルトスタイルとして供用。

  1. green(now)
  2. green(1011)
think

私の様々なこだわりを凝縮した、きわめて私的なスタイルです。サイトの開設以来、2009年春まで、改訂を繰り返しつつ、ほとんどの期間においてデフォルトスタイルとして供用。faviconもこのスタイルの背景画像から。汎用性が高く、単純な装飾の組み合わせからなるにもかかわらず、個性的です。

  1. think(now)
  2. think(1009)
  3. think(0601)
  4. think(0501)
  5. think(0310)
  6. Change!!(0302)
  7. Change!!(0210)
  8. deceiver_n(0207)
  9. deceiver(0205)

退役したスタイル

plant

aamall.jpデザイナーチームにカンプを作成していただいたスタイルのアップデート版。昔の Joshuaink をリスペクト。2005年後半の一時期と、2009年後半から2010年11月3日までデフォルトスタイルでした。

  1. plant(1011)
  2. plant(1009)
  3. plant(0601)
folio
  1. folio(0601)
  2. folio(0501)
ankoku

野嵜健秀さんのALLNET最終版スタイルを僅かに改造したものです。

  1. ankoku(1009)
  2. ankoku(0601)
  3. ankoku(0310)
  4. ankoku(0302)
  5. ankoku(0210)
tnstyle

野嵜健秀さんの@NetHome第四版スタイルを僅かに改造したものです。

  1. tnstyle(1009)
  2. tnstyle(0601)
  3. tnstyle(0501)
  4. tnstyle(0310)
  5. tnstyle(0302)
  6. tnstyle(0210)
flower
  1. flower(0302)
  2. flower(0210)
  3. flower(0205)
その他
  1. think_mono(0601)
  2. think_sepia(0601)
  3. toki(0601)
  4. print(0210)
  5. dino(0205)
  6. dummy(0205)
  7. works(0207)
  8. delta(0205)
  9. 2ch(0205)

スタイルの利用条件

スタイル要素原著者リンク転載改変再配布権利詐称
green全てWebbingStudioOKOK不可OK不可
plant図案aamallデザイナーチームOKOK不可OK不可
CSS徳保隆夫OKOKOKOKOK
画像aamallデザイナーチームOKOK不可OK不可
toki図案徳保隆夫OKOKOKOKOK
CSS徳保隆夫OKOKOKOKOK
画像土岐緋紗子OKOK不可OK不可
think,
folio, flower,
think_mono,
think_sepia,
dino, dummy,
works, delta		図案徳保隆夫OKOKOKOKOK
CSS徳保隆夫OKOKOKOKOK
画像画像素材集OK不可不可不可不可
print全て徳保隆夫OKOKOKOKOK
ankoku, tnstyle全て野嵜健秀OK配布ページを熟読のこと
2ch全てジュンOK規約不明
つまり……どういうこと？
  1. 徳保隆夫（私）の著作物は「自分の作品」と偽ってもかまいません（権利詐称OK）。またデザイナーの作品や素材集の画像に私が手を加えた部分も無視してよく、原著者の権利にのみ配慮してください。
  2. 短期的、限定的な利用なら、CSS への直リンクが簡便です。→スタイルファイルのURI一覧
  3. 長期的なご利用、あるいは大量のアクセスが予想される場合は、転載してください。ただし、スタイル毎に利用条件が異なりますので、ご注意ください。
    • print は完全に私の著作物なので、転載、改変、再配布に加えて権利詐称も自由です。
    • green, plant, toki は財産権を有する私が、転載と再配布を許可します。しかし著作者人格権（氏名公表権、同一性保持権など）は各デザイナーにあります。私はスタイルを改変できますが、デザイナーは第三者による自由な改変までは（少なくとも明示的には）認めていません。
    • think, folio, flower, think_mono, think_sepia, dino, dummy, works, delta の画像は、私が同意した画像素材集の利用規約により、第三者による再利用が禁止されています。
  4. 権利詐称不可の著作物を直リンク、転載、再配布するとき、権利表示をしないことが実質的に権利の詐称となる状況では、権利表示が必要です。
  5. 各スタイルをパブリックドメイン相当にする方法：
    green, ankoku, tnstyle, 2chありません　注
    printもともとPD相当
    plant画像差し替え＋図案変更
    その他画像差し替え
    注　例えばgreenスタイルを改変する場合、greenスタイルがgreenスタイルである範囲内で改変をしても、原著者の権利は有効です。これはもはやgreenスタイルではない、と一般的に認められるとき、ようやく著作権から解放されます。したがって、「greenスタイルをPD相当にする方法」はありません。

スタイルファイルのURI一覧

直リンクや転載などの際にご利用ください。

green(now), think(now)
その他

おすすめのサイトの他は利用条件別で紹介します。ただ、スタイルの改変や部分的なパクりをどこまで許容するかについては見解が様々です。スタイルを見て勉強するだけなら問題ありませんが、一部または全部を改変して再利用する場合には、リンク先のサイトに記載の利用条件を熟読してください。

なお、私の需要に沿ったリンク集なので、「CSSギャラリー」みたいなサイトは紹介しません。私は面倒くさがりなので、ブログの「テンプレート」など、1回作ればそれっきりという領域を除いて、基本的には div や class を使いません。ですから、div なしでも使えるスタイルを公開されているサイトがほしい。それに、表紙より本文の方が重要なわけで、「個別ページ本文の見出し、段落、リスト、引用、表をきれいに表示するスタイル」でなければ意味がない。

また、CSSファイルだけで完結する画像なしのスタイルも取り扱いが簡便で好都合。とくに石動さんのスタイルは、日常の様々な場面で何度も活用させていただきました。

おすすめ
CC BY 3.0 相当
著作者表示不要＋CSSに作者表記あり
著作者表示不要＋CSSに作者表記なし

実質的にパブリックドメイン相当ですが、再利用の際は「自分の作品と称してよい範囲」に留意してください。

余談：

過去、「備忘録」用に他所のスタイルを流用した事例は限られています。アイデンティティーやメンテナンスの問題もありますが、私が備忘録でしばしば用いる特異なマークアップに対応していないことが多いから、という理由も大きいです。本気で探せばいくらでも見つかるのでしょうが、私は一回でゲンナリしてしまい、以降、探す意欲を失っています。

<ul>
<li> 　あいうえお
　<ul>
　<li>かきくけこ</li>
　</ul>
</li>
</ul>

例えば、こんなケース。li や dd の中にブロックレベル要素を配置するという状況を想定していないスタイルが多い。多段リストの場合、上記例のように平文（あいうえお）と、子リスト（かきくけこ）が並ぶのは特異なケースではないはずだけれども、ul や li に上マージンがなく「あいうえお」と「かきくけこ」がくっついてしまうスタイルは珍しくない。

あるいは、個々のブロックレベル要素に大きな左マージンや右マージンを設定しているスタイルも多く、作者の想定外の多重ブロックをすると、幅が狭くなり過ぎてしまう。blockquote の中に p が入ることまでは想定して対策を打っていても、dl を入れてみると破綻したり。li や dd の中にブロックレベル要素を置いてもスマートに表示されるスタイルは決して多くない。

↓表示サンプル↓

div#main h1　a

h2　a

h3　a

h4　a

h5　a
h6　a

p　ひらがな　カタカナ　漢字　alphabet

p　使う要素→a リンク, em 強調, strong さらに強調, q インラインの引用, del 削除, ins 追記

p　使わない要素（基本的にスタイル未定義）→　b 太字, u 下線, cite 出典, i 斜体, strike 取消線, tt 等幅, code コード, dfn 定義されたターム, abbr 略語, acronym 頭辞語, samp 出力例, kbd キーボード入力文字列, var 変数, sup 上付き文字, sub 下付き文字, big 大きな文字, small 小さな文字

  1. ol li
  2. ol li
    1. ol li ol li
    2. ol li ol li
dl dt
dl dt
ddにべた書き

dd内のp.as-it-is

  1. dl dd ol li
子dlのdt
子dlのdd

blockquote p

  1. blockquote ol li
blockquote dl dt
blockquote dl dd

blockquote blockquote p

caption
thead ththead ththead th
tbody thtbody tdtbody td
子table caption
thead ththead ththead th
tbody thtbody tdtbody td
tfoot thtfoot tdtfoot td
tfoot thtfoot tdtfoot td
legend　フォーム

hr は下記の通り（注：CSSthink.css では非表示）。

↑で div#wrapper と div#main は終了です。↓では body 直下に要素を配置しています。

h1　a

h2　a

h3　a

h4　a

h5　a
h6　a

特殊

p.source　あいうえお かきくけこけこ さしすせそ 季語は柿です 胸を張るきみ

p.longsource
仏説摩訶般若波羅蜜多心経
観自在菩薩行深般若波羅蜜多時、照見五蘊皆空、度一切苦厄。
舎利子。
色不異空、空不異色、色即是空、空即是色。
受・想・行・識亦復如是。
舎利子。
是諸法空相、不生不滅、不垢不浄、不増不減。
是故空中、無色、無受・想・行・識、無眼・耳・鼻・舌・身・意、無色・声・香・味・触・法。
無眼界、乃至、無意識界。
無無明、亦無無明尽、乃至、無老死、亦無老死尽。
無苦・集・滅・道。
無智亦無得。
以無所得故、菩提薩?、依般若波羅蜜多故、心無?礙、無?礙故、無有恐怖、遠離一切顛倒夢想、究竟涅槃。
三世諸仏、依般若波羅蜜多故、得阿耨多羅三藐三菩提。
故知、般若波羅蜜多、是大神呪、是大明呪、是無上呪、是無等等呪、能除一切苦、真実不虚。
故説、般若波羅蜜多呪。
即説呪曰、羯諦羯諦波羅羯諦波羅僧羯諦菩提薩婆訶。
般若心経

p a.note

p.as-it-is　字下げのないp要素。会話文などの表現に使う。その他の特殊な要素としては、文書冒頭部に配置される ul#gn と末尾に配置される ul#address と目次ページに使う table.menu がある。

h3#LOG

Information