まとめ @ ウィキ
まとめ @ ウィキ

wiki導入済みCSS一覧

導入済みCSS一覧

試作品（aikatsu）

ただ赤くするだけ。
アイカツ！

編集中入力内容

#divclass(aikatsu){アイカツ！} 
  1. .aikatsu{
  2.     color:red;
  3. }
  4.  

テーブル最大幅（table_maxwidth）

幅を最大まで伸ばす。
あいうえお か きくけこ
aiueo ka kikukeko

編集中入力内容

#divclass(table_maxwidth){
|あいうえお|か|きくけこ|h
|aiueo|ka|kikukeko|
}
  1. .table_maxwidth table {
  2.     width: 100%;
  3. }
  4.  

テーブル等幅（table_fixed_width）

全ての幅を統一した上で、最大まで広げる。
あいうえお か きくけこ
aiueo ka kikukeko

編集中入力内容

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

CSS記述内容

  1. /* テーブル等幅 */
  2. .table_fixed_width table {
  3.     table-layout: fixed;
  4.     width: 100%;
  5. }
  6.  

不可視テーブル（invisible_table）

枠線を透明にします。
会社名 ： あいうえお
社員数 ： 24名
設立日 ： 2022年2月28日

編集中入力内容

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

CSS記述内容

  1. /* 不可視テーブル設定 */
  2. .invisible_table table,
  3. .invisible_table th,
  4. .invisible_table td {
  5.     border: 0;
  6. }
  7.  

table_1設定のテーブル（table_1）

一つ一つを点線で分け、全体を太枠で囲みます。
果物 味 色
いちご 甘酸っぱい 赤い
バナナ 甘い 黄色い
ぶどう 甘い 紫

編集中入力内容

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

CSS記述内容

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

パンくずリスト（breadcrumb）

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

編集中入力内容

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

CSS記述内容

  1. /* パンくずリスト */
  2. .breadcrumb {
  3.     margin: 0;
  4.     padding: 1.1em 1em;
  5.     list-style: none;
  6.     background: #e9edf5;
  7.     overflow: hidden;
  8.     font-family: FontAwesome;
  9. }
  10.  

縁取り文字（outline）

文字の縁を取った、中抜け文字を描写できます。
アイカツ！

編集中入力内容

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

CSS記述内容

  1. /* 縁取り文字 */
  2. .outline {
  3.     text-shadow:
  4.       black 1px 0px 0px,
  5.       black -1px 0px 0px,
  6.       black 0px 1px 0px,
  7.       black 0px -1px 0px;
  8.     color: white;
  9. }
  10.  

プログラム記述用

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

編集中入力内容

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

CSS記述内容

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

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

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

編集中入力内容

#divclass(contents){
#divid(mokuji){目次}
}
#divid(nakami){
#contents(level=1)
}
}

CSS記述内容

  1. /* 固定表示メニュー */
  2. .contents {
  3.     position: fixed;
  4.     width: 190px;
  5.     padding: 5px;
  6.     right: 0;
  7.     top: 124px;
  8.     max-height: 504px;
  9.     overflow-y: auto;
  10.     line-height: normal;
  11.     border-radius: 4px;
  12.     background: #d1d1d1;
  13.     z-index: 14;
  14. }
  15. .contents ul {
  16.     margin: 0;
  17.     margin-bottom: 1em;
  18. }
  19. /*--------------------------------------------------------------------------------------------------------*/
  20. /* 目次の展開・格納Javascript用id */
  21. #mokuji {
  22.     display:block;
  23.     text-align:center;
  24.     cursor:pointer;
  25. }
  26. #nakami {
  27.     display:none;
  28. }
  29.  

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

Javascriptを用いないと出来なかった固定表示メニューが、このCSSと「表示切り替え」プラグインによってJavascript無しでも可能になった。
なのでこのCSSならページの編集可能範囲をを管理者のみにしなくて良くなる。

編集中入力内容

#divclass(openclose){
#openclose(show= 　　　　目次　　　　 ){
#contents(level=1)
}
}

CSS記述内容

  1. /* プラグインによる固定表示メニュー装飾用 */
  2. .openclose {
  3.     position: fixed;
  4.     width: 190px;
  5.     padding: 5px;
  6.     right: 0;
  7.     top: 124px;
  8.     max-height: 504px;
  9.     overflow-y: auto;
  10.     line-height: normal;
  11.     border-radius: 4px;
  12.     background: #d1d1d1;
  13.     z-index: 14;
  14. }
  15. /* 目次 */
  16. .plugin_openclose_b {
  17.     display: block;
  18.     text-align: center;
  19.     font-size: 1.5em;
  20.     font-weight: bold;
  21. }
  22. /* 中身 */
  23. .plugin_contents ul li {
  24.     margin-bottom: 0.2em;
  25. }
  26. /* 枠と枠内の余白を消す為 */
  27. #plugin_openclose_0_167_ {
  28.     border: none !important;
  29.     padding: 0 !important;
  30.     margin: 0 !important;
  31. }
  32.  

テーブルの横スクロール化（table_horizontal_scroll）

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

編集中入力内容

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

CSS記述内容

  1. /* テーブルの横スクロール化 */
  2. .table_horizontal_scroll {
  3. overflow-x: scroll;
  4. white-space: nowrap;
  5. }
  6.  
}

固定表示メニュー（「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記述内容

  1. /* 目次固定表示（プラグイン、js抜き） */
  2. /* ホバー前での表示 */
  3. .contents_hover {
  4.     position: fixed;/* 固定表示化 */
  5.     opacity: .15;/* 半透明化 */
  6.     width: 190px;
  7.     height: 26px;
  8.     top: 124px;
  9.     right: 0;
  10.     padding: 5px;
  11.     border-radius: 4px;
  12.     overflow-y: hidden;
  13.     background-color: #d1d1d1;
  14.     transition-delay: .1s;
  15.     transition-duration: .5s;
  16.     transition-timing-function: ease-in-out;
  17.     z-index: 14;
  18. }
  19. /* ホバー時の表示 */
  20. .contents_hover:hover {
  21.     opacity: 1;
  22.     height: 504px;
  23.     overflow-y: auto;
  24. }
  25. /* ホバー前の「目次」を濃くするため */
  26. .contents_opacity_1 {
  27.     position: fixed;
  28.     opacity: 1;
  29.     width: 190px;
  30.     height: 26px;
  31.     top: 124px;
  32.     right: 0;
  33.     padding: 5px;
  34.     border-radius: 4px;
  35.     background-color: #d1d1d1;
  36.     z-index: 13;
  37. }
  38.  
「wiki導入済みCSS一覧」をウィキ内検索
最終更新：2024年01月18日 16:56