CSSリファレンス


CSSとはCascading Style Sheets(カスケーディング・スタイルシート)の略で、HTMLで作られたWebページのデザインやレイアウトを変更するときに使用します。

複数のWebページのレイアウトや背景色、背景画像などをまとめて処理することもできます。

CSSの最新バージョンCSS3では、新たな機能の追加や改良がされてさらに便利になっていますが、 Internet Explorer 8や9等の古いブラウザーにはメディアクエリやFlexboxなど一部の機能には未対応(css3-mediaqueries.jsやflexibility.jsで対応可)です。
  1. 基礎知識
  2. ベンダープレフィックス
  3. Flexbox
  4. カーソルの形状を指定する
  5. リンク文字の下線を非表示にする
  6. 文字の色を変える
  7. 上下(左右)反転表示にする
  8. 余白をつくる
  9. 表示幅に合わせて改行
  10. タブボックスの作成
  11. 背景の設定
  12. 文字の設定
  13. 罫線の設定

基礎知識

記述の仕方

適用させたいHTMLのタグ(要素)にclass属性かid属性で名前を付け、内容を { から } の中に記述します。

<div class="名前">あいうえお</div>
<div id="名前">かきくけこ</div>

.名前{
ここに記述
}

#名前{
ここに記述
}

classはページ内で複数のタグに同じ名前を使用でき、同じ内容をまとめて適用したい場合に使用します。 CSS記述は名前の前にドットを付けます。

対してidはページ内に1つしか指定できないので1つだけに適用させる場合や、ページ内リンクを指定するときに使います。 CSS記述は名前の前にシャープを付けます。

記述の場所

CSSを記述できる場所は3通りあります。
  1. HTMLの<head> ~ </head>のタグ内に記述
  2. 外部ファイルに記述してHTMLで呼び出し
  3. 適用したいタグ(要素)に直接記述

<head> ~ </head>のタグ内に記述

<style>

ここに記述

</style>

レンダリングブロックされないので基本はここに記述するのがいい。

外部ファイルに記述

外部ファイルに内容を記述し、HTMLの<head>から</head>の間で読み込むCSSファイルを指定する。
<link rel="stylesheet" href="CSSファイルのURL">

記述量が多いときやファーストビュー以外で使用する内容の場合などにおすすめ。

タグ(要素)に直接記述

使用するタグ内にstyle="~"と記述して使用します。
<span style="color:red;">あいうえお</span>

他の場所への記述よりも優先度が高く、一箇所だけ変更や適用させたい場合におすすめ。

コメントアウト

CSSの記述内に構文ではないコメントをつけたい場合は/*と*/の間に記述します。
複数行になっても問題ない。
/* ここにコメント */

ベンダープレフィックス

CSS3になって追加されたFlexboxやその他一部の機能では、Webブラウザのバージョンによっては使用はできるが標準化されていないものがあり、 その場合はWebブラウザ側へCSS3の機能であることを伝えるために接頭語(プレフィックス)を付ける必要があります。

Android 4.x系の標準Webブラウザをサポートしたいときにも必要。

ベンダープレフィックスは各Webブラウザメーカーごとに違い、主に以下のようなベンダープレフィックスになる。
Internet Explor → -ms-
Google Chrome、Safari、Android 4.x系 → -webkit-
Firefox → -moz-
Opera → -o-


#container {
-ms-display: flex;
display: flex; ← 対応済みWebブラウザ向け
}

Flexbox

flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティにflexを指定するだけです。

flexコンテナの配置方向指定flex-direction

flex-direction: row;
左から右方向にコンテナが配置されます。(デフォルト)

flex-direction: row-reverse;
右から左方向にコンテナが配置されます。

flex-direction: column;
左上から下方向にコンテナが配置されます。

flex-direction: column-reverse;
左下から上方向にコンテナが配置されます。

flexコンテナを複数行に分けて配置することができるflex-wrap

デフォルトでは
flex-wrap: nowrap;
を指定したのと同じで横もしくは縦一列にコンテナが配置されますが、コンテナが幅いっぱいになったときに改行(改列)するには以下のようにします。
flex-wrap: wrap;
指定方向とは逆に改行したい場合は
flex-wrap: wrap-reverse;

カーソルの形状を指定する

cursor: pointer リンクカーソル

リンク文字の下線を非表示にする

text-decoration: none;

リンク

文字の色を変える

color: #000000;

※色の種類は色の見本を参照

上下(左右)反転表示にする


<div style="width:100px;height:40px;filter:flipv">あいうえおかきくけこさしすせそ</div>


あいうえおかきくけこさしすせそ

※heightの数値を変えることで表示開始位置を、widthで折り返す幅を指定できます。
※左右に反転する場合はfilter:fliphにします。
※Internet Explorer専用

余白をつくる

指定タグの外側に対して余白をつくる場合はmargin(マージン)を使い、 指定タグ内に対して余白をつくる場合はpadding(パディング)を使います。 どちらも設定の形式は同じです。

margin: 1px; 上下左右を一括で指定
margin: 1px 2px; 上下・左右の順で指定
margin: 1px 2px 3px; 上・左右・下の順で指定
margin: 1px 2px 3px 4px; 上・右・下・左の順で指定

