このページはaleviritaで配布しているcssファイルの詳細ページです。

decoration.css

  1. decoration.cssってなに?
  2. 使うにあたっての規約
  3. 導入方法
  4. cssファイル詳細
  5. 表示サンプル
  6. 更に装飾
  7. バージョンアップ履歴

decortion.cssについて

CDPで使えるaleviritaオリジナルの独自クラスサンプル集。

CDP以外でもセレクタ変更すれば使えます。参考にどうぞ。

特徴
  • 導入方法はstyle.cssを編集するだけ！やめるときもstyle.cssを編集するだけ！お手軽！
  • 勿論alevirita以外で配布されているテンプレート（CSS）との併用も可能。
現行バージョン
バージョン8.2
最終更新
2010-02-07

使うにあたっての規約

上記を守ったら、なにをどう使っても自由。クラス名がポンコツなので改編おすすめ。むしろCSS自体がそろそろポンコツ。

導入方法

style.cssを編集する方法

  1. decoration.cssを保存する。
    • ↑リンクの上で右クリック→リンク先を保存
    • ↑リンクをクリック。ページもしくはテキストソフトが開くので内容を保存
  2. 保存したdecoration.cssをcsstemplateフォルダ内あたりに移動
  3. style.cssを開く
  4. @charset "Shift_Jis";のすぐ真下あたりに@import url("decoration.css");って書き足す。
  5. style.cssを上書き保存
  6. 上書き保存したstyle.cssとdecoration.cssをアップロード

htmlファイルを編集する方法

  1. decoration.cssを保存する。（上記参照）
  2. 保存したdecoration.cssをcsstemplateフォルダ内あたりに移動
  3. decoration.cssを利用するhtmlファイルを開く
  4. <link rel="stylesheet" href="csstemplate/style.css" type="text/css">の真下あたりに<link rel="stylesheet" href="csstemplate/decoration.css" type="text/css">って書き足す。
  5. htmlファイルを上書き保存
  6. 上書き保存したhtmlファイルとdecoration.cssをアップロード

cssファイル詳細

ul/ol class="list1"

内容が横並びになります。

<ul class="list1">
 <li>内容</li> 
 <li>内容</li>
</ul>

<ol class="list1">
 <li>内容</li> 
 <li>内容</li>
</ol>

内容と内容の間の隙間の幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分の値を変更します。

#PAGETOP #KIZI div.text ul.list1 li,
#PAGETOP #KIZI div.text ol.list1 li{
	list-style-type: none;
	display: inline; 
	padding: 0 0.4em 0 0;
}

dl class="imageList"

dtに画像、ddに文章で、文章が画像の左横に回り込みます。

<dl class="imageList">
   <dt><img src="画像パス" alt="画像：タイトル"></dt> 
         <dd>説明説明</dd>
   <dt><img src="画像パス" alt="画像：タイトル"></dt>
         <dd>説明説明</dd>
</dl>

以下のようにすると文章が右横に回り込みます。

<dl class="imageList type2">
   <dt><img src="画像パス" alt="画像：タイトル"></dt> 
         <dd>説明説明</dd>
   <dt><img src="画像パス" alt="画像：タイトル"></dt>
         <dd>説明説明</dd>
</dl>

ul/ol class="imageList"

直下のliブロックが横並びになります。リストの入れ子がイイ感じ。

<ul class="imageList gallery1">
   <li><img src="画像パス" alt="画像：タイトル">
	<ul> 
	 <li>説明説明1</li>
	 <li>説明説明2</li>
	</ul> 
   </li>
   <li><img src="画像パス" alt="画像：タイトル">
	<ul> 
	 <li>説明説明1</li>
	 <li>説明説明2</li>
	</ul> 
   </li>
 </ul>

<ul class="imageList gallery2">
   <li>
	<dl class="imageList">
   	 <dt><img src="画像パス" alt="画像：タイトル"></dt> 
		<dd>説明説明</dd>
	</dl>
   </li>
   <li>
	<dl class="imageList">
   	 <dt><img src="画像パス" alt="画像：タイトル"></dt> 
		<dd>
			<ul> 
			 </li>説明説明1</li>
			 </li>説明説明2</li>
			</ul> 
		</dd>
	</dl>
   </li>
 </ul>

liの横幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分に適当な値をいれます。

#PAGETOP #KIZI div.text ol.gallery1 li,
#PAGETOP #KIZI div.text ul.gallery1 li{
	width: 110px; /* 好きな幅に */
	text-align: center;
}

#PAGETOP #KIZI div.text ol.gallery2 li,
#PAGETOP #KIZI div.text ul.gallery2 li{
	width: 200px; /* 好きな幅に */
	text-align: left;
}

横幅の違うサンプルがあるために.gallery1・.gallery2なんてクラスつけてるので、もし一つでいいなら、上記は消して、以下のように書き足しても問題ないです。HTMLもclass="imageList"でOK。

#PAGETOP #KIZI div.text ol.imageList li,
#PAGETOP #KIZI div.text ul.imageList li{
	display:-moz-inline-box;
	display: inline-block;
	margin:0 0.3em 0.4em 0;
	padding: 5px 0;
	vertical-align: top;
	width: 110px;
	text-align: center;
}

ボーダーや背景つける場合は継承に気を付けて。

dl class="textList"

ddの文章がdtの文章の左横にきます。

<dl class="textList">
   <dt>文字</dt> 
         <dd>説明説明</dd>
   <dt>文字</dt> 
         <dd>説明説明</dd>
</dl>

dtの横幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分に同じ値をいれます。

