CSS

CSSでタブ付き強調見出しを付ける方法

記事を書いていると「ここ強く強調したいな」と思うところが出できます。当サイトでは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 !;
シングルクオートで囲まれた文字がタブに表示されます。適宜修正して下さい。

いかがでしょうか。かなり簡単に実装できるのでは。と思います。

 

GoogleAdSenseをスマホアプリで使ってみよう前のページ

意外と簡単!ファビコン(favicon.ico)の設置次のページ

ピックアップ記事

  1. サイトマップをグーグルに登録してクローラーを呼び込む
  2. 低価格レンタルサーバー比較:JETBOY vs ロリポップ
  3. Windows10でHDD不具合、SSDに交換でアクティベーションは必要か?

関連記事

  1. CSS

    CSSで蛍光ペンの様なアンダーラインを引く方法

    この記事では、WEB上でよく見かける蛍光ペン風マーカー線について…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. ASPアフィリ

    物販サイトや旅行サイトは「カエレバ」「ヨメレバ」「トマレバ」が便利
  2. アフィリエイトの始め方

    パソコンの向こうにいる読者の「ペルソナ」を考えよう
  3. ASPアフィリ

    【図解】もしもアフィリエイトに登録してみよう
  4. GoogleAdSense

    グーグルアドセンスの銀行口座はいつ登録するの?登録した記憶が無い!
  5. アフィリエイトの始め方

    雑記ブログの運用方針を考える
PAGE TOP