「攻略WikiCSS一覧」の編集履歴（バックアップ）一覧はこちら
「攻略WikiCSS一覧」(2017/09/23 (土) 23:29:15) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#contents
*CSSとは？
CSSとは，WEBページのデザインを記述するための言語のことです．
*CSS以外でデザインしちゃ嫌！
htmlタグやWikiの文法でもある程度デザインを変更することが出来ますが，htmlやWikiの文法は本来''文章の構造を記述するための言語''です．文章構造を記述する言語でページの見た目（デザイン）を変更すると，ページ構造や論理構造がわかりにくいことになってしまいます．たとえば，
-表組み(table)機能で文章をインデントする
-見出しタグ(html:h1,h2,h3)(Wiki:**)を使って色を変える
-右寄せ・中央寄せ(Wiki: RIGHT:, CENTER:)を使ってテーブルの見栄えを整える
等々．
書いた本人はどのような考えで文法を書いたのかわかりますが，第三者が後から再編集しようとしたときに
-「はて？何故この文章は文の真ん中に見だしがあるのだろう？」
-「テーブルの全てのセルにCENTER:が入ってて読みにくい！」
などということになりがちです．
そこで，管理人が用意した幾つかの''CSS(ID属性)''を本ページに記載しておきます．
*CSSを働かせるためのWikiプラグイン
''&nowiki(){#divid(){}}''プラグインを使用します
例えば，
***通常のリスト構造
&nowiki(){-,--,---}で通常のリスト構造を記述した場合です．
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
***とある川柳のCSSを利用したリスト構造
#divid(senryu_liststyle_none){
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
}
ここでは，''senryu_liststyle_none''という&strong(){CSS ID属性}を''divid''プラグインで指定しています．
&nowiki(){#divid(senryu_liststyle_none){}
&nowiki(){-待長と 揶揄されつつも その己（斧）の}
&nowiki(){--ただ一振りに 駆（懸）けよ白狼}
&nowiki(){---すなやま}
&nowiki(){}}
*使用できる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使用
#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%|-|-|-|
}
**不可視テーブル 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(){「悲しいけどコレ、移植なのよね！」}}|
}
**MS一覧用テーブル(等幅) table_ms
-MSページ下の''MS一覧''に使用しているCSS．
-ノーマルセルの横幅を全部同じ割合に変更します
***CSS未使用
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
***CSS使用
#divid(table_ms){
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
}
**MS一覧用テーブル(360px幅) table_ms_360px
-上の''ms_table''は横幅を等間隔にしたため，ブラウザを伸び縮みさせると幅が変わりますが，こちらは１セルの横幅を''360px''に固定します．
-ちなみに，本Wikiのコンテンツ欄（白い部分）の最小横幅は''768px''です．これ以上幅は小さくなりません．
***CSS未使用
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
***CSS使用
#divid(table_ms_360px){
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
}
**川柳表示用リスト senryu_liststyle_none
-リスト構造１～３階層を利用して，川柳・俳句を表示するCSSです．
#divid(senryu_liststyle_none){
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
}
**掲示板情報表示デザイン boardinfo
-掲示板ページトップのインフォメーション部分に使用しています
**コメント（階層リスト構造）の色分け comment_colorize
-過去ログ用のリスト構造部分を色分けするためのCSSです．
-今のところ12階層まで色分けが可能です．
#divid(comment_colorize){
-1：文章
--2：文章
---3：文章
----4：文章
-----5：文章
------6：文章
-------7：文章
--------8：文章
---------9：文章
----------10：文章
-----------11：文章
------------12：文章
}
*コメント欄
//ラジオボタン付きコメントの表示件数は20件が最大です
//ログ更新の際は３箇所を書き換えて下さい
過去ログ [[1>攻略WikiCSS一覧過去ログ1]]
#pcomment(below2,reply,size=80,title_name=名前,攻略WikiCSS一覧過去ログ1,20)
最新の20件を表示しています．[[全てのコメントを見る>攻略WikiCSS一覧過去ログ1]]
&link_up(▲トップに戻ります▲)
#contents
*CSSとは？
CSSとは，WEBページのデザインを記述するための言語のことです．
*CSS以外でデザインしちゃ嫌！
htmlタグやWikiの文法でもある程度デザインを変更することが出来ますが，htmlやWikiの文法は本来''文章の構造を記述するための言語''です．文章構造を記述する言語でページの見た目（デザイン）を変更すると，ページ構造や論理構造がわかりにくいことになってしまいます．たとえば，
-表組み(table)機能で文章をインデントする
-見出しタグ(html:h1,h2,h3)(Wiki:**)を使って色を変える
-右寄せ・中央寄せ(Wiki: RIGHT:, CENTER:)を使ってテーブルの見栄えを整える
等々．
書いた本人はどのような考えで文法を書いたのかわかりますが，第三者が後から再編集しようとしたときに
-「はて？何故この文章は文の真ん中に見だしがあるのだろう？」
-「テーブルの全てのセルにCENTER:が入ってて読みにくい！」
などということになりがちです．
そこで，管理人が用意した幾つかの''CSS(ID属性)''を本ページに記載しておきます．
*CSSを働かせるためのWikiプラグイン
''&nowiki(){#divid(){}}''プラグインを使用します
例えば，
***通常のリスト構造
&nowiki(){-,--,---}で通常のリスト構造を記述した場合です．
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
***とある川柳のCSSを利用したリスト構造
#divid(senryu_liststyle_none){
-待長と 揶揄されつつも その己（斧）の
--ただ一振りに 駆（懸）けよ白狼
---すなやま
}
ここでは，''senryu_liststyle_none''という&strong(){CSS ID属性}を''divid''プラグインで指定しています．
&nowiki(){#divid(senryu_liststyle_none){}
&nowiki(){-待長と 揶揄されつつも その己（斧）の}
&nowiki(){--ただ一振りに 駆（懸）けよ白狼}
&nowiki(){---すなやま}
&nowiki(){}}
*使用できる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使用
#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%|-|-|-|
}
**不可視テーブル 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(){「悲しいけどコレ、移植なのよね！」}}|
}
**MS一覧用テーブル(等幅) table_ms
-MSページ下の''MS一覧''に使用しているCSS．
-ノーマルセルの横幅を全部同じ割合に変更します
***CSS未使用
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
***CSS使用
#divid(table_ms){
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
}
**MS一覧用テーブル(360px幅) table_ms_360px
-上の''ms_table''は横幅を等間隔にしたため，ブラウザを伸び縮みさせると幅が変わりますが，こちらは１セルの横幅を''360px''に固定します．
-ちなみに，本Wikiのコンテンツ欄（白い部分）の最小横幅は''768px''です．これ以上幅は小さくなりません．
***CSS未使用
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
***CSS使用
#divid(table_ms_360px){
|~機体名|~機体HP|~スピード|
|~「先行配備」ジム・ライトアーマー|4500|185|
}
**川柳表示用リスト 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：文章
}
*コメント欄
//ラジオボタン付きコメントの表示件数は20件が最大です
//ログ更新の際は３箇所を書き換えて下さい
過去ログ [[1>攻略WikiCSS一覧過去ログ1]]
#pcomment(below2,reply,size=80,title_name=名前,攻略WikiCSS一覧過去ログ1,20)
最新の20件を表示しています．[[全てのコメントを見る>攻略WikiCSS一覧過去ログ1]]
&link_up(▲トップに戻ります▲)
