これだけは知っておきたいcss
cssとは、Webページのデザイン面を指定するためのもので、スタイルシートです。cssにはバージョンがあり、現在広く使われているものはcss3です。このページでは、知っておくと有益となるように、よく使用されるパターンに絞って、用途別に解説しています。
目次
スタイルシート（css）の記述方法
スタイルシート（css）は、<head></head>タグ内で外部ファイルとして存在するcssファイルのパスを指定したり、そのページ用のスタイルを直接記述します。<body></body>タグ内に記述して、反映させることも出来ますが、ブラウザのレンダリング速度に影響するため、一般的には避けられます。
スタイルシート（css）は複数のページを一括して設定することが多いので、通常は外部ファイルに保存して、各ページで読み込ませるかたちにします。外部ファイルであれば、変更時に一箇所の書き換えで、全ページに反映させることが出来ます。
<head>
<!-- 外部ファイルに記述して読み込む -->
<link rel="stylesheet" href="style.css">
<!-- styleタグ内に記述する -->
<style>
/* ここに記述 */
</style>
</head>
外部ファイルに記述する場合は、ファイルの先頭で文字コードを指定できます。
@charset "UTF-8";//文字コードを指定
設定対象の特定方法（セレクタ）
cssでは、まずHTML内のどの要素のスタイルを設定するかを指定します。この指定方法をセレクタと呼びます。セレクタにはさまざまな種類があります。シンプルな方法ほど速度面でのパフォーマンスに優れるので、HTMLの設計時点で考慮に入れる必要があります。
/* よく使われるcssセレクタ {}内に設定を記述 */
/* id属性 */
#id1 {}
/* class属性 */
.class1 {}
/* タグ名 */
body {}
/* 複数を指定する */
body,table,ul,h1 {}
/* 直下の階層の子要素 */
ul>li {}
/* すべての子要素 */
div span {}
/* カーソルが乗っている時 */
a:hover {}
/* フォーカスされている時 */
input:focus {}
/* 最初の子要素 */
tbody:first-child {}
/* 最後の子要素 */
tbody:last-child {}
/* 奇数番目の要素 */
tr:nth-child(odd) {}
/* 偶数番目の要素 */
tr:nth-child(even) {}
/* チェックされている場合 */
input:checked {}
/* 属性の値で指定 */
input[type="button"] {}
スタイルの設定は、プロパティに対して値を設定します。下記ではwidthプロパティに100pxを設定しています。
/* プロパティの設定 */
div {
width: 100px;
}
要素のサイズを指定したい時
要素を指定の縦横サイズで表示したい時の指定方法です。要素には、上下左右がありますが、設定値の数1〜4で指定される箇所が変わってきます。また -top、-right、-bottom、-left のように個別で設定することも出来ます。
/* 要素の全体サイズを指定 */
div {
/* 高さ */
height: 400px;
/* 横幅 */
width: 500px;
}
/* 他要素との間隔、余白 */
div {
/* 4つ指定では、上、右、下、左 */
margin: 1px 2px 3px 4px;
/* 3つ指定では、上、左右、下 */
margin: 1px 2px 3px;
/* 2つ指定では、上下、左右 */
margin: 1px 2px;
/* 1つ指定では、上下左右 */
margin: 1px;
}
/* 内部の要素との間隔 */
div {
/* 1つ指定では、上下左右 */
padding: 1px;
/* 個別指定も可能 */
padding-top: 1px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
}
/* paddingをheight、widthに含める */
div {
box-sizing: border-box;
}
/* 縦110px、横110pxになる */
div {
height: 100px;
width: 100px;
padding: 5px;
}
/* 縦100px、横100pxになる */
div {
height: 100px;
width: 100px;
padding: 5px;
box-sizing: border-box;
}
要素の表示状態を変更したい時
要素を一時的に非表示にしたり、見え方を変更する方法です。要素の見え方は、ブロック、インライン、インラインブロックなどがあり、それぞれのタグで初期状態での見え方が決まっていますが、cssで変更が可能です。
ブロック表示では、要素全体でブラウザの横方向を専有し、横に並べることは出来ません。高さや横幅を指定することが出来ます。div、h1〜h6、form、pなどが該当します。
インライン表示では、通常のテキスト内に表示でき、横に並べることが出来ます。高さや横幅を指定することは出来ません。a、b、span、imgなどが該当します。
インラインブロック表示では、横に並べることができ、高さや横幅を指定することが出来ます。該当するタグはなく、cssで指定できる表示方法です。
/* 影響ごと消す 位置がズレる */
div {
display: none;
}
/* 表示だけ消す 位置が残る */
div {
visibility: hidden;
}
/* ブロック表示する */
div {
display: block;
}
/* インライン表示する */
div {
display: inline;
}
/* インラインブロック表示する */
div {
display: inline-block;
}
色を設定したい時
cssで色を指定する場合は、カラーコードで指定します。カラーコードは、RGB値を16進数で表したものです。それぞれ 00〜ff の値になりますが、短縮することもできます。#RRGGBB の構成で、Rが赤成分、Gが緑成分、Bが緑成分となって、0に近いほど薄く、fに近いほど濃くなります。
/* 文字の色を設定 */
div {
/* 16進数のカラーコードで指定 */
color: #ff0000;
/* 短縮 */
color: #f00;
/* 色名で指定 */
color: red;
}
/* 背景色を設定 */
div {
background-color: #eee;
/* こちらでも設定可 */
background: #eee;
}
枠を表示したい時
要素内のテキストを強調したい場合など、枠線を引きたい時の指定方法です。線の太さや線の種類、色を指定できます。また上下左右をそれぞれで設定することも出来ます。
/* 枠を表示させる */
/* 要素の上下左右に1pxの枠を黒で表示 */
div {
border: 1px solid #000;
}
/* 要素の上だけに1pxの線を黒で表示 */
div {
border-top: 1px solid #000;
}
/* 要素の左下右だけに1pxの線を黒で表示 */
div {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
/* 要素の上左下右に太さの違う枠を黒で表示 */
div {
border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: #000;
}
/* よく使われる枠線の種類 */
div {
/* 実線 */
border-style: solid;
/* 2重線 */
border-style: double;
/* 点線 */
border-style: dotted;
/* 破線 */
border-style: dashed;
/* 表示しない */
border-style: none;
}
影を表示したい時
要素に影を付けて立体的に見せたい場合の指定方法です。
/* 要素に影を付ける */
div {
/* 水平方向、垂直方向の順に指定 */
box-shadow: 2px 5px;
}
/* 影をぼかす */
div {
box-shadow: 2px 5px 10px;
}
/* 影に色を付ける */
div {
box-shadow: 2px 5px 10px #a00;
}
/* 影の色に透明度を指定する */
div {
box-shadow: 2px 5px 10px rgba(200, 0, 0, 0.5);
}
/* 要素の内側に影を付ける */
div {
box-shadow: 2px 5px 10px #a00 inset;
}
枠線に丸みを付けたい時
枠線で囲われた要素の角を丸くすることが出来ます。指定した半径の円の円周が角になります。要素の縦横サイズと半径の調節によって、要素を円にすることも出来ます。
/* 4つの角を丸くする */
div {
border: 1px solid #000;
/* 半径5pxの円 */
border-radius: 5px;
}
/* 丸みを変える */
div {
border: 1px solid #000;
/* 左上と右下20px 右上と左下5px */
border-radius: 20px 5px;
}
div {
border: 1px solid #000;
/* 左上、右上、右下、左下 */
border-radius: 5px 10px 15px 20px;
}
/* 4つの角を楕円形にする */
div {
border: 1px solid #000;
/* 水平方向 / 垂直方向 */
border-radius: 50px / 10px;
}
透明化したい時
要素を透明化する方法です。値は 0.0〜1.0 で指定します。0.0で完全に透明、1.0で通常の表示になります。javascriptで徐々に変化させることで、フェードインさせたり、フェードアウトさせることが出来ます。
色を半透明にするには、rgba() を利用できます。rgba(赤, 緑, 青, 透明度)で指定し、0〜255または0〜100%で設定します。
/* 半透明にする */
div {
opacity: 0.5;
}
/* 色を半透明にする */
div {
color: rgba(0, 0, 0, 0.5);
background-color: rgba(200, 200, 200, 0.5);
}
表示位置を変更したい時
HTML内の要素は記述された順番に重ならないように表示されますが、位置を指定して重ねて表示させることも出来ます。
まず基準となる親要素を position: relative; で設定します。あとは対象要素の top、right、bottom、left プロパティで、基準からの距離を指定して表示位置を決めることが出来ます。
重なりの順序を変えたい場合は、 z-index プロパティで 0からの数値 で指定します。
/* 要素を指定位置に表示させる */
div {
/* 基準となる要素指定 */
position: relative;
}
div span {
/* 絶対位置表示 */
position: absolute;
/* 基準からの要素上部の位置 */
top: 5px;
/* 基準から要素右側の位置 */
right: 5px;
/* 重なり順序 */
z-index: 100;
}
/* 固定表示 スクロールさせない */
div span {
position: fixed;
/* 基準から要素左側の位置 */
left: 0;
/* 基準から要素下部の位置 */
bottom: 0;
/* 重なり順序 */
z-index: 100;
}
コンテンツを横に並べたい時
ブロック要素は通常、横並びに出来ませんが、cssの設定で横並びに表示させることが出来ます。主にパンくずリストやサイトメニューなどで利用されています。
設定内容としては、横並びにさせたい要素を float プロパティで左右いずれかに寄せて表示させます。float要素の次の要素は、その寄せて表示されている要素の直後から表示されてしまうので、解除のみを行なう要素が必要になります。
解除用のタグを記述する方法もありますが、下記では特にタグを設置せずに解除する方法を載せています。親要素の :after 擬似要素で子要素を作成できるので、その子要素にfloat解除をさせています。
/* 横に並べる親要素 */
ul {}
/* 横に並べる要素 */
ul li {
float: left;
width: 50px;
}
/* floatを解除する */
ul:after {
display: block;
content: "";
height: 0;
visibility: hidden;
clear: both;
}
コンテンツを中央に表示したい時
テキストや要素を中央に表示させたい場合の設定方法です。注意を引きたい一文や目立たせたい文章、モーダルウィンドウを表示したい場合などに利用されます。
/* 要素内のインライン要素を中央に */
div {
/* 中央添え */
text-align: center;
}
/* ブロック要素を中央に */
div {
/* 左右の余白をautoで中央に */
margin: 0 auto;
width: 500px;
}
/* 縦横で中央に表示 */
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 100px;
width: 100px;
}
改行をさせずに表示したい時
HTML文書では、長い文章は要素内に収まるように自動的に改行が行われます。これを防ぐにはcssでの設定が必要です。主に表テーブルを表示した時に、改行を禁止させることになります。
/* 改行をさせない */
th,td {
white-space: nowrap;
}
テキストを改行させて表示したい時
HTML文書では、改行位置をタグで指定しない限り、改行されずに表示されます。HTML文書内に記述したテキスト通りに改行させたい場合は、cssで設定する必要があります。
/* テキスト通りに改行させる */
code {
white-space: pre;
}
レスポンシブ表示をさせたい時
レスポンシブとは、アクセス端末の表示サイズに合わせて、Webサイトのデザインを柔軟に変化させて表示する方法です。一般的には、cssのメディアクエリで実現されます。
メディアクエリとは、アクセス端末の特性に合わせて適用するcssを変えることが出来る仕組みです。レスポンシブデザインでは、画面サイズに合わせて、適用するcssを変えています。
効率良く設定するコツとして、各端末ごとにcssを設定するのではなく、全体のcss設定を行ってから、各端末でのcssを上書きしていく方法があります。
/* PCなど */
div {}
/* タブレット 横幅768px以下 */
@media screen and (max-width: 768px) {
/* 上書き設定する */
div {}
}
/* スマホ 横幅480px以下 */
@media screen and (max-width: 480px) {
/* 上書き設定する */
div {}
}
テーブルをスクロールさせたい時
Webページ上に表テーブルを表示させた場合、画面内に収まらないことがあります。特にスマホでは画面内にすべてを表示できないことが多いので、cssで設定を行なう必要があります。
スクロールは、子要素を表示させるための機能なので、table全体を要素で囲んで、その要素に overflow プロパティでスクロール表示を可能にするだけです。データ部分のスクロール表示では、tbody内にデータを表示させてcss設定を行います。
/* テーブル全体をスクロールさせる */
div {
overflow: auto;
}
/* テーブルのデータ部分だけスクロールさせる */
tbody {
display: block;
height: 100px;
overflow: auto;
}
アニメーション処理をしたい時
一般的にWebサイト上のアニメーション処理は、javascriptで行いますが、cssのみでも動きのある要素を作ることが出来ます。
transition では、変化前のスタイル設定に対して、変化後のスタイル設定までを徐々に変化させることが出来ます。変化前がないスタイルは、即時に反映されます。cssのみの実装とする場合は、擬似クラスでスタイル変化を起こし、アニメーションさせることになります。擬似クラスではマウスオーバー:hover、ページ内遷移:target、フォーカス:focus、チェック時:checked が利用できます。
@keyframes では、進行途中となるフレーム毎のcssを設定し、アニメーションを作成します。あとは対象のセレクタで、再生時間、繰り返し回数、再生方法などの設定を行なうだけです。
/* マウスカーソルに反応させる */
div {
background: #000;
width: 100px;
transition: 1s;
}
div:hover {
background: #fff;
width: 200px;
height: 200px;
}
/* アニメーション名 a1 で作成 */
@keyframes a1 {
0% {
color: #00f;
opacity: 0;
}
50% {
font-size: 2em;
}
100% {
color: #f00;
opacity: 1;
}
}
/* アニメーションさせる要素 */
span {
/* アニメーション名 */
animation-name: a1;
/* 再生時間 */
animation-duration: 3s;
/* 再生回数 数値 infinite で無制限 */
animation-iteration-count: infinite;
/* 再生後、逆再生を行なう */
animation-direction: alternate;
}