CSSの一覧

基礎知識

CSSファイルの作り方や設定方法、実際の書き方についてはこちらをご参照ください。
スタイルシートの作り方と書き方


内側と外側に余白を空ける paddingとmargin

要素の内側に間隔を空ける場合は {padding:0px 0px 0px 0px;}、外側に余白を空ける場合は {margin:0px 0px 0px 0px;}を設定しましょう。
paddingとmarginの違い


文字のデザインを指定するcolorやfont-size

文字の色彩大きさを指定する場合、colorやfont-sizeなどを指定しましょう。ほか、line-heightでの行間やtext-alignによる左詰め、右詰めなどの指定ができます。
「文字」のCSSを指定 colorやfont-size


背景色や背景画像の指定 background

背景色を色彩コードで指定する際は「background-color」を、画像で指定する際は「background-image」で指定します。一方、まとめて一括指定する際は「background」を使いましょう。
背景の指定をするCSS - background


リンクの色彩や下線などの指定

リンクにカーソルを合わせた際の指定は「a:hover」で、訪問済みのリンクの色彩などは「a:visited」で指定します。
リンクのCSS -「a:hover」と「a:visited」


左寄せや中央寄せをする {text-align:left;}

文字や画像を左寄せや右寄せにする場合、text-alignで指定します。一方、width幅を指定したブロック要素をセンタリングする際は「margin:0 auto;」を使いましょう。
左寄せや中央寄せを指定するtext-align


外枠を表示する {border:solid 1px #000000;}

上下左右のすべてに外枠を表示する際はborderを、「下の外枠」のみを指定する場合はborder-bottomを使います。一方、文中で単に「下線」を引く場合は、htmlタグの<u>を使うとよいでしょう。
borderは要素の外枠を指定するCSS


幅と高さを指定する widthとheight

div領域などに幅と高さを指定する際はwidthやheightを使用します。このwidthとheightは、paddingやborderの値と同時に設定すると崩れてしまうケースがあるため、内側にdivをもうひとつかませるなどして別々に設定するとよいでしょう。
領域の幅と高さを指定する widthとheight


font-sizeに合わせた最適なwidth幅

コンテンツ部分のwidthをスタイルシートで指定する際、font-sizeやfont-familyなどに応じてぴったり合わせると文章の右端がガタガタにならずに表示されます。font-familyで等幅フォントを指定した状態で、font-sizeと1行の文字数からwidthを計算するとよいでしょう。
font-sizeに合わせた最適なwidth幅


行の高さや行間を指定する {line-height: 150%;}

行と行の間隔を空ける際はline-heightで指定します。line-heightの値を150%程度に設定して適度に行間を空けるのが一般的です。
行の高さや行間を指定する line-height


リストタグを横並びにする display:inline;

リストタグを横並びにする場合はCSSでdisplay:inline;を指定しましょう。リストアイテム間に隙間が生じる場合は、htmlソースで改行せずに記述して回避します。
リストタグを横並びにする display:inline;


サイドバーや画像を回り込ませる float

画像や2カラムでのサイドバーなどを右や左に回り込ませるには、CSSにfloatを指定してあとに続く要素を回り込ませます。また、clearを忘れずに指定してfloatを解除しておきましょう。
floatは回り込みのCSS


画像の大きさを最適化する max-width:100%;

スマホ閲覧時に画像がはみ出て表示されてしまう場合、スタイルシートのimgに「max-width:100%;」を指定することで自動で大きさを最適化することができます。合わせて「height:auto;」も設定しておきましょう。
画像の大きさを最適化する max-width:100%;


WEBフォントを指定する @font-face

WEBフォントを指定する際は@font-faceを使います。アルファベットと比較すると、日本語フォントは漢字やひらがなどでファイル数が多くなるため、日本ではあまり使われていません。
CSSでWEBフォントを指定する方法