wiki導入済みCSS一覧 - まとめ @ ウィキ

ホーム > wiki導入済みCSS一覧

導入済みCSS一覧

---

試作品（aikatsu）

ただ赤くするだけ。

アイカツ！

編集中入力内容

#divclass(aikatsu){アイカツ！}

.aikatsu{
    color:red;
}
 

---

テーブル最大幅（table_maxwidth）

幅を最大まで伸ばす。

あいうえお	か	きくけこ
aiueo	ka	kikukeko

編集中入力内容

#divclass(table_maxwidth){
|あいうえお|か|きくけこ|h
|aiueo|ka|kikukeko|
}

.table_maxwidth table {
    width: 100%;
}
 

---

テーブル等幅（table_fixed_width）

全ての幅を統一した上で、最大まで広げる。

あいうえお	か	きくけこ
aiueo	ka	kikukeko

編集中入力内容

#divclass(table_fixed_width){
|あいうえお|か|きくけこ|h
|aiueo|ka|kikukeko|
}

CSS記述内容

/* テーブル等幅 */
.table_fixed_width table {
    table-layout: fixed;
    width: 100%;
}
 

---

不可視テーブル（invisible_table）

枠線を透明にします。

会社名	：	あいうえお
社員数	：	24名
設立日	：	2022年2月28日

編集中入力内容

#divclass(invisible_table){
|会社名|：|あいうえお|h
|社員数|：|24名|
|設立日|：|2022年2月28日|
}

CSS記述内容

/* 不可視テーブル設定 */
.invisible_table table,
.invisible_table th,
.invisible_table td {
    border: 0;
}
 

---

table_1設定のテーブル（table_1）

一つ一つを点線で分け、全体を太枠で囲みます。

果物	味	色
いちご	甘酸っぱい	赤い
バナナ	甘い	黄色い
ぶどう	甘い	紫

編集中入力内容

#divclass(table_1){
|果物|味|色|h
|いちご|甘酸っぱい|赤い|
|バナナ|甘い|黄色い|
|ぶどう|甘い|紫|
}

CSS記述内容

/* 太枠に点線分けのテーブル設定 */
.table_1 table {
    border: solid 2px;/* 表全体を線で囲う */
}
.table_1 > table th, table td {
    border: dashed 1px;/* 一つ一つを点線で分ける */
}
 

---

パンくずリスト（breadcrumb）

パンくずリストを装飾します。

ホーム > wiki導入済みCSS一覧

編集中入力内容

#divclass(breadcrumb){&topicpath(top=ホーム)}

CSS記述内容

/* パンくずリスト */
.breadcrumb {
    margin: 0;
    padding: 1.1em 1em;
    list-style: none;
    background: #e9edf5;
    overflow: hidden;
    font-family: FontAwesome;
}
 

---

縁取り文字（outline）

文字の縁を取った、中抜け文字を描写できます。

アイカツ！

編集中入力内容

#divclass(outline){アイカツ！}

CSS記述内容

/* 縁取り文字 */
.outline {
    text-shadow:
      black 1px 0px 0px,
      black -1px 0px 0px,
      black 0px 1px 0px,
      black 0px -1px 0px;
    color: white;
}
 

---

プログラム記述用

※このWikiではそのままだと文字が少し小さすぎるので大きくしています。

編集中入力内容

#divclass(outline){アイカツ！}

CSS記述内容

/* ソースコードハイライト用装飾 */
pre:not(.cmd_backup) {
    font-size: 1.3em;
    white-space: pre-wrap !important;
}
 

---

固定表示メニュー用（CSS,Javascriptのみ）（contents,mokuji,nakami）

画面右上にスクロールしても固定表示されるようにし、「目次」をクリックしたら展開・格納されるようにする。このページの右上にも表示されている。

編集中入力内容

