CSSのサンプルページ

ここでは本サイトで使用中のCSSと、その見た目を一覧で表示します。

見出しタグ

h1

sample.article

    h1.article, .markdown-body h1{
        font-size:20px;
        position: relative;
        padding: .25em 0 .5em .75em;
        border-left: 6px solid rgb(255, 118, 60);
    }
    

    h1.article::after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: '';
        width: 100%;
        height: 0;
        border-bottom: 1px solid #ccc;
    }
    

h2

sample.article

    h2.article, .markdown-body h2 {
        font-size:18px;
        position: relative;
        padding: .5em .75em;
        background-color: #268785;
        border-radius: 6px;
        color:#FFF;
        }
    

    h2.article::after,.markdown-body h2::after {
        position: absolute;
        top: 100%;
        left: 25px;
        content: '';
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top: 15px solid #268785 ;
    }
    

h3

ol

sample
1. a
2. b
3. c

    ol{
        counter-reset:number; /*数字をリセット*/
        list-style-type: none!important; /*数字を一旦消す*/
        padding: 2em 0.8em;
        border: solid 1px #ffb107;
    }
    ol li{
        border-bottom: dashed 1px orange;
        position: relative;
        padding: 0.5em 0.5em 0.5em 30px;
        line-height: 2em;
    }
    ol li:before{
        /* 以下数字をつける */
        position: absolute;
        counter-increment: number;
        content: counter(number);
        /*数字のデザイン変える*/
        display:inline-block;
        background: #ffb107;
        color: white;
        font-family: 'Avenir','Arial Black','Arial',sans-serif;
        font-weight:bold;
        font-size: 15px;
        border-radius: 50%;
        left: 0;
        width: 25px;
        height: 25px;
        line-height: 25px;
        text-align:center;
        /*以下 上下中央寄せのため*/
        top: 2em;
        -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    }
    ol li:last-of-type{
        border-bottom: none; /*最後のliの線だけ消す*/
    }
    

ul

.blueBlock

.blueBlock ul {
    color: #668ad8;/*文字色*/
    border: dashed 2px #668ad8;/*破線 太さ 色*/
    background: #f1f8ff; /*背景色*/
    padding: 0.5em 0.5em 0.5em 2em;
}
    
.blueBlock ul li{
    line-height: 1.5;
    padding: 0.5em 0;
}
    

pre code

        printf("hello,world!")
    

pre code{
    white-space: pre;
    overflow: auto;
    max-height: 700px;
}
pre{
    padding:0;
}
    

divタグ

.red

.red{
    color: rgb(203, 84, 55);
}   
        

.blue

.blue{
    color: rgb(14, 129, 235);
}           
        

.caution

<div class="caution" data-text="注意！">
            

/*caution*/
div.caution{
    border: #e97999 solid 3px;
    padding: 1em 1em 0.5em 1em;
    background: #ffeef0;
    margin: 2.5em 0 1.5em 0;
    border-radius: 0.5em;
    position: relative;
}
div.caution:before{
    border-color: #e95979;
    background: #e97999;
    content: attr(data-text)"";
    font-size: 1.0em;
    padding: 0.25em 1.0em 0 1em;
    position: absolute;
    top: -1em;
    left: 1.5em;
    border-radius: 1em;
    border-width: 0 3px 3px 0;
    border-style: solid;
    color: #ffffff;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
}