CSSとは？
CSSとは，WEBページのデザインを記述するための言語のことです．
CSS以外でデザインしちゃ嫌！
htmlタグやWikiの文法でもある程度デザインを変更することが出来ますが，htmlやWikiの文法は本来
文章の構造を記述するための言語
です．文章構造を記述する言語でページの見た目（デザイン）を変更すると，ページ構造や論理構造がわかりにくいことになってしまいます．たとえば，
- 表組み(table)機能で文章をインデントする
- 見出しタグ(html:h1,h2,h3)(Wiki:**)を使って色を変える
- 右寄せ・中央寄せ(Wiki: RIGHT:, CENTER:)を使ってテーブルの見栄えを整える
等々．
書いた本人はどのような考えで文法を書いたのかわかりますが，第三者が後から再編集しようとしたときに
- 「はて？何故この文章は文の真ん中に見だしがあるのだろう？」
- 「テーブルの全てのセルにCENTER:が入ってて読みにくい！」
などということになりがちです．
そこで，管理人が用意した幾つかの
CSS(ID属性)
を本ページに記載しておきます．
CSSを働かせるためのWikiプラグイン
#divid(){}
プラグインを使用します
例えば，
通常のリスト構造
-,--,---で通常のリスト構造を記述した場合です．
とある川柳のCSSを利用したリスト構造
ここでは，
senryu_liststyle_none
というCSS ID属性を
divid
プラグインで指定しています．
#divid(senryu_liststyle_none){
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
}
使用できるCSS ID属性一覧
テーブル右揃え table_normalcell_right
- ノーマルセルを右揃えに変更します．
- 理系の目に優しい
数値の右揃え
をお約束します！
-
昇格必要EXP
ページに使用しています．
CSS未使用
| 階級 |
昇格EXP |
累計EXP |
| 二等兵01⇒02 |
500 |
500 |
| 二等兵02⇒03 |
2,400 |
2,900 |
| 二等兵03⇒04 |
3,600 |
6,500 |
| 二等兵04⇒05 |
3,700 |
10,200 |
CSS使用
| 階級 |
昇格EXP |
累計EXP |
| 二等兵01⇒02 |
500 |
500 |
| 二等兵02⇒03 |
2,400 |
2,900 |
| 二等兵03⇒04 |
3,600 |
6,500 |
| 二等兵04⇒05 |
3,700 |
10,200 |
テーブル中央揃え table_normalcell_center
- ノーマルセルを中央揃えに変更します．
- 誰の目にも優しい
ど真ん中配置
をお約束します
CSS未使用
| |
LV1 |
LV2 |
LV3 |
| Cost |
100 |
125 |
150 |
| 機体HP |
7000 |
7500 |
8000 |
| 耐射撃装甲 |
31 |
40 |
48 |
| 耐ビーム装甲 |
34 |
42 |
51 |
| 耐格闘装甲 |
31 |
40 |
48 |
CSS使用
| |
LV1 |
LV2 |
LV3 |
| Cost |
100 |
125 |
150 |
| 機体HP |
7000 |
7500 |
8000 |
| 耐射撃装甲 |
31 |
40 |
48 |
| 耐ビーム装甲 |
34 |
42 |
51 |
| 耐格闘装甲 |
31 |
40 |
48 |
テーブルスモールフォント table_normalcell_small
- ノーマルセルのフォントを
small
に変更します．
- 老人の目に厳しい
こんまい小文字
をお約束します！
-
出現設計図一覧
，
レアリティ別分類表
ページに使用しています．
CSS未使用
| 連邦：汎用機 |
二等兵 |
一等兵 |
上等兵 |
|
伍長 |
軍曹 |
曹長 |
|
少尉 |
中尉 |
大尉 |
|
少佐 |
中佐 |
大佐 |
備考 |
| ジム |
LV1
LV2
(07)
20% |
LV3
(09)
12% |
- |
|
LV4
(05)
8% |
- |
LV5
8% |
|
LV6
(01)
5% |
- |
- |
|
- |
- |
- |
- |
| 陸戦型ジム |
- |
- |
LV2
(01)
10% |
|
LV2
(08)
8% |
- |
LV3
(08)
8% |
|
- |
LV4
(01)
8% |
LV5
(06)
5% |
|
LV6
(05)
5% |
- |
- |
- |
CSS使用
| 連邦：汎用機 |
二等兵 |
一等兵 |
上等兵 |
|
伍長 |
軍曹 |
曹長 |
|
少尉 |
中尉 |
大尉 |
|
少佐 |
中佐 |
大佐 |
備考 |
| ジム |
LV1
LV2
(07)
20% |
LV3
(09)
12% |
- |
|
LV4
(05)
8% |
- |
LV5
8% |
|
LV6
(01)
5% |
- |
- |
|
- |
- |
- |
- |
| 陸戦型ジム |
- |
- |
LV2
(01)
10% |
|
LV2
(08)
8% |
- |
LV3
(08)
8% |
|
- |
LV4
(01)
8% |
LV5
(06)
5% |
|
LV6
(05)
5% |
- |
- |
- |
不可視テーブル invisible_table
- テーブルの外枠を消すためのCSSです．
- トップページのセリフ表示のために使用しています．余り良い使い方とは言えません．．．
CSS未使用
| ランバ・ラル： |
「旧ウィキとは違うのだよ，旧ウィキとは！」 |
| リオ・マリーニ： |
「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」 |
| シロー・アマダ： |
「アイナ！好きだーーッ！！」 |
| シャア： |
「見えるぞ！私にもソースが見える！」 |
| シーマ・ガラハウ： |
「アフィリエイトなんか貼るな！沈みたいのか！！！！」 |
| スレッガー・ロウ： |
「悲しいけどコレ、移植なのよね！」 |
CSS使用
| ランバ・ラル： |
「旧ウィキとは違うのだよ，旧ウィキとは！」 |
| リオ・マリーニ： |
「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」 |
| シロー・アマダ： |
「アイナ！好きだーーッ！！」 |
| シャア： |
「見えるぞ！私にもソースが見える！」 |
| シーマ・ガラハウ： |
「アフィリエイトなんか貼るな！沈みたいのか！！！！」 |
| スレッガー・ロウ： |
「悲しいけどコレ、移植なのよね！」 |
MS一覧用テーブル(等幅) table_ms
- MSページ下の
MS一覧
に使用しているCSS．
- ノーマルセルの横幅を全部同じ割合に変更します
CSS未使用
CSS使用
| 機体名 |
機体HP |
スピード |
| 「先行配備」ジム・ライトアーマー |
4500 |
185 |
MS一覧用テーブル(360px幅) table_ms_360px
- 上の
ms_table
は横幅を等間隔にしたため，ブラウザを伸び縮みさせると幅が変わりますが，こちらは１セルの横幅を
360px
に固定します．
- ちなみに，本Wikiのコンテンツ欄（白い部分）の最小横幅は
768px
です．これ以上幅は小さくなりません．
CSS未使用
| 機体名 |
機体HP |
スピード |
| 「先行配備」ジム・ライトアーマー |
4500 |
185 |
CSS使用
| 機体名 |
機体HP |
スピード |
| 「先行配備」ジム・ライトアーマー |
4500 |
185 |
川柳表示用リスト senryu_liststyle_none
- リスト構造１～３階層を利用して，川柳・俳句を表示するCSSです．
掲示板情報表示デザイン boardinfo
- 掲示板ページトップのインフォメーション部分に使用しています
コメント（階層リスト構造）の色分け comment_colorize
- 過去ログ用のリスト構造部分を色分けするためのCSSです．
- 今のところ20階層まで色分けが可能です．
コメント欄
最終更新：2017年09月23日 23:29
