CSSの一覧
文字のデザインを指定する colorとfont-size
CSSで文字の色彩や大きさを指定する場合は color や font-size を使用します。そのほか、line-height では行の間隔、text-align では左詰め、右詰めなどの指定ができます。
「文字」のCSSを指定 colorやfont-size
内側と外側に余白を空ける paddingとmargin
要素の内側に間隔を空ける場合は {padding:0px 0px 0px 0px;}、外側に余白を空ける場合は {margin:0px 0px 0px 0px;}を設定しましょう。
paddingとmarginの違い
背景色や背景画像の指定 background
背景色を色彩コードで指定する際は「background-color」を使用し、画像で指定する際は「background-image」を使用します。また、まとめて一括で指定する際は「background」を使いましょう。
背景の指定をするCSS - background
幅と高さを指定する widthとheight
<div>領域などに幅と高さを指定する際は「width」や「height」を使用します。このwidthとheightは、paddingやborderの値と同時に設定するとサイトが崩れてしまうケースがあります。内側に<div>をもうひとつかませるなどして別々に設定するとよいでしょう。
領域の幅と高さを指定する widthとheight
左寄せや中央寄せをする {text-align:left;}
文字や画像を左寄せや右寄せにするには「text-align」で指定します。一方、width幅を指定したブロック要素をセンタリングする際は「margin:0 auto;」を使いましょう。
左寄せや中央寄せを指定するtext-align
文字の書体を指定する {font-family: sans-serif;}
CSSで文字の書体を指定する際は「font-family」を使用します。フォントは太字やイタリックなどで違いがありますが、それらがセットになったフォントファミリー名で指定します。
「font-family」で文字の書体を指定
外枠を表示する {border:solid 1px #000000;}
上下左右のすべてに外枠を表示する際はborderを指定し、「下の外枠」のみを表示する場合はborder-bottomを指定します。一方、文中で単に「下線」を引く場合は、htmlタグの<u>を使うとよいでしょう。
borderは要素の外枠を指定するCSS
枠線の角を丸くする {border-radius: 10px 10px 10px 10px;}
CSSで枠線の角を丸める際、「border-上下-左右-radius」で左上や右上の角などを指定したのち、「水平方向の半径」と「垂直方向の半径」の二つの値を指定します。単に「border-radius」と書いた場合、４つの角をまとめて丸くすることができます。
border-radiusは角を丸くするCSS
リンクの色彩や下線などの指定
リンクにカーソルを合わせた際の指定は「a:hover」、訪問済みのリンクの色彩などは「a:visited」で指定します。
リンクのCSS -「a:hover」と「a:visited」
font-sizeに合わせた最適なwidth幅
コンテンツ部分のwidthをスタイルシートで指定する際、font-sizeやfont-familyなどに応じてwidth幅を合わせると文章の右端がガタガタにならずに表示されます。font-familyで等幅フォントを指定した状態で、１行の文字数からwidthを計算するとよいでしょう。
font-sizeに合わせた最適なwidth幅
行の高さや行間を指定する {line-height: 150%;}
行と行の間隔を空ける際は「line-height」で指定します。line-heightの値を150%程度に設定して適度に行間を空けるのが一般的です。
行の高さや行間を指定する line-height
リストタグを横並びにする display:inline;
リストタグを横並びにする場合はCSSで「display:inline;」を指定しましょう。リストアイテム間に隙間が生じる場合はhtmlソースで改行せずに記述して回避します。
リストタグを横並びにする display:inline;
タップ可能な範囲を広げる display:block;
スマホでの閲覧時にメニュー部分のリンクをタップしやすくする際、CSSで「display: block;」を指定しておくとタップ可能な範囲が広がります。
タップ可能な範囲を広げる display:block;
サイドバーや画像を回り込ませる float
2カラムなどでサイドバーを右や左に回り込ませるには、CSSに「float」を指定してあとに続く要素を回り込ませます。また、clearを忘れずに指定してfloatを解除しておきましょう。
floatは回り込みのCSS
画像の大きさを最適化する max-width:100%;
スマホ閲覧時に画像がはみ出て表示されてしまう場合、スタイルシートのimgに「max-width:100%;」を指定することで自動で大きさを最適化することができます。合わせて「height:auto;」も設定しておきましょう。
画像の大きさを最適化する max-width:100%;
CSSで記号や文字を表示する 要素:before {content:"記号や文字";}
HTML上に記号や文字などを記述したくない場合、「要素:before」や「要素:after」を使えば、CSSで要素の前後に記号や文字を表示させることができます。
CSSで記号や文字を表示する「:before」と「:after」
WEBフォントを指定する @font-face
WEBフォントを使用する際、「woff」や「woff2」などのフォントファイルをサーバーにアップロードしたのち、CSSに「@font-face」を記載してファイルのURLとフォント名を指定します。
@font-faceでWEBフォントの指定方法
線形グラデーションをかける linear-gradient
要素のbackground:やbackground-image:にlinear-gradient(色,色);を指定することで、CSSで直線的なグラデーションをかけることができます。
linear-gradientで線形グラデーションのかけ方
ボックス要素に影を付ける box-shadow
box-shadowはボックス要素全般に影を付ける際に使用します。水平、垂直、ぼかし、影の広がり、色彩のパラメータに値を設定することで、多彩な陰影を付けることができます。
box-shadowは要素に影を付けるCSS
CSSファイルの作り方
スタイルシートは拡張子「.css」にて、「任意の英数小文字.css」でファイルを作成します。作成したファイルはルートディレクトリに設置しておくとよいでしょう。
スタイルシートの作り方
スタイルシートの書き方
スタイルシートを書く際は、ショートハンドなどを活用して冗長になるのを避け、シンプルで分かりやすく記述していきましょう。
スタイルシートの書き方のポイント
Minify化で圧縮
CSSをMinify（ミニファイ）して圧縮することでサイトの表示を高速化することができます。一般的には半角スペースや改行を削除することでファイル容量を削減することができます。
CSSのMinify化で容量を圧縮
CSSの確認ツール
ホームページのCSSを簡単にチェックする際、ブラウザのChromeで利用できるデベロッパーツールを使用すると便利です。
CSSの確認はChromeデベロッパーツールが便利