【CSS】見出しの記号をCSSで表示

2015/01/20 サイト制作, 技術系 投稿者:竹内

CSSの小技第4回目は「見出しの記号をCSSで表示」です。
見出しに「●」や「▲」「◆」などを利用する場面も多いと思います。
例えばこのような記述↓

● 今月のオススメ商品

最近のHTML5やCSS3の方向性として「色、形、大きさなどの装飾はCSSで行う」と言う前提がありますので、HTMLソースはなるべくテキストのみで記述したいところです。
また、見出しはSEO対策として重要な面もありますので、余計なテキストを入れ込むことは極力避けたいと言うのが実情です。

記号を表示させる方法

css4-1

Webページ上で記号を表示させる場所として、見出しの「前」か「後」もしくは「両方」かと言う部分があります。
ここで使用するのが:before:afterの擬似セレクタです。
それから表示させる記号を指定するcontentのプロパティです。

HTML

CSS

アレンジ1

css4-2

見出しに限らずリストタグなどでも活用できます。また、色の変更をすることも出来ます。

HTML

CSS

アレンジ2

css4-3

リストタグで言うところのlist-style-typelist-style-imageと似たような働きをしますが、 リストタグとは違い、「リスト以外で使うことが出来る」「文末に記号を表示することができる」と言った利点があります。
また、リストタグと同様「画像を使用することも可能」です。

HTML

CSS

まとめ

以上、4回に渡って「CSSの小技」をお送りしましたが、
日常ホームページ作成を行っていて「ここどうしたら上手に出来るだろう」「もっとシンプルな方法無いかな」と言った、 私や同業者の方の「小さな悩み」を少しでも解決出来るような備忘録として活用できればと思います。
ホームページ作成の「小さな悩み」を解決する小技はまだまだ無数にあります。
また次の機会に少しずつ紹介できればと思います。

カレンダー

      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)