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

ホーム
BLOG
ソリューション
ブログなどの投稿記事で実際にWEBデザイナーがよく使用す…

ソリューション
2020.07.23

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

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

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

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

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

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

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

CSSやWordpressの記事はこちら

ブログ投稿でよく使うCSS

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

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

ノーマルなリンク

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

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

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

基本的な書き方

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

1.CSSだけ記述したファイルを読み込む: htmlの<head>〜</head>内に下記のように記述してファイルを読み込みます
<link rel=”stylesheet” type=”text/css” href=ファイル名.css”>
2.HTML内に一括して記述する: CSSを設定するHTMLファイル内に下記の記述をし、その中にcssを書き込みます
またコメント（<!–〜–>）で囲っているのはstyleタグがサポートされていない古いブラウザなどそのまま文字列として表示されるのを防止するためですが、昨今ほとんどサポートされているため無くても良いかと思いますが、念のため記述しています。
<style type=”text/css”><!–
〜
–></style>
3.直接HTMLタグに記述する: 例えば太字にしたタグの一部を赤文字にしたい場合など、下記のように該当するHTMタグにstyle=””で直接CSSを設定することができます。
<b style=”color:#FF0000;”>〜</b>

また、上記　１、２の場合は、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での色指定は、下記のような設定方法があります。

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

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

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

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

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

色名で表す場合の参照

16進数で表す場合の参照

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

文字装飾など

文字色を変える: color:指定の色;
<p style=”color:#FF0000;”>赤文字</p>
.text-red{color:red;}
文字を太くする: font-weight:bold;
<p style=”font-weight:bold;”>太文字</p>
.text-bold{font-weight:bold;}
サイズを変える: font-size:指定の値と単位（px、emなど）
<p style=”font-size:15px;”>15pxの文字</p>
.text-15px{font-size:15px;}
使用するフォントを変える: font-family:指定のフォント名;
<p style=”font-family:”ＭＳ明朝”,serif;”>MS 明朝で表示。ユーザーの閲覧環境に指定フォントがない場合は、表示できる明朝系のフォントを使用する</p>
.text-serif{font-family:”ＭＳ明朝”,serif;}
行間をあける・つめる（詰める場合はマイナスを指定）: line-height:指定の値と単位（px、emなど）;
<p style=”line-height:1em;”>文字と次の行の文字の間を1文字分あける</p>
.text-lh1em{line-height:1em;}
文字間をあける・つめる（詰める場合はマイナスを指定）: letter-spacing:指定の値と単位（px、emなど）;
<p style=”letter-spacing:-2px;”>文字と文字の間を2pxつめる</p>
.text-ls2px{etter-spacing:-2px;}

画像や背景など

画像の最大幅を指定し、はみ出ないようにする( 高さもそれに合わせて自動調整）: max-width:100%; max-height:auto;
<img src=”画像URL” style=”max-width:100%; max-height:auto;”>
img{max-width:100%; max-height:auto;} /* .や#がないものはHTMLタグ全体を指定しています */
画像の幅を指定する( 高さもそれに合わせて自動調整）: width:指定の値と単位（px、%、vwなど）; height:auto;
<img src=”画像URL” style=”width:60%; height:auto;”>
img.width60{width:60%; height:auto;}
画像に枠線をつける: border:線の種類色太さ数値（pxなど単位も）;
<img src=”画像URL” style=”border:solid 2px #000;”>
.content-solidborder{border:solid 2px #000;}
画像にドロップシャドウをつける: box-shadow:水平方向の位置垂直方向の位置ぼかしサイズ色（RGBの0〜255の値と透過を指定）;
<img src=”画像URL” style=”box-shadow:2px 2px 5px rgba(0,0,0,0.3);”>
.content-shadow{box-shadow:2px 2px 5px rgba(0,0,0,0.3);}

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

要素に背景色をつける: background-color:色指定;
<p style=”background-color:#efefef;”>明るいグレーの背景色がつきます</p>
.box-background-lightgray{background-color:#efefef;}
枠線とコンテンツの間に余白を付ける: border:線の種類色太さ数値（pxなど単位も）;
padding:指定の数値（pxなど単位も）; /* 値が1つの場合上下左右一括指定・2つの場合上下左右の指定・3つの場合上左右下・4つの場合　上右下左の設定となります */
<p style=”border:solid 2px #000; padding:1em 1em;”>黒枠線と要素の間に上下左右1文字分の余白を付ける</p>
.box-border-black{border:solid 2px #000; padding:1em;}
ブロック要素の下に余白を設ける: margin:指定の数値（pxなど単位も）; /* 値が1つの場合上下左右一括指定・2つの場合上下左右の指定・3つの場合上左右下・4つの場合　上右下左の設定となります */
<div style=”margin:0 auto 3em;”>上余白なし・左右中央揃え（auto）・下に3行分の余白を設けたブロック要素です。</div>
.box-margin-bottom3em{margin:0 auto 3em; /* ブロック要素以外に設定する場合は display:block;でその要素をブロック要素にするCSSを追記します */}
要素を横並びにする: display:flex;
<div style=”display:flex;”><p>横並び要素1</p><p>横並び要素2</p></div>
.box-flexwrap{display:flex;}

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

CSS Flexboxのチートシート

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

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

CSSのリファレンス

CSS3のリファレンス