settings

code:style.css

/*=============================================================*/

/* 全体のデザイン */body {

}

.app {

width: 100vw;

margin: 50px auto;

max-width: 980px;

}

.container {

width: 100%;

padding: 0px;

max-width: none;

}

.row-flex {

background-color: white;

padding-top: 20px;

}

.col-page {

width: auto;

padding: 20px;

max-width: 980px;

background-color: white;

}

.col-page-side {

background-color: white;

}

.col-page .page {

width: 100vw

max-width: 980px;

background: none;

box-shadow: none;

padding: 10px;

}

/* ナビゲートバー調整（タイトル位置の調整） */

.navbar {

position: relative;

}

.navbar .row .project-home::before {

content: "東京学芸大学 ICTセンター 教育情報化研究チーム";

}

.navbar .project-home .title {

display: none;

}

.navbar .row:has(.col-search) {

grid-template-columns: 3fr 1.5fr minmax(0, 1fr);

}

.navbar .row

margin-left: 10px;

margin-right: 10px;

}

/***************** コンテナ部　******************/

.page-sort-menu .tool-btn {

color: white;

}

/* 背景 */

.container .quick-launch {

height: 25vw;

background-repeat: no-repeat;

background-position: center;

background-size: cover;

margin: 0;

}

/* 一覧 */

.container .page-list ul.grid {

grid-template-columns: repeat(auto-fill, minmax(200px, 200px));

}

/* pinついていない要素は非表示 */

.page-list .page-list-item.grid-style-item:not(.pin) {

display: none;

}

/* pinマークを非表示 */

.container .page-list div.pin {

display: none;

}

.container .page-list ul.grid {

position: relative;

flex-direction: column-reverse;

justify-content: space-between;

align-items: center;

flex-wrap: wrap;

width: 100%;

margin-top: 10px;

grid-template-columns: repeat(auto-fill, minmax(40%, 49%));

gap: 5px 1%;

}

.container .page-list .grid li {

aspect-ratio: initial;

}

.container .page-list .grid li.page-list-item a {

width: 100%;

height: 100px;

margin: 5px 0;

background: none;

box-shadow: none;

transition: background-color 300ms ease;

}

.container .page-list .grid page-list-item a:hover {

box-shadow: none;

}

.container .page-list .grid .page-list-item a.header {

border: none;

}

.container .page-list .grid .page-list-item a.description {

max-height: 120px;

}

.container .related-page-list {

margin-top: 50px;

}

.container .related-page-list ul.grid {

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

gap: clamp(8px, 1.5svw, 12px);

}

強調

code:style.css

.line i {

font-style: normal;

font-weight: bold;

}

.level-1 img { width: 16.7%; max-height: none; }

.level-2 img { width: 33.3%; max-height: none; }

.level-3 img { width: 50%; max-height: none; }

.level-4 img { width: 66.7%; max-height: none; }

.level-5 img { width: 83.3%; max-height: none; }

.level-6 img { width: 100%; max-height: none; }

.line img.strong-icon { max-height: 3em; height: auto }

良さげな見出しにする

*を3~5個使って強調すると、左側にマーク付く

code:style.css

.line strong {

width: 100%;

margin: 0.2em 0;

}

.line strong a:link {

text-decoration: none;

}

テーブルタグを見やすくしてみる

table:使うことあるのかな？

f f f

f f f

f

f

改行で行の仕切り、tabキーで列の仕切り

code:style.css

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセル*/

}

リンクをわかりやすくできるかも

code:style.css

/* External links */

/*.line a.link:not(.icon)::after { font-family:'FontAwesome'; content: ' \f08e'; display: inline-block }*/

吹き出し

吹き出し

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

padding: 0.1em 0.2em 0.1em 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

code:style.css

.deco-\{ a,

.deco-\} a {

}

左から

code:style.css

.deco-\{:before {

position: absolute;

margin: 0;

padding: 0;

transform: translateX(-100%) translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0 0.6em 0.6em;

border-style: solid;

}

右から

code:style.css

.deco-\}:after{

position: absolute;

margin: 0;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

border-width: 0 0.6em 0.6em 0;

border-style: solid;

}

code:style.css

.page-list .grid li:hover {

transition: 0.5s;

transform:scale(1.2);

}

テンプレートアイコン設定

code:style.css

a#Templates.tool-btn:hover { text-decoration: none }

a#Templates.tool-btn::before { position: absolute; left: calc(46px/3 - 1px); content: '\f067'; font: 21px/46px 'FontAwesome' }

a#Templates.tool-btn img { opacity: 0 }

画像を並べて表示

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| img.image { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

警告

Warning!!!

code:style.css

.line:not(.cursor-line) .deco-\!.deco-\~ {

padding: 0.5em 0 !important;

}

.line:not(.cursor-line) .deco-\!.deco-\~ a {

}

.line:not(.cursor-line) .deco-\!.deco-\~ a:hover {

opacity: .5;

}

.line:not(.cursor-line) .deco-\!.deco-\~ {

position: absolute;

left: -20px;

right: -20px;

width: auto !important;

max-width: none;

transform: none;

z-index: 300;

text-align: center;

transform: none;

}

@media screen and (min-width: 767px) {

.line:not(.cursor-line) .deco-\!.deco-\~ {

left: -30px;

right: -30px;

}

}

@media screen and (min-width: 991px) {

.line:not(.cursor-line) .deco-\!.deco-\~ {

left: -50px;

right: -50px;

}

}

カーソルをカスタマイズ

同時作業中のユーザのカーソルが点滅しないように設定

code:style.css

/* カーソルの幅と色替え */

.cursor {

width: 1px;

background-color: rgba(0,0,0,.6);

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

/* 同時作業中のユーザのカーソル設定 */

重要な部分を青くする

ヘッダー

code:style.css

.line .deco-\!{

display: inline-block; min-width: 3.2em; padding: .2em .4em; border-radius: .2em;

line-height: 1; vertical-align: unset; text-align: center;

}

.line strong .deco-\! {

padding: .2em 0 !important;

font-size: 100%;

}

.line .deco-\! a {

}

.line .deco-\! a:hover {

opacity: .5;

}

.line strong:not(.level-1):not(.level-2) .deco-\! {

display: inline-block;

width: 100%;

}

.line strong:not(.level-1):not(.level-2) .deco-\!:after {

display: none;

}

code:style.css

/* タグアイコンの共通スタイル (1) */

display: inline-block; width: 0; text-indent: -9999px }

display: inline-block; width: 0; text-indent: -9999px }

/* タグアイコンの共通スタイル (2) */

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal;font-family: 'Font Awesome 5 Free'; text-align: center;font-weight: 900; }

display: inline-block; min-width: 1.15em; padding-left: 1px;

font: normal 110%/normal;font-family: 'Font Awesome 5 Free'; text-align: center; font-weight: 900;}

/* ここから各アイコンの設定 */

code:style.css

/* しおり記法 -- しおり箇所のマークやハイライトが不要な場合はこのブロックは消してね */

@media screen {

.app:not(.presentation) .line .deco-\.::after {

position: absolute; top: 3px; left: -1.4em;

content: '\f02e'; font: 1.7rem/1;font-family: 'Font Awesome 5 Free'; color: yellowgreen } }

@media screen and (max-width: 990px) {

.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }

マーカー

こんな感じ

code:style.css

.deco-\& {

}

うす墨字

こんな感じ

code:style.css

.deco-\' {

color:#C0C0C0

}