ブログカスタマイズでよく使うCSS字引き

ブログカスタマイズでよく使うCSSをまとめました。

非常に簡単な字引きとなっていますので、ちょっとど忘れしたときや綴りがわからなくなったときなどにお使いください。

また、項目のすべてをコピペしても意味をなさないので、必要な部分のみ切り出してご使用ください。

セレクタ{
  color: #○○○;  /*カラーコードの色*/
  color: rgba(244,247,247,0.8);  /*RGB＋透明度の色*/
  color: red;  /*定義されているウェブカラー名*/
}

↑
全てをコピーしても指定がかぶりまくっているのでよくわからないことに……。

セレクタ{
  color: #○○○;  /*カラーコードの色*/
}

↑
一行のみ取り出して使う。

セレクタ……タグ、id、class名などの指定
#○○○……カラーコードなど色の指定

セレクタの部分には、３種類のセレクタのうちいずれかを入力します。

プロパティにはスタイルの種類、値にはスタイルの具体的な設定を入力します。

色に関するCSS
フォントに関するCSS
中央揃えに関するCSS
背景に関するCSS
要素の形に関するCSS
要素の余白に関するCSS
要素の移動に関するCSS
枠線（ボーダー）に関するCSS
1. 枠線（ボーダー）の種類

色に関するCSS

色に関するCSSは以下のとおりです。

セレクタ{
  color: #○○○;  /*カラーコードの色*/
  color: rgba(244,247,247,0.8);  /*RGB＋透明度の色*/
  color: red;  /*定義されているウェブカラー名*/
}

RGBA値で色を定義するメリットは、透明度を指定できるところです。背景や要素を半透明にして透けさせられます。

カラーコード

「カラーコード」の記事一覧です。

16進数カラーコードからRGBA値への変換（またはその逆）は以下のサイトでできます。

TECH-UNLIMiTED：カラーコード変換ツール

定義されているウェブカラー名は、下記のサイトで調べられます。

原色大辞典

フォントに関するCSS

フォントに関するCSSは以下のとおりです。

セレクタ{
  font-family: フォント名;  /*フォントの種類*/
  color: #○○○;  /*フォントの色*/
  font-weight: 500;  /*フォントの太さ*/
  font-weight: bold;  /*フォントを太文字にする*/
  font-weight: normal;  /*フォントを通常の太さにする*/
  font-size: 15px;  /*フォントのサイズ*/
}

フォントの指定にはシステムフォントとWebフォントがあります。

システムフォント……すぐに使える。軽い。OSによって表示が異なることがある。
Webフォント……CSSでフォントを読み込むのでちょっと重くなる。どのOSでも同じ表示になる。

【Cocoon】Google Fontsを使って文字をおしゃれにする方法

Google Fontsを使って一部の文字のフォントを変更できます。Google Fonts とは、無料で使えるオープンソースのフォントです。ダウンロードの必要がなく、コードを追加するだけで使用できます。

中央揃えに関するCSS

中央揃えに関するCSSは以下のとおりです。

セレクタ{ 
  text-align: center;  /*テキストを中央揃えにする*/
}

テキストを中央揃えにしたい機会が多いので多用します。

また、広告を中央表示にしたい場合は、CSSではなくHTMLを使用します。

<div style="text-align:center;">
間に広告タグを入れる
</div>

背景に関するCSS

背景に関するCSSは以下のとおりです。

セレクタ{
  background-color: #○○○;　/*背景の色*/
  background-color: transparent;　/*背景を透明にする*/
}

要素の形に関するCSS

要素の形に関するCSSは以下のとおりです。

セレクタ{
  border-radius: 20px;  /*要素の角を丸くする*/
  border-radius: 50%;  /*要素の50%（半分）の高さや幅を丸くする*/
  transform: rotate(-8deg);  /*要素を反時計回りに8度回転させる*/
  display: none;  /*要素を消す*/
  box-shadow: 5px #○○○;  /*要素に#○○○色の5pxの影をつける*/
}

以下のようなときに使用します。

ボタンを丸くしたい
カラムの角を丸くしたり尖らせたりしたい
回転させたい
特定のページのみで要素を見えなくしたい

要素の余白に関するCSS

要素の余白に関するCSSは以下のとおりです。

セレクタ{
  margin: 10px;  /*要素の周囲のmarginを10pxにする*/
  margin-right: 20px;  /*要素の右のmarginを20pxにする*/
  margin: 1px 2px 3px 4px;  /*要素のmarginを上1px、右2px、下3px、左4pxにする*/
  margin: 5px 6px;  /*要素のmarginを上下5px、左右6pxにする*/
}

margin-top
margin-bottom
margin-left
margin-right

margin上下左右の指定も可能です。

セレクタ{
  padding: 10px;  /*要素の周囲のpaddingを10pxにする*/
  padding-top: 20px;  /*要素の上のpaddingを20pxにする*/
}

padding-top
padding-bottom
padding-left
padding-right

padding上下左右の指定も可能です。

要素の移動に関するCSS

要素の移動に関するCSSは以下のとおりです。

セレクタ{
  top: 5px;
  left: -8px;
  bottom: 10px;
  right: 0;
}

要素の位置調整に使用します。

枠線（ボーダー）に関するCSS

枠線（ボーダー）に関するCSSは以下のとおりです。

セレクタ{
  border-top: 1px dotted #○○○;  /*上部に1pxのドットの線を引く*/
  border-bottom: 5px dashed #○○○;  /*下部に5pxの破線を引く*/
  border: 2px double #○○○;  /*周囲に2pxの二重線を引く*/
  border-color: #a8bcc8;  /*枠線の色を変える*/
}

ボックスの周囲、見出しのデザインなどで使用します。