ブログなどの投稿記事で実際にWEBデザイナーがよく使用する CSS一覧

WEB上のコンテンツの多くはHTMLとCSSで記述されています。

最近はWordpressなどのCMSを利用して、HTML/CSSの記述をしなくとも、コンテンツを作成できるようになってきています。

ですが、弊社で実施しているセミナー参加者の方の声でよく

• WordPressの投稿画面記事を作れるけれど、なかなか思い通りの見た目にできない
• ちょっと文字のサイズを変えたいけど、どう設定したら良いかわからない
• WEBを参考に記述をかえてみたけど、表示がおかしくなった。けれど、基本的なHTMLがわからないので修正できない

などHTML/CSSの部分のご質問をいただきます。

前回はHTML部分についてご紹介しました。
今回は、ブログの投稿等でよく利用する範囲のCSSをご紹介します。

ブログ投稿でよく使うCSS

CSS（Cascading Style Sheets）とは、前述したHTMLでかかれた文章を装飾するものです。

例えば、文中などで違うページの紹介リンクをつけると通常下記のようになります。

ノーマルなリンク

文章を読んでいけばリンクということがわかるのですが、
流し読みしている場合は、見逃してしまいそうです…。
これをCSSで装飾すると下記のようになります。

CSSで装飾したリンク（クリックしてもどこにも飛ばない設定です）

こうすると、ノーマルなテキストリンクより、目に止まりやすくなるかと思います。
このように、目立たせたり、デザインに統一感をもたせたりすることができます。

基本的な書き方

CSSは、大きく分けて3つの記述方法があります。

また、上記　１、２の場合は、HTMLタグに直接CSSを当てるような記述や、HTMLタグの任意の場所のみにCSSを当てたい場合は、クラスやIDなどを指定する必要があります。

クラスって？

例えば、特定の段落タグだけ赤背景にしたい場合、HTMLの段落タグに下記のように任意のクラスを設定します。

HTMLの記述（class="クラス名"をHTMLタグに追記します）

<p class="background-red">赤背景・白太文字</p>

CSSの記述（ .クラス名 でクラスを指定します）

<style type="text/css">
<!--
　.background-red{
　　background-color:#FF0000;
　　color:#FFF;
　　font-weight:bold;
　}
-->
</style>

こうすることで、background-redのクラスを持つ、HTMLタグだけにCSSを適用させることができます。

また、クラス名は自由に設定できるため、今回はわかりやすく設定内容をそのまま英語表記していますが、.bg01など短い名前や番号管理などご自身がわかりやすいように設定可能です。

※注意※
冒頭が数字のクラス名（.01bgなど）の場合、正常に指定したCSSが読み込まれない場合がありますので、避けるようにしてください。

IDって？

※注意※
クラス同様、冒頭が数字のID名（#01bgなど）の場合、正常に指定したCSSが読み込まれない場合がありますので、避けるようにしてください。

クラスとIDの違い

下記サンプルのように、IDは基本的に同じページ内につき1回の指定、クラスは複数回指定することができるとされています。

<style type="text/css">
<!-- スタイル部分の表記サンプル -->
<!--
  #only_onetime{
   border:solid 1px #000;
  }

  .color_red{
   color:#FF0000;
  }
-->
</style>

<!-- HTML部分の表記サンプル -->
<div id="only_onetime">
 <p>文章1段落目　ノーマル</p>
 <p class="color_red">文章2段落目　赤文字</p>
 <p class="color_red">文章3段落目　赤文字</p>
</div>

<div>
 <p>文章4段落目　ノーマル</p>
 <p class="color_red">文章5段落目　赤文字</p>
</div>

実際は、同じIDが1ページ内に複数回出現しても、CSSは適用されますが、正しい記述でなないため、複数回出現するものはクラスを使うようにしましょう。

クラスとIDの優先順位

IDとクラスでそれぞれ文字の色を変更する設定を記述し、一つのHTMLでIDとクラス両方設定した場合、IDが優先されます。
また、同じレベル（クラス同士、ID同士など）の場合は、後から記述されている方が適用されます。（前から順に処理して表示させていくため）

<style type="text/css">
<!--
/* IDで青文字になるように指定 */
#color_blue{color:blue;}

/* 一回青で設定したけど、やっぱりIDは緑にしよう */
#color_blue{color:green;}

/* クラスで赤文字になるように指定 */
.color_red{color:red;}
-->
</style>

<p id="color_blue" class="color_red">IDとクラス両方で文字色指定</p>

↓ 結果 ↓

IDとクラス両方で文字色指定

IDの方の指定が優先され、かつ、後から記述した方が適用され緑文字となりました。
もし、WordpressのテーマなどにCSSを追記してカスタマイズしようとした際、うまく指定が反映されない時は、このような優先順位で狙った通りの表示になっていないこともありますので、ご注意ください。

色の指定について

CSSでの色指定は、下記のような設定方法があります。

1. 英語表記（カラーネーム）で指定する…redやblueなど
2. #のあとに左から赤・緑・青の各値を16進数（0123456789abcdef / 0の値が暗くfが一番明るい）の2桁を利用した数値で指定する…#ff0000など
3. 赤・緑・青の各数値（0〜255）と透過（0〜1）の値で指定する…rgba(255,0,0,0.5)など

1のカラーネームの方はあとから何色を指定したかわかりやすいですが、指定できる色に制限があるほか、閲覧WEBブラウザのバージョン等によっては正しく表示されない場合もあります。

2の16進数の方は、使える色に制限はなく、様々な色を表現できます。
白（#ffffff）や黒（#000000）などすべてが同じ値となる色の場合は、#fffなど省略して記述することも可能です。
また、Wordpressなどのテーマカスタマイズなどでの色指定ができる場所では、カラーピッカーで選択する他、この色指定方法を直接入力できる欄が一緒についているものが多いので、覚えておくと便利かとおもいます。

3も2と同様に、使える色に制限がなく、かつ、透過も指定できるため、画像の影部分の色に指定したりと様々な使い方ができます。

使える色すべてをご紹介することはできませんので、参考に実際の色味とカラーコード名 または 16進数での表記で紹介されているサイトを2つご紹介いたしますのでご参照ください。

ここからよく使うCSSを記載します。
直接HTMLタグに書く場合、クラスやIDの指定内に書く場合の2パターンの書き方で紹介いたします。（クラスやID名、設定数値はサンプルです）

文字装飾など

画像や背景など

ブロックの設定や段組など

上記最後に紹介した要素を横並びにする flexプロパティーは、
並べる要素が表示幅を超えた場合、要素の幅を小さくしてすべて並べる・はみ出る要素で改行するなど、PCやスマートフォンなど様々な閲覧環境に応じてどうするかの設定ができるため、近年よくつかわれています。
また、設定できることが多いため、下記のようなサイトを参考にするとわかりやすいかと思います。

今回ご紹介した以外にも、目的のデザイン・レイアウトにするために、沢山の設定方法があります。

下記によく参照するCSSの記述例を紹介しているサイトURLを設置しましたので、一度ご確認いただくと良いかと思います。