トップページ > サイト作成 > スタイルシート > 文字の設定
文字の設定
文字色の指定 color
文字色を設定することができます。
color : Webカラー
Webカラーには"#FF0000"や"red"といった指定をします。
フォントの形状 font-style
フォントの形状を設定することができます。
font-style: 書体
書体には
- normal ： 標準（指定しない場合はこの指定となります）
- italic ： イタリック
- oblique： 斜体
で指定します。
リンクの下線 text-decoration
リンクの下線を表示・非表示することができます。
text-decoration: 設定
設定には"none"でリンクの下線を消す場合にのみ指定します。
フォントの太さ font-weight
フォントの太さを設定することができます。
font-weight: サイズ
サイズには、
- normal ： 標準（指定しない場合はこの指定となります）
- lighter ： 一段階細い
- bold ： 太い（数字指定700と同等）
- bolder ： 一段階太い
- 100～900までの数値 ： 任意指定
で指定します。
フォントの装飾 text-decoration
フォントに装飾を設定することができます。
text-decoration: 装飾
装飾には、
- none ： 標準（指定しない場合はこの指定となります）
- underline ： 下線
- overline ： 上線
- line-through ： 取り消し線
で指定します。
フォントサイズ font-size
フォントのサイズを設定することができます。
font-size: サイズ
サイズには、
- medium ： 標準（指定しない場合はこの指定となります）
- xx-small： 小2
- x-small ： 小1
- small ： 小
- medium ： 標準
- large ： 大
- x-large ： 大1
- xx-large： 大2
- smaller ： 一段階小さい
- larger ： 一段階大きい
- 数値pt ： ptでの指定
- 数値px ： pxでの指定
- 数値% ： %での指定
で指定します。
文字の変換 text-transform
文字を大文字・小文字といった変換をすることができます。
text-transform: 変換
変換には、
- none ： 標準（指定しない場合はこの指定となります）
- capitalize： 先頭文字のみ大文字
- uppercase ： 大文字
- lowercase ： 小文字
で指定します。
フォントの種類 font-family
フォントを指定することができます。
しかし、閲覧者の端末にフォントがない場合があるので注意が必要です。
font-family: フォント
フォントには、
- フォント名 ： "ＭＳ Ｐゴシック"、"Osaka"など
- sans-serif ： ゴシック系フォント（ＭＳ Ｐゴシック、Arialなど）
- serif ： 明朝系フォント（ＭＳ Ｐ明朝、Times New Romanなど）
- cursive ： 草書体系フォント（Caflisch Scriptなど）
- fantasy ： 装飾フォント（Critterなど）
- monospace ： 等幅フォント（ＭＳ ゴシックなど
で指定します。
ルビの揃え ruby-align
"ruby"タグを指定している場合、ルビの横揃えの設定をすることができます。
ruby-align : ルビ
ルビには、
- left ： 左揃え
- center： 中央揃え
- right ： 右揃え
- distribute-letter ： 均等
- distribute-space ： 前後に空白＋均等
- line-edge ： テキストの状態による
- auto ： 自動
で指定します。
ルビの位置 ruby-position
"ruby"タグを指定している場合、ルビの位置を設定することができます。
ruby-position : ルビ
ルビには、
- above ： 文字の上
- inline ： 文字の後ろ
で指定します。
スモールキャップ font-variant
大文字の字体をそのまま小さくすることができます。
font-variant: サイズ
サイズには、
- normal ： 標準（指定しない場合はこの指定となります）
- small-caps： 小型英大文字
で指定します。
関連記事
ウェブサイト作成
スタイルシート（CSS）はウェブサイトの装飾やレイアウトに利用されるプログラムの一種で、CSS の基本的な使い方と実際に指定するプロパティの一覧を紹介する。
作業効率アップとアクセス数アップにつながるウェブサイト作成のソフトウェア
ウェブサイト作成
ウェブサイト（ホームページ）は専用のソフトウェアを利用しなくても作成することができるが、作成ソフトを利用することで作成に必要な時間が大幅に短縮されるとともに検索サイトからのアクセス数アップにもつながる点について紹介する。
検索結果で自身のサイトが上位に表示されやすくする SEO の方法
ウェブサイト作成
インターネット上に公開した自身のウェブサイトやブログへアクセスしてもらうためには Google や bing など検索サイトから誘導する手段があり、検索結果の上位に表示されるとアクセス数が増えるため、その上位に表示させるための施策（SEO）の方法について紹介する。
スマホサイトで用いられるハンバーガーメニューの作成方法とサンプル
ウェブサイト作成
スマートフォンやタブレットなど小型の携帯端末向けのウェブサイトは画面を縦向きで利用されることが多いため、サイトのデザインと操作性も縦方向で利用されることを想定して横方向（水平方向）に画像を並べたり配置することを避けるが、縦にスクロールせずとも横方向に展開するハンバーガーメニューの作成方法について紹介する。
スマホやタブレット用ウェブサイトの横幅の比較と CSS でのレイアウト切り替え方法
ウェブサイト作成
ウェブサイトやアプリを作成する際にパソコンだけでなくスマートフォンやタブレットを利用する人ではどのように画面に表示されるか配慮する必要があり、利用される端末ごとにディスプレイのサイズが異なるため各端末の横幅の比較と CSS で端末ごとにレイアウトを切り替える方法について紹介する。
