「マニュアル/攻略WikiCSS一覧」の編集履歴（バックアップ）一覧に戻る

マニュアル/攻略WikiCSS一覧 - (2018/09/26 (水) 23:58:05) のソース

//旧wikiからのコピペのため随時更新の必要有り
//バトオペ2には無いシステム、機体が含まれている場合は変更を(2017/09/23)

#contents

*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種類有ります

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

**使い方の例
例えば，

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


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

ここでは''comment_colorize''という&strong(){CSS ID属性}を''divid''プラグインで''領域指定''しています．

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


***文中にインライン要素を設定するプラグインの例
例：
>前作と比べて今作の連撃補正値は&spanid(nerf){【100% - 50% - 25%】}に大幅に弱体化された．

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

ここでは''nerf''という&strong(){CSS ID属性}を''spanid''プラグインで''インライン指定''しています．

//***とある川柳のCSSを利用したリスト構造
//#divid(senryu_liststyle_none){
//-待長と　揶揄されつつも　その己（斧）の
//--ただ一振りに　駆（懸）けよ白狼
//---すなやま
//}
//ここでは，''senryu_liststyle_none''という&strong(){CSS ID属性}を''divid''プラグインで指定しています．
//&nowiki(){#divid(senryu_liststyle_none){}
//&nowiki(){-待長と　揶揄されつつも　その己（斧）の}
//&nowiki(){--ただ一振りに　駆（懸）けよ白狼}
//&nowiki(){---すなやま}
//&nowiki(){}

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

**文字装飾
***強化・弱体化数値等
&spanid(buff){強化数値用}
&nowiki(){&spanid(buff){強化数値用}}

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

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

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

***機体属性用
&spanid(bold_kyoushu){強襲属性}
&nowiki(){&spanid(bold_kyoushu){強襲属性}}

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

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

***武器属性用
&spanid(bold_weapon_shell){実弾属性武器}
&nowiki(){&spanid(bold_weapon_shell){実弾属性武器}}

&spanid(bold_weapon_beam){ビーム属性武器}
&nowiki(){&spanid(bold_weapon_beam){ビーム属性武器}}

&spanid(bold_weapon_close){格闘属性武器}
&nowiki(){&spanid(bold_weapon_close){格闘属性武器}}

&spanid(bold_weapon_shield){シールド属性武器}
&nowiki(){&spanid(bold_weapon_shield){シールド属性武器}}

&spanid(bold_weapon_etc){その他属性武器}
&nowiki(){&spanid(bold_weapon_etc){その他属性武器}}