マージンの大きさはpxやemなどの単位を付けた数値か%かautoで指定。
1方向にだけ余白を作りたい場合は他の設定箇所を0pxや0%に指定するか
margin-top、margin-right、margin-bottom、margin-leftを使用します。

margin-right: 1px;

<div style="background-color:#bfdfff; height:50px; width:200px" >
<div style="background-color:#ffffcc; margin: 10px 10px 15px 20px;">
あいうえお
</div>
</div>
あいうえお

<div style="background-color:#bfdfff; height:50px; width:200px;" >
<div style="background-color:#ffffcc; padding: 10px 10px 15px 20px;">
あいうえお
</div>
</div>
あいうえお

表示幅に合わせて改行

htmlでは半角英数字が連続するとそれは単語とみなされます。htmlは単語単位で改行されるため長い英単語の場合、 <TABLE>タグや<DIV>タグで幅を指定していても以下のように超えてしまうことがある。

<div style="width:100px; background-color:#ffffcc;"">あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz</div>
あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz

そこでInternet ExplorerやSafari 3、Chromeの場合のみだがword-breakを使用することで単語の途中でも改行できるようになる。
<div style="width:100px; background-color:#ffffcc; word-break:break-all;">あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz</div>
あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz

Firefoxなどの場合は改行することができないため<DIV>タグではoverflowなどで改行せずに表示させるなどするしかない。
<div style="width:100px; background-color:#ffffcc; overflow:auto;">あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz</div>
あいうえおかきくけこさしすせそabcdefghijklmnopqrstuvwxyz

タブボックスの作成

大手サイトなどでたまに見かけるタブボックス。画面をスクロールさせることなく表示させたい場合や デザイン的に導入したい場合などで利用。ここでのタブボックスは一部JavaScriptを使用しています。 画像ファイルを使えばもっとかっこいいタブボックスも作れます。

タブ1 タブ2 タブ3

タブ1の内容
タブ2の内容タブ2の内容タブ2の内容タブ2の内容タブ2の内容タブ2の内容 タブ2の内容タブ2の内容タブ2の内容タブ2の内容タブ2の内容タブ2の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

タブ3の内容

1、htmlのHEADタグ内に以下を記述

<style type="text/css">
<!--
/* ■タブボックス■ */
/* タブボックス枠の設定 */
div.tabbox { margin: 0px; padding: 0px; width: 100%; }

/* タブの設定 */
p.tabs { margin: 0px; padding: 0px; }
p.tabs a {
	display: block; width: 100px; float: left;
	margin: 0px 2px -1px 0px; padding: 2px;
	text-align: center;
	border-top: 1px solid #c0c0c0;
	border-left: 1px solid #c0c0c0;
	border-right: 1px solid #c0c0c0;
	text-decoration: none;/*下線なし*/
	color: #6699ff;
}
p.tabs a.tab1 { background-color: #ffffcc;}
p.tabs a.tab2 { background-color: #ccffcc;}
p.tabs a.tab3 { background-color: #ffcccc;}
p.tabs a:hover { color: red; }

/* ボックスの設定 */
div.tab {
	overflow: auto;/* スクロールの許可 */
	clear: left;
}
div#tab1 { border: 1px solid #c0c0c0; background-color: #ffffff; height:200px; width: 320px;}
div#tab2 { border: 1px solid #c0c0c0; background-color: #ffffff; height:200px; width: 320px;}
div#tab3 { border: 1px solid #c0c0c0; background-color: #ffffff; height:200px; width: 320px;}
-->
</style>
<script type="text/javascript">
<!--
function ChangeTab(tabname) {
   // 全部消す
   document.getElementById('tab1').style.display = 'none';
   document.getElementById('tab2').style.display = 'none';
   document.getElementById('tab3').style.display = 'none';
   // 指定箇所のみ表示
   document.getElementById(tabname).style.display = 'block';
}
// -->
</script>
2.htmlのBODYタグ内で表示させたい場所に以下を記述

<div class="tabbox">
   <p class="tabs">
      <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); window.focus(); return false;">タブ1</a>
      <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); window.focus(); return false;">タブ2</a>
      <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); window.focus(); return false;">タブ3</a>
   </p>

   <div id="tab1" class="tab">
<!-- タブ1の内容 -->
   </div>
   <div id="tab2" class="tab">
<!-- タブ2の内容 -->
   </div>
   <div id="tab3" class="tab">
<!-- タブ3の内容 -->
   </div>
</div>

<script type="text/javascript">
<!--
  // デフォルトのタブを選択
  ChangeTab('tab1');
// -->
</script>

背景の設定

設定の一例
background-image : url(image/bg.gif);
background-color:#e5ecf9;
background-repeat: repeat;
background-attachment: fixed;
background-position: left top;

文字の設定

設定の一例
font-style:italic
font-family : "MS ゴシック";
font-size: 12px;
font-weight: bold;
text-align:right;
line-height:18px;/*行間を指定*/
text-decoration: none;/*下線なし*/
text-indent: 4px;/*インデント(字下げ)*/

罫線の設定

設定の一例
border-width:1px;
border-color: #c0c0c0;
border-style: solid;/*実線*/
border-style: inset;/*へこみ*/
border-style: outset;
border-style: dashed;/*点線*/

以下のようにまとめて設定することもできる。
border : 1px inset;
border : solid 1px #c0c0c0;

TOPへ
戻る