#PAGETOP #KIZI div.text dl.textList dt{
	float: left;
	width: 8em; /* 横幅 */
	padding: 0.15em 0;
	clear: left;
}

#PAGETOP #KIZI div.text dl.textList dd{	
	margin-left: 8em; /* dtの横幅と同じで */
	padding: 0.15em 0 0.15em 0.5em;
}

ins class="new"

ins末尾にUPアイコンを（背景として）つけます。また、ins内のaのカラーを変えます。（更新履歴の最新に利用するとよいかと。）

<ins class="new"><a href="img22.html">◎×をUPしました！</a></ins>

表示するアイコンは自由です。デフォでは、imgフォルダ内のup.gifを仮定してます。この画像→[画像]使用画像サンプルを保存して使って構いません。が、でも別の素敵なアイコン見つけてきたほうがよかろうと思います。次のコードの強調部分を変更でファイル名やファイルの横幅分の余白を変えられます。

/*アイコン*/
#PAGETOP #KIZI div.text ins.new{
	padding-right: 13px;
	background: url("img/up.gif") no-repeat 100% 50%;
}

リンクの色も自由です。次のコードの強調部分を好きなカラーコードにしてください。

/*リンク色*/
#PAGETOP #KIZI div.text ins.new a:link{
	color: red;
}

どっちかの装飾だけでいい場合はいらん方を削除してください。

* class="more"

決められた高さ（※デフォでは5em）以上になったらスクロールバー出ます。例はdivだが、overflowできる要素なら、<p>も<ul>も<dd>も<blockquote>もOK。

<div class="more">
   <p>内容<br>内容<br>内容<br>内容<br>内容<br>内容</p>
</div>

overflowする高さは、decoration.cssを編集すれば変えられます。次のコードの強調部分の値を変更します。

#PAGETOP #KIZI div.text *.more{
	padding-right: 0.5em;
	height: 5em !important; /*好きな高さ*/
	overflow: auto;
}

* class="hidden" / * class="small"

文字と背景色を同じにしたり、文字色を薄くしたり。どんな要素でもOK。

<ul><li class="hidden">見えない</li></ul>
<p>文章の一部を<span class="small">薄くしたり</span></p>

* class="text(1/2/3）"

文章が右よせとか中央とか左とかそういうの。ブロック要素なら何でもOK。

<ul><li class="text1">中央寄せ</li></ul>
<p class="text2">右寄せ</p>
<div class="text3"><p>左寄せ</p></div>

表示サンプル

弊サイトのCDP表示サンプルのsample3のページで使用例として確認することができます。

更に装飾

ボーダーや背景をつけててみてもいいでしょう。

バージョンアップ履歴

2010.02.07.02:11:00
decoration.css ver.8.2
  • dl.imageListおよびdl.textListのIE6においてのfloat解除。 
    * html body #PAGETOP #KIZI div.text dl.imageList{
	height: 1%;
}

* html body #PAGETOP #KIZI div.text dl.textList{
	height: 1%;
}
2009.12.26.15:41:00
decoration.css ver.8.1
  • dl.textList不具合対策。<dt>の内容が<dd>の内容より多いとモダンブラウザでずれるので、以下のコード追加。 
    #PAGETOP #KIZI div.text dl.textList dd:after{
	content: "";
	display: block;
	clear: both;
}
2009.11.27.20:39:00
decoration.css ver.8.0
  • *.hiddenと*.smallを追加
  • 9. floatクリア項目の内容を削除（※残っているとIEで不具合が起こる可能性あり）
2009.10.30.11:47:00
decoration.css ver.7.3
  • dl.imageListとdl.textListの不具合対策をoverflow:hiddenからoverflow:autoに変更
2009.09.19.20:08:00
decoration.css ver.7.2
  • dl.imageListとdl.textListの不具合対策
2009.05.12.19:30:00
decoration.css ver.7.1
  • ol/ul.imageListの継承対策
あと、更に装飾のページを作りました。
2009.04.20.06:40:00
decoration.css ver.7
  • ol/ul.imageList追加
2009.04.19.21:51:00
decoration.css ver.6（改3版）
  • 0. resetでクラス名が（過去の名残で）間違ってたのに今更気づき……。
2009.04.16.01:32:00
decoration.css ver.6（二度目の改版）
  • dl.textListでdt側が複数行になった時の対処 
    #PAGETOP #KIZI div.text dl.imageList:after,
#PAGETOP #KIZI div.text dl.textList:after,
#PAGETOP #KIZI div.text dl.textList dd:after{ /*←この辺追加*/
	content:"";
	display: block;
	clear: both;
	overflow: hidden;
}
2009.02.11.04:27:00
decoration.css ver.6（改版）
  • Operaでの挙動安定のために 
    #PAGETOP #KIZI div.text dl.imageList:after,
#PAGETOP #KIZI div.text dl.textList:after{
	content:"";
	display: block;
	clear: both;
	overflow: hidden;/*←ここ追加*/
}
2009.02.10.05:29:00
decoration.css ver.6
  • 色々記述整頓。@mediaで古いブラウザシャットアウト。
  • insで囲うとアイコンが出たりリンク色変えるようなクラス追加
2008.04.08.04:49:01
decoration.css ver.5
2008.04.04.15:43:01
decoration.css ver.4
2008.03.03.23:32:12
decoration.css ver.3
2007.11.20.01:38:43
decoration.css ver.2
2007.11.19.15:50:30
decoration.css ver.1

アドレス

このページはaleviritaの一部です。
制作者への連絡は、メールフォームを利用してください。
  1. サイトINDEX
  2. 配布おまけ一覧