#divclass(contents){
#divid(mokuji){目次}
}
#divid(nakami){
#contents(level=1)
}
}
}
**CSS記述内容
#highlight(linenumber,CSS){{{{
/* 固定表示メニュー */
.contents {
position: fixed;
width: 190px;
padding: 5px;
right: 0;
top: 124px;
max-height: 504px;
overflow-y: auto;
line-height: normal;
border-radius: 4px;
background: #d1d1d1;
z-index: 14;
}
.contents ul {
margin: 0;
margin-bottom: 1em;
}
/*--------------------------------------------------------------------------------------------------------*/
/* 目次の展開・格納Javascript用id */
#mokuji {
display:block;
text-align:center;
cursor:pointer;
}
#nakami {
display:none;
}
}}}}
----
//--------------------------------------------------------------------------------------------------------------------------------------------------
*固定表示メニュー（「contents」,「openclose」,CSSのみ）&nobold(){（openclose）}
Javascriptを用いないと出来なかった固定表示メニューが、このCSSと「表示切り替え」プラグインによってJavascript無しでも可能になった。
なのでこのCSSならページの編集可能範囲をを管理者のみにしなくて良くなる。
//#divclass(openclose){○○○}
**編集中入力内容
#nowiki(){#divclass(openclose){
#openclose(show= 　　　　目次　　　　 ){
#contents(level=1)
}
}
}
**CSS記述内容
#highlight(linenumber,CSS){{
/* プラグインによる固定表示メニュー装飾用 */
.openclose {
position: fixed;
width: 190px;
padding: 5px;
right: 0;
top: 124px;
max-height: 504px;
overflow-y: auto;
line-height: normal;
border-radius: 4px;
background: #d1d1d1;
z-index: 14;
}
/* 目次 */
.plugin_openclose_b {
display: block;
text-align: center;
font-size: 1.5em;
font-weight: bold;
}
/* 中身 */
.plugin_contents ul li {
margin-bottom: 0.2em;
}
/* 枠と枠内の余白を消す為 */
#plugin_openclose_0_167_ {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
}}
//------------------------------------------------------------
*テーブルの横スクロール化&nobold(){（table_horizontal_scroll）}
説明
#divclass(table_horizontal_scroll){
|果物|味|色|いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||h
|いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
|バナナ|甘い|黄色い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
|ぶどう|甘い|紫||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
}
**編集中入力内容
#nowiki(){#divclass(table_horizontal_scroll){
|果物|味|色|いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||h
|いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
|バナナ|甘い|黄色い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
|ぶどう|甘い|紫||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い||いちご|甘酸っぱい|赤い|
}
}
**CSS記述内容
#highlight(linenumber,CSS){{
/* テーブルの横スクロール化 */
.table_horizontal_scroll {
overflow-x: scroll;
white-space: nowrap;
}
}}

---

---

固定表示メニュー（「contents」,CSSのみ）（contents_hover,contents_opacity_1）

説明
プラグイン「contents」とCSSのみで右上に固定表示の目次を設置できる。

編集中入力内容

#divclass(contents_opacity_1){&font(b,150%){目次}}
#divclass(contents_hover){&font(b,150%){目次}
#contents(level=1,fromhere=true)}}
**CSS記述内容
#highlight(linenumber,CSS){{
/* 目次固定表示（プラグイン、js抜き） */
/* ホバー前での表示 */
.contents_hover {
position: fixed;/* 固定表示化 */
opacity: .15;/* 半透明化 */
width: 190px;
height: 26px;
top: 124px;
right: 0;
padding: 5px;
border-radius: 4px;
overflow-y: hidden;
background-color: #d1d1d1;
transition-delay: .1s;
transition-duration: .5s;
transition-timing-function: ease-in-out;
z-index: 14;
}
/* ホバー時の表示 */
.contents_hover:hover {
opacity: 1;
height: 504px;
overflow-y: auto;
}
/* ホバー前の「目次」を濃くするため */
.contents_opacity_1 {
position: fixed;
opacity: 1;
width: 190px;
height: 26px;
top: 124px;
right: 0;
padding: 5px;
border-radius: 4px;
background-color: #d1d1d1;
z-index: 13;
}
}}
//------------------------------------------------------------
//編集中↑
//------------------------------------------------------------
//------------------------------------------------------------
//見本
//------------------------------------------------------------
#co{
----
//--------------------------------------------------------------------------------------------------------------------------------------------------
*名前&nobold(){（クラス名）}
説明
#divclass(クラス名){○○○}
**編集中入力内容
#nowiki(){#divclass(クラス名){○○○}}
**CSS記述内容
#highlight(linenumber,CSS){{
/* 名前 */
.クラス名 {
内容
}
}}