ワンポイントアドバイス！

画像文字ではなくテキスト文字にするとSEO効果UP！

CSSの記述【文字】

テキスト
color文字色（前景色）を指定する
opacity要素の透明度を指定する
text-alignブロックコンテナ内の行の揃え位置・均等割付を指定する
text-decorationテキストの線・色・スタイルをまとめて指定する
text-shadowテキストに影をつける
color
記述例値意味
color:#666666;
color:rgba(0,0,255,0.5);		「#000000」16進法の文字列
カラーネーム
rgbaの記述等		文字色の指定
opacity
記述例値意味
opacity:0.7;0.0（完全に透明）
～1.0（完全に不透明）の範囲で指定
（初期値は1）		要素の透明度を指定
text-align
記述例値意味
text-align:center;left
right
center		ブロックコンテナ内の行の揃え位置
text-decoration
記述例値意味
text-decoration:none;none（無し）
underline（下線）		テキスト傍線のつけ方
text-shadow
記述例値意味
text-shadow: 5px 5px 2px #333333;初期値は「none」スペース区切りで「水平方向の距離」
「垂直方向の距離」
「影のぼかし半径」
「影の色」を指定
「,」区切りで複数可		テキストに影をつける
フォント
font-familyフォントの種類
font-sizeフォントサイズ
font-weight文字列の太さ
font-style文字列の斜体
line-height行間隔
font

font-style
font-weight
font-size
line-height
font-family
フォントのプロパティを一括で指定

  • ※font-sizeとfont-familyの値は省略できない
  • ※font-styleとfont-weightの値の順番は入れ替わっても良い
  • ※line-heightの値の前には「/（スラッシュ）」を入れる
white-spaceソース中のホワイトスペース・改行の表示方法
font-family
記述例値意味
font-family: "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;		フォント名で指定
キーワードで指定		フォントの種類を指定
font-size
記述例値意味
font-size: 80%;数値で指定
％で指定
キーワードで指定		フォントのサイズを指定
font-weight
記述例値意味
font-weight:bold;数値で指定
「normal」標準の太さ
「bold」一般的な太字の太さ
※｢bold｣のみで事足りることが多い		フォントの太さを指定
font-style
記述例値意味
font-style:italic;normal
italic
oblique
※多くの場合イタリック体（italic）と斜体（oblique）のブラウザ上の表示は同じ		フォントのスタイルを指定
line-height
記述例値意味
line-height:1.6;normal
数値にpxやemやexなどの単位
単位をつけずに数値のみを指定
％値で指定		行の高さを指定
font
記述例値意味
font:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",sans-serif 80% bold italic/1.6;
  • ※font-sizeとfont-familyの値は省略できない
  • ※font-styleとfont-weightの値の順番は入れ替わっても良い
  • ※line-heightの値の前には「/（スラッシュ）」を入れる
フォントのプロパティを一括で指定
white-space
記述例値意味
white-space:pre;「pre」そのまま表示
「nowrap」自動改行しない		改行の表示方法を指定