記事を書いていると「ここ強く強調したいな」と思うところが出できます。当サイトではCSSで作成したタブ付き強調見出しを使って強調していますので、そのサンプルコードを使いながら解説していきます。
このサイトで使っているタブ付き強調見出し
実際にこのサイトではオレンジのCHECKタブとピンクのPOINTタブを使っていますのでまずはそのコードを紹介します。
タブ付き強調見出し・CHECK
cssファイルへの記述内容と、実際のhtml文
/*四角*/
.tab-check{
position: relative;
border-top: solid 2px #ff8c00;
border-bottom: solid 2px #ff8c00;
background: #f8f8f8;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
font-weight:bold;
}
/*タブ*/
.tab-check:after {
position: absolute;
content: 'CHECK !';
background: #ff8c00;
color: #ffffff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
<span class="tab-check">タブ付き強調見出し・CHECK</span>
タブ付き強調見出し・POINT
cssファイルへの記述内容と、実際のhtml文
/*四角*/
.tab-point{
position: relative;
border-top: solid 2px #ff1493;
border-bottom: solid 2px #ff1493;
background: #f8f8f8;
line-height: 1.4;
padding: 0.4em 0.5em;
margin: 2em 0 0.5em;
font-weight:bold;
}
/*タブ*/
.tab-point:after {
position: absolute;
content: 'POINT !';
background: #ff1493;
color: #ffffff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}
<span class="tab-point">タブ付き強調見出し・POINT</span>
CSS補足
基本的に飾りはCSSの部分を修正します。オレンジのCHECKタブを例に主な修正点を説明します。
タブ及び線の色
4～5行目
border-top: solid 2px #ff8c00;
border-bottom: solid 2px #ff8c00;
16行目
background: #ff8c00;
#の後ろを16進数のカラーコードで指定しています。
文字背景
6行目
background: #f8f8f8;
ここも#の後ろを16進数のカラーコードで指定しています。私は全体のバックグランドカラーと合わせていますが、白(#ffffff)の方が使いやすいかもしれません。
タブの文字
15行目
content: ‘CHECK !‘;
シングルクオートで囲まれた文字がタブに表示されます。適宜修正して下さい。
いかがでしょうか。かなり簡単に実装できるのでは。と思います。
この記事へのコメントはありません。