攻略WikiCSS一覧



CSSとは?

CSSとは,WEBページのデザインを記述するための言語のことです.

CSS以外でデザインしちゃ嫌!

htmlタグやWikiの文法でもある程度デザインを変更することが出来ますが,htmlやWikiの文法は本来 文章の構造を記述するための言語 です.文章構造を記述する言語でページの見た目(デザイン)を変更すると,ページ構造や論理構造がわかりにくいことになってしまいます.たとえば,
  • 表組み(table)機能で文章をインデントする
  • 見出しタグ(html:h1,h2,h3)(Wiki:**)を使って色を変える
  • 右寄せ・中央寄せ(Wiki: RIGHT:, CENTER:)を使ってテーブルの見栄えを整える
等々.
書いた本人はどのような考えで文法を書いたのかわかりますが,第三者が後から再編集しようとしたときに
  • 「はて?何故この文は見出しになってるんだろう?」
  • 「テーブルの全てのセルにCENTER:が入ってて読みにくい!」
などということになりがちです.
そこで,管理人が用意した幾つかの CSS(ID属性) を本ページに記載しておきます.

CSSを働かせるためのWikiプラグイン

2種類あります

CSS属性を設定するプラグインは下記の2種類有ります

  • #divid(){}プラグイン
    • 領域全体にCSSを指定するためのプラグインです.CSSでいうところの ブロック要素 ですので文中に埋め込む事が出来ません.かならず領域のお尻で改行されます.
    • 領域全体を指定するプラグインなので頭には#がついています.
  • &spanid(){}プラグイン
    • 文の一部にCSSを設定するプラグインです.CSSでいうところの インライン要素 ですので文中に埋め込む事が出来ます.
    • インライン要素を指定するプラグインなので頭には&がついています.

使い方の例

例えば,

通常のリスト構造

-,--,---で通常のリスト構造を記述した場合です.
  • シャア「私の勝ちだな。今計算してみたが、アクシズの後部は地球の引力に引かれて落ちる。貴様らの頑張りすぎだ!」
    • アムロ「ふざけるな。たかが石っころひとつ、ガンダムで押し出してやる!」
      • シャア「馬鹿な事はやめろ!」
      • シャア「うわああっ!・・・アクシズの落下は始まっているんだぞ!!」
        • アムロ「νガンダムは伊達じゃない!」


コメント色つけ用のCSSを利用したリスト構造

  • シャア「私の勝ちだな。今計算してみたが、アクシズの後部は地球の引力に引かれて落ちる。貴様らの頑張りすぎだ!」
    • アムロ「ふざけるな。たかが石っころひとつ、ガンダムで押し出してやる!」
      • シャア「馬鹿な事はやめろ!」
      • シャア「うわああっ!・・・アクシズの落下は始まっているんだぞ!!」
        • アムロ「νガンダムは伊達じゃない!」

ここでは comment_colorize というCSS ID属性 divid プラグインで 領域指定 しています.

#divid(comment_colorize){
-シャア「私の勝ちだな。今計算してみたが、アクシズの後部は地球の引力に引かれて落ちる。貴様らの頑張りすぎだ!」
--アムロ「ふざけるな。たかが石っころひとつ、ガンダムで押し出してやる!」
---シャア「馬鹿な事はやめろ!」
---シャア「うわああっ!・・・アクシズの落下は始まっているんだぞ!!」
----アムロ「νガンダムは伊達じゃない!」
}


文中にインライン要素を設定するプラグインの例

例:
前作と比べて今作の連撃補正値は【100% - 50% - 25%】に大幅に弱体化された.

ソース:
前作と比べて今作の連撃補正値は&spanid(nerf){【100% - 50% - 25%】}に大幅に弱体化された.

ここでは nerf というCSS ID属性 spanid プラグインで インライン指定 しています.


使用できるCSS ID属性一覧

注意:以下のID属性は全て管理人が本wiki向けに独自に作成したIDです!他のwikiやホームページには使用できませんのでご注意下さい.

文字装飾

強化・弱体化数値等

強化数値用
&spanid(buff){強化数値用}

強化数値用
&spanid(bold_blue){強化数値用}

弱体化数値用
&spanid(nerf){弱体化数値用}

弱体化数値用
&spanid(bold_red){弱体化数値用}

機体属性用

強襲属性
&spanid(bold_kyoushu){強襲属性}

汎用属性
&spanid(bold_hanyou){汎用属性}

支援属性
&spanid(bold_sien){支援属性}

武器属性用

実弾属性武器
&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(label_zokusei_kyoushu){|強襲|汎用|支援|}

汎用

強襲 汎用 支援
#divid(label_zokusei_hanyou){|強襲|汎用|支援|}

支援

強襲 汎用 支援
#divid(label_zokusei_sien){|強襲|汎用|支援|}

出撃制限

地上・宇宙

出撃制限 地上 宇宙
#divid(label_sortie_G_S){|出撃制限|地上|宇宙|}

地上のみ

出撃制限 地上 宇宙
#divid(label_sortie_G_n){|出撃制限|地上|宇宙|}

宇宙のみ

