css
#NoTags
このプロジェクトのCSS
CSSの書き方を覚える
code:test.css
.A, .B { /*カンマはAまたはBにCSSを適用*/ }
.A .B { /*スペースはAの中にあるBにCSSを適用*/ }
.A {.B { /*最近のブラウザだとネストも可能*/ }}
.A.B{ /*スペースなしは class="A B" に対してCSSを適用*/ }
変数
code:style.css
* {
--col_hash_bg: #e8e8e8;
--size_font: 20px;
--size_fontM: 16px;
--size_fontS: 14px;
}
@media (max-width: 600px) {
* {
--size_font: 16px;
--size_fontM: 14px;
--size_fontS: 12px;
}
}
font
code:style.css
html,body,code,kbd,pre,samp,.tooltip,.editor,.grid li,.list li.page-list-item,.popup-menu,.stream {
font-family: Helvetica, sans-serif;
font-size: var(--size_font);
line-height: 160%;
}
.kamon-caret-down, .kamon-caret-up, .kamon-caret-left, .btn-search {
display: none !important;
}
dropdown
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 100px) !important; overflow-y: auto
}
箇条書きのdotのスタイル
hello
HELLO
aaaaa
bbb
クセの強い形状
code:style.css
.line .indent-mark .dot {
display: block;
position: absolute;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
right: 9px;
top: 9px;
width: 12px;
height: 12px;
border-radius: 50%;
}
.char-index.c-0 + .dot {
background: #000;
}
.char-index.c-1 + .dot {
background: #0001;
border: 1px solid #000;
}
.char-index.c-2 + .dot {
background: #0000;
border: 1px solid #000;
}
Hashtag
#hoge
#fuga aa aaaaaaa
code:style.css
atype=hashtag{
display: inline-block;
background-color: var(--col_hash_bg);
padding: 0px 10px 0px 10px;
margin 0;
border-radius: 150px;
text-underline-offset: 6px;
/*color: var(--col_hash_txt) !important;*/
}
atype=hashtag:hover{
/*background: transparent;*/
/*text-transform: uppercase;*/
}
a:hover{
text-decoration: none;
}
.page-link{
text-decoration: underline !important;
}
.page-link:hover, a:hover{
text-decoration: none !important;
border-radius: 100px;
}
.link, a{
text-underline-offset: 4px;
text-decoration: underline;
}
yahoo
settings
太字
aaa aaaaa
code:style.css
strong {
background: linear-gradient(
to top, /* グラデーション方向 */
#7f7f 0%, /* 0% の位置が赤 */
#7f70 50%, /* 30% の位置が黄 */
#7f70 100% /* 100% の位置が青 */
);
padding: 0 2px;
}
img
code:style.css
.line img.image, .modal-image{
display: inline-block;
margin: 0 auto;
object-fit: contain;
width: 100% !important;
max-width: 100% !important;
/* max-width: none !important; */
max-height: none;
}
.image, .gyazo.image, video.gyazo.image{
background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="10" height="10" fill="rgb(230,230,230)" /><rect x="10" y="10" width="10" height="10" fill="rgb(230,230,230)" /></svg>') !important;
display: block;
margin: 0 auto;
/*width: 100%;*/
}
.gyazo.image{}
navbar
code:style.css
.navbar{
background: transparent;
backdrop-filter: none;
border: 0;
font-size: var(--size_fontS);
}
.toolbar{
margin: 50px 0px !important;
margin-bottom: 30px !important;
}
setting 非表示
code: style.css
.page-list-itemdata-page-title*="settings" {
opacity: 0.3;
}
page title
code:style.css
.line-title{
text-align: center !important;
border-bottom: 2px dotted #888 !important;
padding-top: 0px;
padding-bottom: 10px;
margin-bottom: 30px;
margin-top: 0px;
padding-top: 0px;
}
.line.line-title .text{
text-align: center;
}
.section-title{
text-align: center !important;
}
strong.level-2, strong.level-3{
font-size: var(--size_font) !important;
display: inline-block !important;
text-decoration: none !important;
/*text-align: center !important;*/
width: 100% !important;
border-bottom: 1px dotted #333 !important;
border-top: 1px dotted #333 !important;
padding: 5px 5px;
margin-bottom: 20px;
margin-top: 20px;
background: #fff4;
}
strong.level-2:before, strong.level-3:before{
content: "";
}
pin
code:style.css
/*size*/
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px; /* 行と列の隙間を両方設定 */
}
/* 画面幅が600pxのとき */
@media (max-width: 600px) {
:is(.page-list, .related-page-list) ul.grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px; /* 行と列の隙間を両方設定 */
}
}
/* pinnedのグループを独立させる */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* pinの高さ */
.page-list .grid li.page-list-item.pin {
width: 100%;
height: 70px;
}
/* それ以外 */
.page-list-item {
/*height: 200px !important;*/
border-radius: 20px;
}
/** リストアイテム上部の線を削除 **/
.grid li.page-list-item a .header {
border-top: 0px !important;
}
/**リストアイテムのタイトル**/
.grid li.page-list-item a .header .title{
height: 70px;
font-style: normal;
font-size: var(--size_fontM);
line-height: 150%;
border-bottom: 1px dotted #333;
word-break: auto-phrase !important;
}
/*
.grid li.page-list-item a .description{
padding: 0px;
background: #ccc;
text-overflow: ellipsis; /* 溢れたテキストに省略記号を表示 */
overflow: hidden; /* 溢れた部分を非表示 */
}*/
.grid li.page-list-item a .icon img { object-fit: cover; width: 100%; height: 100%; }
page
code:style.css
main.page{
margin-top: 50px;
padding: 40px;
}
.page-menu{
margin-top: 50px;
}
.container{
max-width: calc(100% - 20px);
margin-bottom: 65px;
}
@media (max-width: 600px) {
.container{
max-width: 100%;
padding: 10px;
}
main.page{
padding: 40px 15px;
}
/*ページ左にある更新履歴視覚化みたいなのを消す*/
.line .telomere .telomere-border {
border: transparent !important;
opacity: 0;
}
矢印を消す
code:style.css
右下
code:style.css
.status-bar>div {
background: transparent !important;
border: 0;
}
table
code:style.css
table{
background: #ccc;
}