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属性一覧
注意:以下のID属性は全て管理人が本wiki向けに独自に作成したIDです!他のwikiやホームページには使用できませんのでご注意下さい.
文字装飾
強化・弱体化数値等
強化数値用
&spanid(buff){強化数値用}
強化数値用
&spanid(bold_blue){強化数値用}
弱体化数値用
&spanid(nerf){弱体化数値用}
弱体化数値用
&spanid(bold_red){弱体化数値用}
武器属性用
実弾属性武器
&spanid(bold_weapon_shell){実弾属性武器}
ビーム属性武器
&spanid(bold_weapon_beam){ビーム属性武器}
格闘属性武器
&spanid(bold_weapon_close){格闘属性武器}
シールド属性武器
&spanid(bold_weapon_shield){シールド属性武器}
その他属性武器
&spanid(bold_weapon_etc){その他属性武器}
武器の初期装備表示
初期装備 initial
#divid(table_weapon_initial){|初期装備|別売|}
別売装備 optional
#divid(table_weapon_optional){|初期装備|別売|}
武器属性
実弾 shell
#divid(table_weapon_shell){|実弾|ビーム|格闘|シールド|その他|}
ビーム beam
#divid(table_weapon_beam){|実弾|ビーム|格闘|シールド|その他|}
格闘 close
#divid(table_weapon_close){|実弾|ビーム|格闘|シールド|その他|}
シールド shield
#divid(table_weapon_shield){|実弾|ビーム|格闘|シールド|その他|}
その他 etc
#divid(table_weapon_etc){|実弾|ビーム|格闘|シールド|その他|}
機体属性・環境適正
強襲
#divid(table_zokusei_kyoushu){|強襲|汎用|支援|}
汎用
#divid(table_zokusei_hanyou){|強襲|汎用|支援|}
支援
#divid(table_zokusei_sien){|強襲|汎用|支援|}
環境適正
地上・宇宙
#divid(table_sortie_G_S){|地上|宇宙|}
地上のみ
#divid(table_sortie_G_n){|地上|宇宙|}
宇宙のみ
#divid(table_sortie_n_S){|地上|宇宙|}
テーブル右揃え table_normalcell_right
- ノーマルセルを右揃えに変更します.
- 理系の目に優しい
数値の右揃え
をお約束します!
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未使用
機体名 |
機体HP |
スピード |
「先行配備」ジム・ライトアーマー |
4500 |
185 |
CSS使用
機体名 |
機体HP |
スピード |
「先行配備」ジム・ライトアーマー |
4500 |
185 |
MS一覧用テーブル(360px幅) table_ms_360px
- 上の
ms_table
は横幅を等間隔にしたため,ブラウザを伸び縮みさせると幅が変わりますが,こちらは1セルの横幅を
360px
に固定します.
- ちなみに,本Wikiのコンテンツ欄(白い部分)の最小横幅は
768px
です.これ以上幅は小さくなりません.
CSS未使用
機体名 |
機体HP |
スピード |
「先行配備」ジム・ライトアーマー |
4500 |
185 |
CSS使用
機体名 |
機体HP |
スピード |
「先行配備」ジム・ライトアーマー |
4500 |
185 |
川柳表示用リスト senryu_liststyle_none
- リスト構造1~3階層を利用して,川柳・俳句を表示するCSSです.
掲示板情報表示デザイン boardinfo
- 掲示板ページトップのインフォメーション部分に使用しています
コメント(階層リスト構造)の色分け comment_colorize
- 過去ログ用のリスト構造部分を色分けするためのCSSです.
- 今のところ20階層まで色分けが可能です.