出撃制限 地上 宇宙
#divid(label_sortie_n_S){|出撃制限|地上|宇宙|}

環境適正

地上・宇宙

環境適正 地上 宇宙
#divid(label_env_G_S){|環境適正|地上|宇宙|}

地上のみ

環境適正 地上 宇宙
#divid(label_env_G_n){|環境適正|地上|宇宙|}

宇宙のみ

環境適正 地上 宇宙
#divid(label_env_n_S){|環境適正|地上|宇宙|}

武器用テーブル table_weapon

  • 武器属性表示用のテーブルを上に載せたときに、テーブル幅を100%にしつつテーブルとテーブルの間に隙間が出来ないようにします.

CSS未使用

実弾 ビーム 格闘 シールド その他
武器名 ハイパー・バズーカ

CSS使用

実弾 ビーム 格闘 シールド その他
武器名 ハイパー・バズーカ

テーブル右揃え 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%
- - -

テーブルセンター table_center

  • テーブルの要素全てをセンタリングします
  • 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_maxwidth

  • テーブルの横幅を幅いっぱいまで拡張します

CSS未使用

強襲 汎用 支援
フルアーマー・ガンダム【TB】 ジム ザク・タンク[砲撃仕様]

CSS使用


CSS使用(table_centerと同時使用)


テーブル等幅 table_fixed_width

  • テーブルの横幅を幅いっぱいまで拡張した上で列の幅を全て等幅にします

CSS未使用

強襲 汎用 支援
フルアーマー・ガンダム【TB】 ジム ザク・タンク[砲撃仕様]

CSS使用


不可視テーブル invisible_table

  • テーブルの外枠を消すためのCSSです.
  • トップページのセリフ表示のために使用しています.余り良い使い方とは言えません...

CSS未使用

ランバ・ラル: 「旧ウィキとは違うのだよ,旧ウィキとは!」
リオ・マリーニ: 「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」
シロー・アマダ: 「アイナ!好きだーーッ!!」
シャア: 「見えるぞ!私にもソースが見える!」
シーマ・ガラハウ: 「アフィリエイトなんか貼るな!沈みたいのか!!!!」
スレッガー・ロウ: 「悲しいけどコレ、移植なのよね!」

CSS使用

ランバ・ラル: 「旧ウィキとは違うのだよ,旧ウィキとは!」
リオ・マリーニ: 「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」
シロー・アマダ: 「アイナ!好きだーーッ!!」
シャア: 「見えるぞ!私にもソースが見える!」
シーマ・ガラハウ: 「アフィリエイトなんか貼るな!沈みたいのか!!!!」
スレッガー・ロウ: 「悲しいけどコレ、移植なのよね!」

DP交換表用 table_distribution_dp

「table_normalcell_small」「table_weapon」「機体属性塗り分け」を一括で指定できます.
実弾 ビーム 格闘 シールド その他
武器名















装備可能機体
強襲 汎用 支援
100mmマシンガン LV1
(01)
4100

LV2
(05)
5600
LV3
(01)
6600

LV4
(05)
7100

LV5
(10)
10100
                      ジム・ライトアーマー
ジム・ストライカー
ジム
陸戦型ジム
陸戦型ガンダム
ガンダムEz8
ジム・キャノン

リサイクル交換表用 table_distribution_recycle

「table_normalcell_small」「table_weapon」「機体属性塗り分け」を一括で指定できます.
実弾 ビーム 格闘 シールド その他
武器名 LV1 LV2 LV3 LV4 LV5 LV6 LV7 LV8 装備可能機体
強襲 汎用 支援
100mmマシンガン 10 15 15 15 25 - - - ジム・ライトアーマー
ジム・ストライカー
ジム
陸戦型ジム
陸戦型ガンダム
ガンダムEz8
ジム・キャノン

NPCテーブル用(テンダ) table_npc_tenda

色分け用
#divid(table_npc_tenda){}

NPCテーブル用(キャリー) table_npc_carrie

色分け用
#divid(table_npc_carrie){}

川柳表示用リスト senryu_liststyle_none

  • リスト構造1~3階層を利用して,川柳・俳句を表示するCSSです.
  • 待長と 揶揄されつつも その己(斧)の
    • ただ一振りに 駆(懸)けよ白狼
      • すなやま

掲示板情報表示デザイン boardinfo

  • 掲示板ページトップのインフォメーション部分に使用しています

コメント(階層リスト構造)の色分け comment_colorize

  • 過去ログ用のリスト構造部分を色分けするためのCSSです.
  • 今のところ20階層まで色分けが可能です.
  • 1:文章
    • 2:文章
      • 3:文章
        • 4:文章
          • 5:文章
            • 6:文章
              • 7:文章
                • 8:文章
                  • 9:文章
                    • 10:文章
                      • 11:文章
                        • 12:文章
                          • 13:文章
                            • 14:文章
                              • 15:文章
                                • 16:文章
                                  • 17:文章
                                    • 18:文章
                                      • 19:文章
                                        • 20:文章

コメント欄

過去ログ 1

名前
  • 「table_weapon」の説明を追加(前から有りました). - 伏流 (2018-09-26 23:57:52)
最新の20件を表示しています.全てのコメントを見る