CSS

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

記事を書いていると「ここ強く強調したいな」と思うところが出できます。当サイトではCSSで作成したタブ付き強調見出しを使って強調していますので、そのサンプルコードを使いながら解説していきます。


このサイトで使っているタブ付き強調見出し

実際にこのサイトではオレンジのCHECKタブピンクのPOINTタブを使っていますのでまずはそのコードを紹介します。


 

タブ付き強調見出し・CHECK

cssファイルへの記述内容と、実際のhtml文


 

タブ付き強調見出し・POINT

cssファイルへの記述内容と、実際のhtml文

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 !;
シングルクオートで囲まれた文字がタブに表示されます。適宜修正して下さい。

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

 

ピックアップ記事

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

関連記事

  1. CSS

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

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

コメント

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

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

CAPTCHA


最近の記事

  1. アフィリエイトの始め方

    実録:ロリポップライトプラン→JETBOYミニSSDプラン引越顛末記
  2. Wordpress

    【備忘録】WordPressでプラグインを使わずに過去リビジョンを削除する方法
  3. Wordpress

    WordPressでコメントやトラックバック・ピンバックを有効・無効にする方法
  4. CSS

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

    GoogleAdSenseをスマホアプリで使ってみよう
PAGE TOP