IT用語辞典バイナリ | さくいん | サイトマップ | ヘルプ | お気に入りに追加  
CSS3リファレンス
IT用語辞典バイナリ<パソコン用語・コンピュータ辞書>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
コンピュータ偉人伝<人物・画像・写真・プログラミング>
拡張子辞典<ファイル・変換・変更・表示>
HTML5タグリファレンス
CSS3リファレンス
HTML5 JavaScript API
エクセル関数リファレンス
ITパスポート試験
 
  
  IT用語辞典バイナリ > CSS3リファレンス > CSS3とは
  カテゴリ別さくいん
  タグ別さくいん

CSS3とは

CSSの概要

CSS(Cascading Style Sheets)は、W3Cが策定している、HTML文書の見栄えを定義する仕様です。単にスタイルシートと呼ばれることもあります。初期のHTMLでは、文書としての情報と文字色などの見栄えが混在していましたが、これらを分離して、HTML文書には文書情報とその意味づけのみ記述し、見栄えに関することはCSSで記述しようというのがコンセプトです。

CSS3とは

CSS3(Cascading Style Sheets level 3)はCSSの新しい仕様です。「フォント」や「テキスト」などのモジュールに分かれており、モジュールごとに並行して仕様の定義が進められています。一部はすでに勧告されており、まだ勧告されていない仕様についても一部のブラウザが対応しています。 CSS3を使うと従来JavaScriptで行っていたアニメーション効果や入力内容チェックをCSS3だけで実現できるほか、Webサーバーからフォントダウンロードしてブラウザ上で表示させることもできるようになります。

CSSの書式

CSSの基本的な書式を紹介します。たとえば、h1要素の文字色を赤のイタリック体にするには次のように記述します。

h1 {
  color: red; /* 赤 */
  font-style: italic; /* イタリック */
}

h1の部分をセレクタといい、colorやfont-styleのことをプロパティといいます。/* から */の間はコメントです。
セレクタ部分の指定によって、プロパティを適用する範囲を指定できます。

セレクタの主な書式

セレクタ意味
*すべての種類の要素
*.classname または .classnameクラス名がclassnameの要素
*#idname または #idnameIDがidnameの要素
h1,h2h1要素とh2要素
h1[attrname]h1要素のうち属性にattrnameを持つもの
h1[attrname="attrvalue"]h1要素のうちattrname属性の値が"attrvalue"であるもの
a:link未読のリンク
a:visited既読のリンク
a:hoverマウスオーバー時のリンク
a:active選択時のリンク
a:focusフォーカス時のリンク
*:checkedラジオやボタンがチェックされている要素
*:lang(en-US)lang属性の値がen-USで始まっている要素
*:enabeleddisabledが指定されていない要素
*:disableddisabledが指定されている要素
*:rootルート要素(html要素)

利用方法

HTML文書中でCSSを利用するには、3つの方法があります。

※HTML4.01の頃は、CSSを利用するために

<meta http-equiv="Content-Style-Type" content="text/css"> 

という記述が必要でしたが、HTML5では省略できます。

要素中でstyle属性を用いて指定する

次のようにするとh1要素にスタイルを指定できます。

<h1 style="color: red">

HTML文書内にまとめて記述する

次のようにhead要素内にスタイルを記述します。

<head>
<style>
  h1 {
    color: red;
    font-style: italic;
  }
</style>
</head>

HTML5ではstyle要素中の 「type="text/css"」の記述は省略できます。

別ファイルに記述する

拡張子.cssファイルに次のように記述します。

h1 {
  color: red;
  font-style: italic;
}

HTML文書では、head要素内に次のように記述してCSSファイルを指定します。

<head>
<link rel="stylesheet" href="base.css">
</head>

HTML5ではlink要素中の 「type="text/css"」の記述は省略できます。

外部CSSファイルの文字コード指定

拡張子.cssファイルの先頭行に「@charset "文字コード名";」と書くと、そのファイルがどの文字コードで記述されているかを指定できます。
次の例はそれぞれ、UTF-8Shift-JISEUC-JPを指定した例です。

UTF-8

@charset "utf-8"; 

Shift-JIS

@charset "shift-jis";

EUC-JP

@charset "euc-jp";

HTML5ではUTF-8の利用が推奨されていますので、CSSファイル文字コードUTF-8にしておくのがよいでしょう。

ベンダープレフィックス

CSS3の仕様で勧告(Recommendation)されているのはまだ一部ですが、各ブラウザでは先行していくつかの機能をサポートし始めています。たとえば、図形に変形効果を適用するtransformは2012年1月現在、草案(Working Draft)の段階ですが、IE9、Firefox10、Opera11、Chrome16、Safari5、の各ブラウザで利用することができます。ただし、このような機能をブラウザ実装する際は、セレクタの前に各ブラウザごとに異なる接頭辞(プレフィックス)を付けることが推奨されています。
プレフィックスとは次のようなものです。

プレフィックスブラウザ
-ms-Internet Explorer
-moz-Firefox
-o-Opera
-webkit-Chrome、Safari

たとえば、IEでtransform機能を利用する場合は、「tansform」と書く代わりに、「-ms-tansform」と書きます。
なお、草案が勧告候補(Candidate Recommendation)の段階に移行したら、プレフィックスを外すことが推奨されています。各ブラウザに対応させるためには、次のように各ブラウザに対応したセレクタを同時に記述します。

#idname {
  -ms-tansform: scale(2,2);
  -moz-|tansform: scale(2,2);
  -o-tansform: scale(2,2);
  -webkit-tansform: scale(2,2);
  tansform: scale(2,2);
}

CSSの代表的なプロパティ

