機動戦士ガンダム バトルオペレーション攻略Wiki （セカンドシーズン）
機動戦士ガンダム バトルオペレーション攻略Wiki （セカンドシーズン）

攻略WikiCSS一覧


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


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 は横幅を等間隔にしたため，ブラウザを伸び縮みさせると幅が変わりますが，こちらは１セルの横幅を 360px に固定します．
  • ちなみに，本Wikiのコンテンツ欄（白い部分）の最小横幅は 768px です．これ以上幅は小さくなりません．

CSS未使用

機体名 機体HP スピード
「先行配備」ジム・ライトアーマー 4500 185

CSS使用

機体名 機体HP スピード
「先行配備」ジム・ライトアーマー 4500 185

川柳表示用リスト senryu_liststyle_none

  • リスト構造１～３階層を利用して，川柳・俳句を表示する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


  • test - 名無しさん 2013-06-16 08:11:12
最新の20件を表示しています．全てのコメントを見る

「攻略WikiCSS一覧」をウィキ内検索
最終更新：2017年09月23日 23:29

[Amazon商品]