CSS3 – font-family

概要

使用する書体を指定する。

  • 特定のフォント名ではない総称がある
  • フォント名は複数指定できる
  • 複数指定された場合、前の方からサーチし、クライアント側にフォントがあればそれを使用
  • 指定したフォントが存在しない場合、クライアント側のデフォルトフォントが使われる

書式

font-family: [フォント1] , [フォント2] , ...

  • フォント名は引用符~ダブルクォート(")かシングルクォート(')で囲む
  • ただし総称フォントを指定する場合は引用符で囲わない

フォント名

種類

sans-serif ゴシック体などセリフがないフォント
serif ローマン体・明朝体などセリフがあるフォント
monospace 等幅のフォント
cursive 筆記体・草書体に属するフォント
fantasy 装飾的なフォント

表示例

sans-serifはゴシック系のフォントです。

serifは明朝系のフォントです

monospaceは等幅のフォントです。

cursiveは筆記体・草書体のフォントです。

fantasyは装飾的なフォントです。

※総称フォントは引用符で囲いません

複数指定

動作

フォントを複数指定することができる。各フォントは','(カンマ)で区切り、スペースの有無は任意

クライアントは前の方から順番にサーチし、表示対象に使用可能なフォントであればそれを使い、そうでなければ次のフォントを探す。

最終的に利用可能なフォントがなければクライアント側のデフォルトフォントが使われる。

表示例

フォントの複数指定~’YU Gothic UI’, sans-serif

フォントの複数指定~’存在しないゴシックフォント’, sans-serif

フォントの複数指定~’存在しない明朝フォント’, serif

 

 

Tips – 親要素全面に子要素を張り付けて縦センタリング

概要

たとえば、アンカー要素を親のブロック要素に張り付けたり、ブロック化したリストアイテムに張り付けるような場合を想定。

親要素全面への貼り付けは、ブロック要素かインラインブロック要素がよさそうなので、それらで縦センタリングを試してみる。

試行結果

概要

以下の試行では、ブロックの親要素に対してブロック、インラインブロックの子要素を前面に貼り付けて、そのテキストを横方向と縦方向にセンタリングしている。

考え方は以下の通り。

  • 親要素で
    • widthとheightを指定
    • heightと同じ値でline-heightを指定
  • 子要素で
    • widthとheightを100%として親要素の全面に貼り付け
    • text-align: center;で水平方向にセンタリング
    • vertical-align: middle;で垂直方向にセンタリング

親要素でline-heightを設定する意味は以下の通り。

  • デフォルトでは、親要素がブロックでもその中の行については行の高さが設定されている
  • 子要素が親要素のwidthとheightに合わせて展開しても、その中の行の高さは追随して変わらない
  • 親要素の行の高さを要素の高さと同じにすることで、子要素の行の高さも広がり、その中で縦センタリングされるようになる。

なお、子要素でline-height: 100%;としてもうまくいかない。これは、line-heightプロパティーが継承する値が親要素の行高さであって、親要素自体の高さではないためと思われる。

HTMLファイル

CSSファイル

結果

Chromeで表示させた結果、block、inline-blockとも縦横両方向でセンタリングされている。

改良

これまでの方法では、親要素でline-heightを設定するために、親要素の高さと同じ値を2度CSSに書かなければならなかった。これはメンテナンス上煩雑で、ミスも生じやすい。

カスタムプロパティーを使うと、変数に値を代入して使うように、同じ値を再利用できる。

以下は、上で使ったのCSSのparent_blockの部分で、heightとline-heightに同じカスタムプロパティーを参照させている。

 

CSS3 – カスタムプロパティー

概要

CSSを書くとき、サイズ指定や色指定で同じ値を何度も打ち直すことがある。このように同じ値を常にコードとして打ち込むのは手間・ミスの素であり、メンテナンス上もよろしくない。

こういうとき、カスタムプロパティーを使うと、値を変数のように定義しておいて、何度も再利用できる。

書式

--[カスタムプロパティー名]: [値];

再利用するための値で、数値、色コードなど、プロパティーの値で指定可能なもの。

動作確認

以下のことを確認している。

  • CSS内全域で共通のカスタムプロパティーを定義
    • –common-bg-color
  • parentクラスでカスタムプロパティーを定義
    • –face-color
  • –common-bg-colorはbody要素、childクラスの要素のいずれにも反映
  • –face-colorはparentクラスの要素と、その子であるchildクラスの要素には反映されるが、parentクラスの要素から独立したchildクラスの要素には反映されない

HTMLファイル

CSSファイル

 

Tips – 親要素全面に子要素を貼り付ける

概要

たとえば以下のような場合を想定

  • ブロック要素にアンカー要素をいっぱいに広げてバナーのように使いたい
  • ブロック化したリストアイテムの中にアンカー要素を広げて張り付けて、領域のどこをクリックしても反応するようにしたい

結論としては、貼り付けたい要素をブロック要素かインラインブロック要素とするのがよさそう。

以下、親要素をブロック要素とする。

試行結果

概要

以下の試行結果は、ブロックの親要素に対して、子要素をブロック、インライン、インラインブロック、テーブル要素と様々なタイプにして、親要素全面への貼り付けを試してみたもの。

考え方は共通。

  • 親要素でwidth/heightを指定
  • 子要素でwidth and/or heightを100%で設定

HTMLファイル

CSSファイル

結果

Chromeで表示させた結果。

  • inline要素はpxなどの固定値でもwidth/heightは設定できない
  • table-cell要素はpxなどの固定値ならwidth/heightは変化するが、%では親要素に追随しなかった

まとめ

子要素がblock要素

  • margin: 0;、height: 100%;を指定して全面貼り付け可能
  • widthはデフォルトで100%になっていることが多いが、念のために指定した方がいいか

子要素がinline要素

  • widthやheightが指定できないので、全面貼り付けは困難

子要素がinline-block要素

  • margin: 0;、width: 100%、height: 100%;を指定して全面貼り付け可能
  • widthとheightがデフォルトではインラインと同じ挙動だが、設定することで固定できる

子要素がtable-cell要素

  • widthやheightの%が効かなさそうなので、全面貼り付けは困難

CSS3 – list-style-type~マーカー

概要

ul、olの様々なマーカーを設定する。

書式

list-style-type: [マーカースタイル];

none
  • list
disc
  • list
circle
  • list
square
  • list
decimal
  • list
decimal-leading-zero
  • list
lower-roman
  • list
upper-roman;
  • list
lower-latin
  • list
upper-latin
  • list
lower-alpha
  • list
upper-alpha
  • list
lower-greek
  • list
cjk-ideographic
  • list
hiragana
  • list
katakana
  • list
hiragana-iroha
  • list
katakana-iroha
  • list

動作確認

ul

list-style-type: none;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: disc;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: circle;

  • ガンダム
  • ガンキャノン
  • ガンタンク

list-style-type: square;

  • ガンダム
  • ガンキャノン
  • ガンタンク

ol

list-style-type: decimal;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: decimal-leading-zero;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-roman;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-roman;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-latin;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-latin;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-alpha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: upper-alpha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: lower-greek;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: cjk-ideographic;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: hiragana;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: katakana;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: hiragana-iroha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

list-style-type: katakana-iroha;

  1. ガンダム
  2. ガンキャノン
  3. ガンタンク

CSS3 – marginとpadding

概要

marginでボックス要素の外側の余白、paddingでボックス要素の内側の余白を設定する。

以下の例は、p要素にmargin=40pxとpadding=20pxを設定していて、親のbody要素からp要素の外側まで40px、p要素の外側からその内容まで20pxの余白がとられている。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。上手でないどころではなく実は仲間の楽手のなかではいちばん下手でしたから、いつでも楽長にいじめられるのでした。

書式

margin、paddingはボックス要素の外と内に対する余白で、上下左右の余白量に対する指定の仕方は双方に共通する。

1つのmargin/paddingでまとめて指定

margin/padding [上下左右]
上下左右全ての余白を同じ値で設定。
margin/padding [上下] [左右]
上と下、左と右に共通する余白を指定。
margin/padding [上] [左右] [下]
上、左右共通、下の余白を設定
margin/padding [上] [右] [下] [左]
上、右、下、左の余白をそれぞれ設定。上から時計回り。

4つの辺のいずれかの余白を個別に設定

margin/paddingに以下を続けて、それぞれの余白を個別に設定。

  • -top 上
  • -bottom 下
  • -left 左
  • -right 右

たとえばpadding-left: 20px;は左内側の余白を20pxで指定。