color色を指定します。色の指定の方法には、「red」のように色名で指定する方法のほか、#ff0000、rgb(255, 0, 0)、rgb(100%, 0%, 0%)のようにRGB形式で指定する方法などがあります。
margin、margin-top、margin-bottom、margin-left、margin-right要素間の隙間の大きさを指定します。marginに値を1つ指定した場合は上下左右に同じ値を指定します。それ以外は上(top)下(bottom)左(left)右(right)に個別に設定します。
padding、padding-top、padding-bottom、padding-left、padding-right要素のまわりの余白の大きさを指定します。paddingに値を1つ指定した場合は上下左右に同じ値を指定します。それ以外は上(top)下(bottom)左(left)右(right)に個別に設定します。
border、border-top、border-bottom、border-left、border-right要素の枠線の太さを指定します。borderに値を1つ指定した場合は上下左右に同じ値を指定します。それ以外は上(top)下(bottom)左(left)右(right)に個別に設定します。
display表示方法を block(段落)、inline(文中)、list-item(箇条書き)、none(非表示)などから指定します。
position位置指定の方法を static(指定なし)、relative(相対位置)、absolute(絶対位置)、fixed(絶対位置(スクロールでも固定))などから指定します。
top、bottom、left、right要素の位置を指定します。それぞれ上(top)下(bottom)左(left)右(right)を表します。
floatテキストの回り込みを指定します。none(指定なし)、left(要素を左端に固定し、テキストは右に回り込み)、right(要素を右端に固定し、テキストは左に回り込み)のいずれかで指定します。
clear回り込みを解除します。
z-index重ね合わせの順序を整数値で指定します(数字が大きいほど手前)
width、height要素の横幅と高さを指定します。
overflowテキストが領域をはみ出したときの表示方法を指定します。visible(はみ出してそのまま表示)、hidden(はみだし分を隠す)、scroll(スクロールバーを表示)、auto(自動)などを指定します。
clip一部をくりぬいて表示します。auto(自動)を指定するか、rect(top,right,bottom,left)の形式で指定します。
visibility要素を表示するかどうかを、visible(表示)、hidden(非表示)等から指定します。
list-style、list-style-type、list-style-position、list-style-image箇条書きの書式を指定します。list-style-typeは<li>のマーカーの形、list-style-positionはマーカーの位置、list-style-imageはマーカーの画像を指定します。list-styleはこれらをまとめて指定します。
background、background-color、background-image、background-repeat、background-attachment、background-position要素の背景を設定します。background-colorは色、background-imageは画像、background-repeatは画像の繰り返し、background-attachmentはスクロールの仕方、background-positionは表示位置を指定します。backgroundはこれらをまとめて指定します。
font、font-style、font-weight、font-size、line-heightフォントを指定します。font-styleは斜体かどうか、font-weightは太さ、font-sizeは大きさ、line-heightは行間を指定します。fontはこれらをまとめ指定できます。
text-indentテキストの字下げを指定します
text-alignテキストの配置をleft(左寄せ)、right(右寄せ)、center(センタリング)などから指定します。
text-decorationテキストの装飾をnone(なし)、underline(下線)、line-through(打ち消し線)、blink(点滅)などから指定します。
letter-spacing文字間を指定します。normal(通常)や、3pxなどの数値で指定します。
white-space空白の扱いを normal(自動改行)、pre(自動改行しない)、nowrap(自動改行しない、空白はつめる)などから指定します。
caption-sideテーブルのキャプションの位置を指定します。 top(上)、bottom(下)などから指定します
table-layoutテーブルの横幅の決め方を指定します。auto(自動的に調整)やfixed(固定)で指定します。
empty-cells中身が空のセルの枠線を描画するかを show(表示)、hide(非表示)で指定します。
cursor要素上にマウスカーソルが来たときの形状をauto(自動)、crosshair(十字)などから指定します。

関連項目



シャープのマスクシャープのマスク
シャープが製造・販売する不織布マスク。
Surface Book 3Surface Book 3
Microsoftが販売するデタッチャブルPC。
Surface Go 2Surface Go 2
Microsoftが発表した2in1 PC。

 ・ITパスポート試験とは
 ・試験範囲と内容
 ・サンプル問題にチャレンジ

 ・Windowsの歴史
ジョン・マッカーシー LISPの開発者
ジョン・マッカーシー
人工知能の研究分野における第一人者。
スティーブ・ジョブズ Appleの共同創設者
スティーブ・ジョブズ
「Mac」や「iPhone」を生み出した経営者。
デニス・リッチー C言語、UNIXの開発者
デニス・リッチー
C言語の設計、UNIXの開発に携わった人物。
».m4b MPEG-4オーディオファイルの拡張子。 up!
».m4r iPhoneの着メロにするAACファイルにつく拡張子。 up!
».xlsx Excel 2007で作成したファイルのデフォルトの拡張子。
».docx Word 2007の標準的な保存形式。XML形式となっている。

2024年3月29日現在
ランキング1   ICT (用語辞典)
ランキング2   AirDrop (用語辞典)
ランキング3   コンテキスト  (用語辞典)
ランキング4   セグメント  (用語辞典)
ランキング5   アノテーション  (用語辞典)
ランキング6   オムニチャネル  (用語辞典)
ランキング7   スワイプ  (用語辞典)
ランキング8   インスタンス化  (用語辞典)
ランキング9   カラム  (用語辞典)
ランキング10   FOMO  (用語辞典)
RSS 0.91 RSS 1.0 RSS 2.0
IT用語辞典バイナリについて運営会社についてお問い合わせ先テクニカルライター募集利用規約
プライバシーポリシー著作権・商標について協力社一覧Weblio 辞書スマート翻訳英和辞典 - Weblio辞書Weblio英会話
©2023 GRAS Group, Inc. All rights reserved.