HTML講座

文字（見出し）装飾

見出し0

.basic{
    padding: 0.5em 0em 0.5em 3em;
    letter-spacing: 0.5em;
    font-size:1em;
    font-weight: bold;
}

これをベースに装飾を設定してみよう

見出し文の飾りに使えるのは見出し本体のボックス＋before疑似要素のボックス＋after疑似要素のボックス

疑似要素をposition:absolute指定するとどちらがbeforeでどちらがafterかは問われなくなる。

見出しパターン1

見出し1

.title01{
    position: relative;     /*次の疑似要素::beforeの基点とする*/
    background: #676767;
    color:#FFF;
    text-shadow: 1px 1px 10px #C0C0C0;
    border-radius:5px;    /*周囲の角を取る*/
}
.title01::before{
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;   /*基点からの絶対位置で場所指定*/
    top: 0.5em;           /*●の起点を上のpadding(0.5em)分ずらす*/
    left: 1em;            /*●の起点を一文字分ずらす*/
    height: 1.2em;
    width:1.2em;          /*一文字より少し大きめの■を作る*/
    background: #FFF;
    color: #fff;
    border-radius: 50%;   /*■の角を取る*/
    box-shadow: 1px 1px 1px #777 inset;
}

見出しパターン2

見出し2

.title02{
    position: relative;     /*次の疑似要素::afterの基点とする*/
    background: #676767;
    color: #fff;
}
.title02::after{
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;    /*基点からの絶対位置で場所指定*/
    bottom: -0.1em;       /*薄い四角枠の起点を下にずらす*/
    left: 1em;            /*薄い四角枠の起点を右にずらす*/
    width: 40%;           /*薄い四角枠の幅*/
    height: 2em;          /*薄い四角枠の高さ*/
    background: rgba(192,192,192,0.4);  /*薄い四角枠の色、透明設定を行っている*/
    -webkit-transform: rotate(-3deg);  /*safari対応*/
    transform: rotate(-3deg);  /*薄い四角枠を少し傾ける*/
}

見出しパターン3

見出し3

.title03{
    position: relative;     /*次の疑似要素::before,afterの基点とする*/
    background: #fff;
    border-bottom: 3px solid #000;
}
.title03::before{ /*前の少し濃い四角*/
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;   /*基点からの絶対位置で場所指定*/
    top: 1em;
    left: 1em;
    height: 0.5em;
    width: 0.5em;
    -webkit-transform: rotate(15deg);  /*safari対応*/
    transform: rotate(15deg); /*15度回転*/
    background:#040404;
}
.title03::after{ /*後の薄い四角*/
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;   /*基点からの絶対位置で場所指定*/
    top: 0.1em;
    left: 1.4em;
    height: 0.8em;
    width: 0.8em;
    -webkit-transform: rotate(45deg);  /*safari対応*/
    transform: rotate(45deg); /*45度回転*/
    background: #787878;
}

見出しパターン4

見出し4

.title04{
    position: relative;     /*次の疑似要素::before,afterの基点とする*/
    background: #fff;
    border-bottom: 1px solid #000;
}
.title04::before{    /*前の□*/
    content: "□";     /*疑似要素の中身、中抜き□*/
    position: absolute;   /*基点からの絶対位置で場所指定*/
    top: 1em;
    left: 0.8em;
    color: #676767;
}
.title04::after{    /*後の□*/
    content:"□";      /*疑似要素の中身、中抜き□*/
    position: absolute;   /*基点からの絶対位置で場所指定*/
    top: 0.6em;
    left: 1em;
    color: #000000;
}

見出しパターン5

見出し5

.title05 {
    position: relative;     /*次の疑似要素::before,afterの基点とする*/
    background: #FFF;                                         /* title05の背景色*/
    border:0.3em solid #000;                                  /* title05のボーダー幅・色*/
}
.title05::before { /* 吹き出しの突起部分 */
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;     /*基点からの絶対位置で場所指定*/
    bottom: -2.6em;   /* 吹き出し部分の高さ×2 - 吹き出しの枠線の太さ */
    left: 2em;        /* 吹き出し開始位置 */
    z-index: 1;      /*ボックスの重なりの順位、こっちが上*/
    border-color: #FFF transparent  transparent transparent;   /* title05の背景色とそろえる */
    border-style:solid;
    border-width:1.5em;/* 吹き出し部分の高さ */
}
.title05::after { /* 吹き出し部分の枠線 */
    content: "";          /*疑似要素の中身、今回はboxでデザインするだけなので中身は空白*/
    position: absolute;      /*基点からの絶対位置で場所指定*/
    bottom: -3em;      /* 吹き出し部分の高さ×2 */
    left: 2em;         /* 吹き出し開始位置 */
    z-index: 0;      /*ボックスの重なりの順位、こっちが下*/
    border-color:#000 transparent transparent  transparent;    /* title05のborder色とそろえる */
    border-style:solid;
    border-width:1.5em; /* 吹き出し部分の高さ */
}

見出し5 ヒント


.title05-1::before {
    border-color: blue red orange green;
}
.title05-1::after {
    border-color: blue red orange green;
}