WordPressのカスタマイズ力をつける！【第二回】基礎的なプロパティを変更する【CSS入門】

カスタマイズするためには避けて通れない
基礎的なCSSのプロパティ、要素と値についてできるだけわかりやすく解説していきたいと思います。
今回は、見出しをカスタマイズする際に使用するであろうプロパティについて

前回：WordPressのカスタマイズ力をつける！【第一回】Firefox内蔵開発ツールを使ってCSSを編集する

目次

color

文字の色を指定する
当サイトの記事内、大見出し（h2）の場合は次のように指定しています。

CSS

  1. .post h2 {
  2. …
  3. color: #fff;
  4. }

「#fff」が色を指定するための「カラーコード」
指定する値はカラーコード以外にも「カラーネーム」で指定することもできます。
#fff は白をあらわしています。

font-size

文字のサイズを指定します。

CSS

  1. .post h2 {
  2. …
  3. font-size: 24px;
  4. font-size: 2.4rem;
  5. …
  6. }

文字サイズを指定するときに使う単位は多数ありますが基本的には
「px、em、rem、%」の4つを理解すれば十分です。

px（ピクセル）

一昔前はもっとも一般的な記述でしたがスマホの普及と、レスポンシブデザインの台頭によって、最近では古いブラウザ用に記述しておく為の単位と化しています。
ピクセルで指定した文字（フォント）はほかの要素に影響されません。

%

親要素を基準に計算したサイズ
なにも指定されていない場合は100%=16px

em

親要素を基準に計算したサイズ
1em=親要素の100%

rem

root(html)を基準に計算したサイズ
レスポンシブデザインを採用している場合はぜひこれを使いたい
root(html)の指定値を変更すればremで指定したサイズも併せて変わってくれるので便利

レスポンスデザインでのよく見る指定方法

CSS
  1. html {
  2. font-size: 62.5%;
  3. }
  4. body {
  5. font-size: 1.6rem;
  6. }

htmlの指定サイズを16pxの62.5%にすることで10pxとする
1.6remは16pxとなり、直感的にサイズを指定でき、
以降の指定を基本的にremで行うことで、全体の変更も簡単にできる
WordPressの先進的なテーマでも、よく使用されています。

background

背景の色や画像を指定します。

CSS

  1. .post h2 {
  2. …
  3. background-color: #3f3f3f;
  4. …
  5. }
  • background
  • 背景に関する指定をまとめて行う
  • background-color
  • 背景色を指定する
  • background-image
  • 背景画像（URL）を指定する
  • background-position
  • 背景画像の位置を指定する
  • background-repeat
  • 背景画像のリピートの仕方を指定する
  • background-attachment
  • 背景画像の固定・移動を指定する
  • background-size
  • 背景画像のサイズを指定する
  • background-clip
  • 背景の適用範囲を指定する
  • background-origin
  • 背景の基準位置を指定する

background-sizeは↓も参考にどうぞ

背景画像をレスポンシブに対応させる、縦横比を維持して領域内に納めたり領域を埋めたりする

border

領域（ボックス）の境界線（以下ボーダー）の色や太さを指定します。

CSS

  1. .post h2 {
  2. border-left: 8px solid #2e9afe;
  3. …
  4. }

まとめて指定したり、要素ごとに別々に指定することができます。

  • border
  • ボーダーの色、スタイル、太さを指定する
    上下左右をまとめて指定する
  • border-style
  • ボーダーのスタイルを指定する
    none・・・表示なし、他の値が優先
    hidden・・・表示なし、この値が優先
    solid・・・1本の実線
    double・・・2本の実線
    groove・・・立体的に窪んだ線
    ridge・・・立体的に隆起した線
    inset・・・全体が窪んだように見える線
    outset・・・全体が隆起したように見える線
    dashed・・・破線
    dotted・・・点線
  • border-width
  • ボーダーの太さを指定する
    px、em、rem など一般的な単位で指定
  • border-color
  • ボーダーの色を指定する
  • border-top
  • ボックス上部を単体で指定する
  • border-right
  • ボックス右サイドを単体で指定する
  • border-left
  • ボックス左サイドを単体で指定する
  • border-bottom
  • ボックス下部を単体で指定する

border-top-color のように組み合わせることも可能です。

padding

領域（ボックス）内の余白（パディング）を指定します。

CSS

  1. .post h2 {
  2. …
  3. padding: 8px 20px;
  4. …
  5. }

padding-top(left、right、bottom)のように個別に指定することもできます。
一般的な単位で指定
値を一つだけ指定した場合は場合は4辺
2つ指定なら、1つ目が上下、2つ目が左右
3つの場合は、上、左右、下
4つだと、上、右、下、左
の順で指定します。

margin

領域（ボックス）の外側の余白（マージン）を指定します。

CSS

  1. .post h2 {
  2. …
  3. margin-top: 35px;
  4. margin-bottom: 30px;
  5. }

margin-top(left、right、bottom)のように個別に指定することもできます。
一般的な単位で指定
padding と同じように上下左右を指定できます。

まとめ

ここまでの要素を個別に編集することでオリジナル性の高い見た目にすることができます。
色々試して見て、自分のサイト、イメージに合うように編集して見てください。
ではでは〜

CSS, WordPressCSS3, HTML5, WordPress, コーディング, レスポンシブデザイン

Posted by アツシオクムラ