**武器の初期装備表示
***初期装備 initial
#divid(table_weapon_initial){|初期装備|別売|}
&nowiki(){#divid(table_weapon_initial){|初期装備|別売|}}
***別売装備 optional
#divid(table_weapon_optional){|初期装備|別売|}
&nowiki(){#divid(table_weapon_optional){|初期装備|別売|}}

**武器属性
***実弾 shell
#divid(table_weapon_shell){|実弾|ビーム|格闘|シールド|その他|}
&nowiki(){#divid(table_weapon_shell){|実弾|ビーム|格闘|シールド|その他|}}
***ビーム beam
#divid(table_weapon_beam){|実弾|ビーム|格闘|シールド|その他|}
&nowiki(){#divid(table_weapon_beam){|実弾|ビーム|格闘|シールド|その他|}}
***格闘 close
#divid(table_weapon_close){|実弾|ビーム|格闘|シールド|その他|}
&nowiki(){#divid(table_weapon_close){|実弾|ビーム|格闘|シールド|その他|}}
***シールド shield
#divid(table_weapon_shield){|実弾|ビーム|格闘|シールド|その他|}
&nowiki(){#divid(table_weapon_shield){|実弾|ビーム|格闘|シールド|その他|}}
***その他 etc
#divid(table_weapon_etc){|実弾|ビーム|格闘|シールド|その他|}
&nowiki(){#divid(table_weapon_etc){|実弾|ビーム|格闘|シールド|その他|}}

**機体属性・環境適正
***強襲
#divid(table_zokusei_kyoushu){|強襲|汎用|支援|}
&nowiki(){#divid(table_zokusei_kyoushu){|強襲|汎用|支援|}}
***汎用
#divid(table_zokusei_hanyou){|強襲|汎用|支援|}
&nowiki(){#divid(table_zokusei_hanyou){|強襲|汎用|支援|}}
***支援
#divid(table_zokusei_sien){|強襲|汎用|支援|}
&nowiki(){#divid(table_zokusei_sien){|強襲|汎用|支援|}}

**環境適正
***地上・宇宙
#divid(table_sortie_G_S){|地上|宇宙|}
&nowiki(){#divid(table_sortie_G_S){|地上|宇宙|}}
***地上のみ
#divid(table_sortie_G_n){|地上|宇宙|}
&nowiki(){#divid(table_sortie_G_n){|地上|宇宙|}}
***宇宙のみ
#divid(table_sortie_n_S){|地上|宇宙|}
&nowiki(){#divid(table_sortie_n_S){|地上|宇宙|}}


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

***CSS未使用
#divid(table_weapon_shell){|実弾|ビーム|格闘|シールド|その他|}
|~武器名|ハイパー・バズーカ|

***CSS使用
#divid(table_weapon_shell){|実弾|ビーム|格闘|シールド|その他|}
#divid(table_weapon){
|~武器名|ハイパー・バズーカ|
}

**テーブル右揃え 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使用
#divid(table_normalcell_right){
|~階級|~昇格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未使用
|~&space()|~LV1|~LV2|~LV3|
|~Cost|100|125|150|
|~機体HP|7000|7500|8000|
|~耐射撃装甲|31|40|48|
|~耐ビーム装甲|34|42|51|
|~耐格闘装甲|31|40|48|

***CSS使用
#divid(table_normalcell_center){
|~&space()|~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&br()LV2&br()(07)&br()20%|LV3&br()(09)&br()12%|-||LV4&br()(05)&br()8%|-|LV5&br()8%||LV6&br()(01)&br()5%|-|-||-|-|-|-|
|[[陸戦型ジム]]|-|-|LV2&br()(01)&br()10%||LV2&br()(08)&br()8%|-|LV3&br()(08)&br()8%||-|LV4&br()(01)&br()8%|LV5&br()(06)&br()5%||LV6&br()(05)&br()5%|-|-|-|

***CSS使用
#divid(table_normalcell_small){
|~連邦：汎用機|~二等兵|~一等兵|~上等兵||~伍長|~軍曹|~曹長||~少尉|~中尉|~大尉||~少佐|~中佐|~大佐|~備考|
|[[ジム]]|LV1&br()LV2&br()(07)&br()20%|LV3&br()(09)&br()12%|-||LV4&br()(05)&br()8%|-|LV5&br()8%||LV6&br()(01)&br()5%|-|-||-|-|-|-|
|[[陸戦型ジム]]|-|-|LV2&br()(01)&br()10%||LV2&br()(08)&br()8%|-|LV3&br()(08)&br()8%||-|LV4&br()(01)&br()8%|LV5&br()(06)&br()5%||LV6&br()(05)&br()5%|-|-|-|
}

**テーブルセンター table_center
-テーブルの要素全てをセンタリングします
-table_normalcell_centerとほぼ同じ挙動です
***CSS未使用
|&space()|LV1|LV2|LV3|h
|Cost|100|125|150|
|機体HP|7000|7500|8000|
|~耐射撃装甲|31|40|48|
|~耐ビーム装甲|34|42|51|
|~耐格闘装甲|31|40|48|

***CSS使用
#divid(table_center){
|&space()|LV1|LV2|LV3|h
|Cost|100|125|150|
|機体HP|7000|7500|8000|
|~耐射撃装甲|31|40|48|
|~耐ビーム装甲|34|42|51|
|~耐格闘装甲|31|40|48|
}

**テーブル最大幅 table_maxwidth
-テーブルの横幅を幅いっぱいまで拡張します
***CSS未使用
|強襲|汎用|支援|h
|[[フルアーマー・ガンダム【TB】]]|[[ジム]]|[[ザク・タンク［砲撃仕様］]]|

***CSS使用
#divid(table_maxwidth){
|強襲|汎用|支援|h
|[[フルアーマー・ガンダム【TB】]]|[[ジム]]|[[ザク・タンク［砲撃仕様］]]|
}

***CSS使用(table_centerと同時使用)
#divid(table_maxwidth){
#divid(table_center){
|強襲|汎用|支援|h
|[[フルアーマー・ガンダム【TB】]]|[[ジム]]|[[ザク・タンク［砲撃仕様］]]|
}
}

**テーブル等幅 table_fixed_width
-テーブルの横幅を幅いっぱいまで拡張した上で列の幅を全て等幅にします
***CSS未使用
|強襲|汎用|支援|h
|[[フルアーマー・ガンダム【TB】]]|[[ジム]]|[[ザク・タンク［砲撃仕様］]]|

***CSS使用
#divid(table_fixed_width){
|強襲|汎用|支援|h
|[[フルアーマー・ガンダム【TB】]]|[[ジム]]|[[ザク・タンク［砲撃仕様］]]|
}


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

***CSS未使用
|ランバ・ラル：|「旧ウィキとは違うのだよ，旧ウィキとは！」|
|リオ・マリーニ：|「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」|
|シロー・アマダ：|「アイナ！好きだーーッ！！」|
|シャア：|「見えるぞ！私にもソースが見える！」|
|&color(#844){&b(){シーマ・ガラハウ：}}|&color(#844){&b(){「アフィリエイトなんか貼るな！沈みたいのか！！！！」}}|
|&color(#448){&b(){スレッガー・ロウ：}}|&color(#448){&b(){「悲しいけどコレ、移植なのよね！」}}|

***CSS使用
#divid(invisible_table){
|ランバ・ラル：|「旧ウィキとは違うのだよ，旧ウィキとは！」|
|リオ・マリーニ：|「トップのタイトルロゴなんてただの飾りです。偉い人にはそれがわからんのですよ。」|
|シロー・アマダ：|「アイナ！好きだーーッ！！」|
|シャア：|「見えるぞ！私にもソースが見える！」|
|&color(#844){&b(){シーマ・ガラハウ：}}|&color(#844){&b(){「アフィリエイトなんか貼るな！沈みたいのか！！！！」}}|
|&color(#448){&b(){スレッガー・ロウ：}}|&color(#448){&b(){「悲しいけどコレ、移植なのよね！」}}|
}

**川柳表示用リスト senryu_liststyle_none
-リスト構造１～３階層を利用して，川柳・俳句を表示するCSSです．
#divid(senryu_liststyle_none){
-待長と　揶揄されつつも　その己（斧）の
--ただ一振りに　駆（懸）けよ白狼
---すなやま
}

**掲示板情報表示デザイン boardinfo
-掲示板ページトップのインフォメーション部分に使用しています

**コメント（階層リスト構造）の色分け comment_colorize
-過去ログ用のリスト構造部分を色分けするためのCSSです．
-今のところ20階層まで色分けが可能です．
#divid(comment_colorize){
-1：文章
--2：文章
---3：文章
----4：文章
-----5：文章
------6：文章
-------7：文章
--------8：文章
---------9：文章
----------10：文章
-----------11：文章
------------12：文章
-------------13：文章
--------------14：文章
---------------15：文章
----------------16：文章
-----------------17：文章
------------------18：文章
-------------------19：文章
--------------------20：文章
}

*コメント欄
過去ログ　[[1>攻略WikiCSS一覧/ログ1]]

#pcomment(below2,reply,size=80,title_name=名前,20,enableurl,攻略WikiCSS一覧/ログ1)
最新の20件を表示しています．[[全てのコメントを見る>攻略WikiCSS一覧/ログ1]]

&link_up(▲トップに戻ります▲)