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