【CSS】CSSのコードについて2017/05/23

[最終更新:2017/05/23]

このページではサーティファイのHTML4.01リファレンスと参考サイトを交えて、CSSについて書いていきたいと思います。

Webクリエイター能力認定試験にご興味のある方も合わせて参考サイトの方をご参照ください。

本記事は、同参考サイトによる区分を参考にして作成されています。

参考サイト：サーティファイ/Webクリエイター能力認定試験 HTML 4.01対応のサンプル問題

 

 

■CSSとは

CSS(スタイルシート)はウェブページのスタイルを指定するための言語です。

拡張子は「.css」になります。

CSSでは、スクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、 プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、 ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。

このように、HTMLのタグで記述された「.html」の見た目を整える目的で利用されます。

CSSとHTMLは密接な関係ではありますが、プログラム作者が違うので全く別のプログラムだと考えてください。

 

◆記述方法

CSSの記述は好みにもよりますが、最初はTera padがおすすめです。

※会社や学校の場合、会社や学校の規則によってインストールしてはいけない場合がありますのでご注意ください。

[参考サイト]：Tera pad

tpad109.exe ＝インストールタイプ

tpad109.zip ＝フォルダから起動タイプ

 

◇CSSの記述について

HTMLのタグで見た目を変更したり、HTMLに直接CSSを書くことも出来ますが、管理のし易さなどからスタイルシートに記述して読み込む方法がおすすめです。

 

 

◇基本的な記述方法

CSSの読み込み方法はHTMLの<head>内に

<link rel=”stylesheet” href=”css/style.css”>

と記述することで読み込めます。

 

次にスタイルシートへの記述ですが、最初に

@charset “utf-8”;

と記述して文字コードを宣言します。

 

文字コードを宣言した後に下記記述例のように記述していきます。

<記述例>

セレクタ｛プロパティ：値；｝

 

セレクタを指定した後は、プロパティ：値；は複数記述することができます。

改行して追記していくのは、管理しやすくする目的のためです。

<記述例>

セレクタ｛

プロパティ：値；

プロパティ：値；

プロパティ：値；

｝

 

その他、構造や詳しい記述につきましては参考サイトをご覧ください。

[参考サイト]：CSSとは？

[参考サイト]：CSSとは？これを読めば初心者でも必ずCSSが書ける！(2016/06/06)

 

◆CSSの書き方

CSSはセレクタを指定し、{}の中にプロパティと値と記述して利用します。

「；」は

記載例) セレクタ ｛プロパティ：値；｝

 

◆擬似クラス･･･選択される要素に対して特定の状態を指定します

[擬似クラス参考サイト]：疑似クラス (Pseudo-classes)

 

◇:link･･･訪問済のリンクにスタイルを適用する

[基本書式] 要素名(aタグなど):link {プロパティ名:値;}

[使用例] a:link {color:#0000ff;} ･･･未訪問のリンクの色

[説明] 未訪問のリンクにスタイルを適用します。

[参考サイト]：:link擬似クラス

[参考サイト]：:link

 

◇:visited･･･訪問済みリンクのスタイルを指定します。

[基本書式] 要素名(aタグなど):visited {プロパティ名:値;}

[使用例] a:visited {color:#00ccff;} ･･･訪問済みのリンクの色

[説明] 訪問済みリンクのスタイルを指定します

[参考サイト]：:visited擬似クラス

[参考サイト]：:visited

 

◇:hover･･･カーソルが乗っている要素にスタイルを適用する

[基本書式] 要素名(aタグなど):hover {プロパティ名:値;}

[使用例] a:hover {color:#ffffff; background:#0000cc;} ･･･カーソルが乗っているリンクの色

[説明] ユーザーの操作で要素にカーソルなどが乗った際のスタイルを指定します。 a:hoverでは“カーソルは乗っているがクリックはされていない状態”です。

[参考サイト]：:hover擬似クラス

[参考サイト]：:hover

 

◇:active･･･クリック中の要素にスタイルを適用する

[基本書式] 要素名(aタグなど):active {プロパティ名:値;}

[使用例] a:active {color:#ffff00;} ･･･クリック中のリンクの色

[説明] ユーザーの操作で要素がアクティブになった際のスタイルを指定します。 a:activeでは“クリックされてから離されるまでの状態”です。

[参考サイト]：:active擬似クラス

[参考サイト]：:active

 

◇コメント･･･CSSに影響しないコメントを記述します

[基本書式] /*コメント*/

[説明] CSSに影響しないコメントを記述します。

 

 

◆テキスト･･･テキストを装飾します

◇color･･･文字色を指定します

[基本書式]{color:値;}

[使用例]

{color:#000000;}

{color:rgb(255,0,0);}

{color:色名;}

[説明]文字色を指定します。RGBでの記載、または色名(red)などを指定します。#での記述のさい、112233であれば123とショートハンドすることができます。

[参考サイト]：colorについて

[参考サイト]：color

 

◇text-align･･･行揃えの位置を指定します

[基本書式] {text-align:値;}

[使用例]

{text-align: left;｝･･･左寄せにします

{text-align: right;｝･･･右寄せにします

{text-align: center;｝･･･中央揃えにします

[説明] テキストのようなインラインコンテンツが、その親ブロックの中でどのように文字寄せされるのかを定義します。text-align が制御するのはそのインラインコンテンツだけで、ブロック要素の配置は制御しません。

[参考サイト]：text-alignについて

[参考サイト]：text-align

 

◇text-decoration･･･テキストの下線・上線・打ち消し線・点滅を指定します

[基本書式] {text-decoration:値;}

[使用例]

{text-decoration: none;} ･･･なし

{text-decoration: underline;}･･･下線

{text-decoration: line-through;} ･･･取り消し線

[説明] text-decorationプロパティは、テキストに下線・上線・打ち消し線を付けたり、点滅させる際に使用します。 同時に複数の値を指定する場合には、値を任意の順序でスペースで区切って記述します。点滅のblinkは主要ブラウザのサポートから外されている関係で使用は避けたほうが無難とのこと。

[参考サイト]：text-decorationについて

[参考サイト]：text-decoration

 

◇text-indent･･･一行目のインデント幅を指定する

[基本書式] {text-indent:値;}

[使用例]値入力例

{text-indent: 10px;}･･･10px分のインデント幅

{text-indent: 10%;}･･･10%分のインデント幅

[説明] text-indentプロパティを使うことで、一行目の水平でのインデント幅を指定することができます。

[参考サイト]：text-indentについて

[参考サイト]：text-indent

 

◇vertical-align･･･縦方向の揃え位置を指定する

[基本書式] {vertical-align: 値;}

[使用例]

●<インラインでの垂直方向位置の指定>

{vertical-align: baseline;} ･･･デフォルトの設定

{vertical-align: sub;} ･･･下付き文字

{vertical-align: super;} ･･･上付き文字

 

●<セル内での垂直方向位置の指定>

{vertical-align: baseline;} ･･･デフォルトの設定

{vertical-align: top;} ･･･上端揃え

{vertical-align: bottom;} ･･･下端揃え

{vertical-align: middle;} ･･･中央揃え

[説明] vertical-alignのプロパティを適用できるのは、インライン要素とテーブルセルになるため、ブロックレベル要素では適用できないプロパティになります。それぞれのベースラインを指定して揃えることができます。画像の場合には下端がベースラインとなって揃えられています。

[参考サイト]：vertical-alignについて

[参考サイト]：vertical-align

 

◇text-transform･･･テキストの大文字表示・小文字表示を指定する

[基本書式]{text-transform:  値;}

[使用例]

{text-transform: none;}･･･デフォルトの設定

{text-transform: capitalize;}･･･単語の先頭文字を大文字で表示

{text-transform: lowercase;}･･･全てを小文字で表示

{text-transform: uppercase;}･･･全てを大文字で表示

[説明] text-transformプロパティを使うことで、テキストの大文字表示や小文字表示を指定することができます。主に大文字表示や小文字表示が必要となる英語などの外国語に使われます。単語の先頭文字だけを大文字で表示することもできます。

[参考サイト]：text-transformについて

[参考サイト]：text-transform
◇letter-spacing･･･文字間隔を指定する

[基本書式] {letter-spacing: 値;}

[使用例]

{letter-spacing: 10px;}･･･文字間隔を10px分あける

{letter-spacing: -10px;}･･･文字間隔を10px分詰める

{letter-spacing: ;}

[説明]letter-spacingプロパティは、文字間隔を指定する時に使うプロパティです。マイナス値を入力することで、文字間隔を詰める形で指定することもできます。

[参考サイト]：letter-spacingについて

[参考サイト]：letter-spacing

 

◇white-space･･･改行文字等の空白文字の表示の仕方を指定する

[基本書式] {white-space: 値;}
[使用例]

{white-space: normal;}･･･半角スペース・タブ・改行を、1つの半角スペースとして表示し、自動的な改行があります

{white-space: pre;}･･･半角スペース・タブ・改行を、そのまま表示します

{white-space: nowrap;}･･･半角スペース・タブ・改行を、1つの半角スペースとして表示し、自動的に改行はされません。

[説明]white-spaceプロパティは、半角スペース・タブ・改行の表示を指定します。

[参考サイト]：white-spaceについて

[参考サイト]：white-space
◇line-height･･･行の高さを指定する

[基本書式] {line-height: 値;}

[使用例]

{line-height: 10px;}･･･行を10px分高くする

{line-height: 10%;}･･･行を10%分高くする

{line-height: 1.5;}･･･行を150%分高くする

[説明]ine-heightプロパティは、行の高さを指定するプロパティでマイナスの数値を入れることはできません。行間にスペースを作りたい際に便利なプロパティです。

[参考サイト]：line-heightについて

[参考サイト]：line-height

 

 

◆フォント･･･フォントの種類やサイズを指定します
◇font-family･･･フォントを指定する

[基本書式] {font-family: sans-serif;}･･･フォントをsans-serifに指定する

[説明]font-familyプロパティはフォントの種類を指定するプロパティです。

[参考サイト]：font-familyについて

[参考サイト]：font-family

 

◇font-size･･･フォントサイズを指定する

[基本書式] {font-size: 値;}

[使用例]

{font-size: 10px;}･･･フォントサイズを10pxに指定する

[説明]

font-sizeプロパティはフォントサイズを指定するプロパティです。フォントサイズはデフォルトの指定があるため、デフォルトのフォントサイズを変えたい場合などに使います。

[参考サイト]：font-sizeについて

[参考サイト]：font-size
◇font-weight･･･フォントの太さを指定する

[基本書式] {font-weight: 値;}

[使用例]

{font-weight: normal;}･･･通常のフォントウェイトとなり、数値としては400相当です

{font-weight: bold;}･･･太字のフォントウェイトとなり、数値としては700相当です

{font-weight: lighter;}･･･親要素に対する相対値よりも一段階細くなります

{font-weight: bolder;}･･･親要素に対する相対値よりも一段階太くなります

{font-weight: 100;}･･･フォントウェイトを自身で設定する場合として、100での例です

[説明]font-weightはフォントの太さを指定するプロパティです。

[参考サイト]：font-weightについて

[参考サイト]：font-weight
◇font-style･･･イタリック体や斜体の設定をする

[基本書式] {font-style: 値;}

[使用例]

{font-style: normal;}･･･標準フォントであり初期設定です

{font-style: italic;}･･･イタリック体フォントの表示

{font-style: oblique;}･･･斜体フォントの表示

[説明]font-styleプロパティは、イタリック体や斜体の設定をします。

[参考サイト]：font-styleについて

[参考サイト]：font-style

 

◇font･･･フォントに関する指定をまとめて行います

[基本書式] {font: 値;}

[使用例]

{font: bold large/120% “ＭＳ 明朝”; }･･･文字を太字、行の高さ120%、フォントをＭＳ 明朝指定

[説明] fontは、ショートハンドとしての記述方法です(CSSの省略記載)。font-style、 font-variant、 font-weight、 font-size、 line-height、 font-familyの6つの指定が可能です。font-sizeとfont-familyの両値が必須、line-heightの値前に/で区切る、順番に制限があるなどのルールがあります。詳しくは参考サイトをご参照ください。

[参考サイト]：fontについて

[参考サイト]：font

 

 

◆背景･･･背景の色の指定、画像の指定等を行います

◇background-color･･･背景の色を指定する

[基本書式] {background-color: 値;}

[使用例]

{background-color: #ffffff;}･･･背景の色を#ffffffの色(白)に指定します

{background-color: rgb(値, 値, 値)}･･･背景の色をrgbで指定した色に指定します

{background-color: red;}･･･背景の色をredに指定します

[説明]background-colorプロパティは、背景の色を指定します。色の指定方法は、#からなる6桁(省略では3桁)、rgb指定での3つの値、カラー名等で指定することができます。

[参考サイト]：background-colorについて

[参考サイト]：background-color

 

◇background-image･･･背景に画像を指定する

[基本書式] {background-image: url(“値”);}

[使用例]{background-image: url(“画像の場所”)}

[説明]background-imageは背景に画像を貼るプロパティです。urlなどで貼り付けることができます。画像の場所は、フォルダの階層やURLで記載します。詳しくは参考サイトをご参照ください。

[参考サイト]：background-imageについて

[参考サイト]：background-image

 

◇background-attachment･･･背景画像の固定やスクロールと移動を指定する

[基本書式] {background-attachment: 値;}

[使用例]

{background-attachment: fixed;}･･･背景画像が固定され、スクロールを行っても動かなくなります

{background-attachment: scroll;}･･･スクロールにより、背景画像が移動します

[説明]background-attachmentプロパティは、背景画像の固定やスクロールと移動を指定します。

[参考サイト]：background-attachmentについて

[参考サイト]：background-attachment

 

◇background-repeat･･･背景画像のリピートを指定する

[基本書式] {background-repeat: 値;}

[使用例]

{background-repeat: repeat;}･･･縦横に背景画像を繰り返して表示

{background-repeat: repeat-x;}･･･横方向にのみ背景画像を繰り返して表示

{background-repeat: repeat-y;}･･･縦方向にのみ背景画像を繰り返して表示

{background-repeat: no-repeat;}･･･背景画像を一回だけ表示(繰り返し表示なし)

[説明]background-repeatプロパティは、背景画像のリピートを指定します。

[参考サイト]：background-repeatについて

[参考サイト]：background-repeat

 

◇background-position･･･背景画像の表示開始位置の指定をする

[基本書式] {background-position: 値;}

[使用例]

●<水平方向>

{background-position: center;}･･･センター位置を表示開始位置として指定します

{background-position: left;}･･･レフト位置を表示開始位置として指定します

{background-position: right;}･･･ライト位置を表示開始位置として指定します

 

●<垂直方向>

{background-position: top;}･･･トップ位置を表示開始位置として指定します

{background-position: center;}･･･センター位置を表示開始位置として指定します

{background-position: bottom;}･･･ボトム位置を表示開始位置として指定します

●<他>

{background-position: 25% 30%;}･･･横 縦という記述になるため、左端から25%の位置となり、さらにその位置の上端から30%の位置という指定になります。

{background-position: 100px 10px;}･･･横に100px、縦に10pxを表示開始位置として指定します

{background-position: 100px 10px, center;}･･･複数の画像の表示開始位置として指定します。この記述例では、表示させた画像1枚目は100px 10px部分が担当し、2枚目の画像はcenterが担当します。詳しくは参考サイトをご参照ください。

[説明]background-positionプロパティは、背景画像の表示開始位置の指定をします。left、center、right、top、center、bottomの他にpxや%での指定もできます。pxの数値にはマイナスの数値を指定することもできます。また、解像度による影響から表示位置が異なる場合があります。

[参考サイト]：background-positionについて

[参考サイト]：background-position
◇background･･･バックグラウンドに関する指定をまとめて行います

[基本書式] {background: 値;}

[使用例]

{background: no-repeat center/50% url(“画像の場所”);}･･･画像の繰り返し表示無し、中央寄せ、元のサイズと比較して50%に縮小、表示画像の指定をまとめて指定しています

[説明]backgroundプロパティは、ショートハンドとしての記述方法です(CSSの省略記載)。バックグラウンドに関する指定をまとめて行います。

[参考サイト]：backgroundについて

[参考サイト]：background

 

 

◆ボックス･･･枠線の指定をします

◇border-style･･･枠線(ボーダー)のスタイルを指定する

[基本書式] {border-style: 値;}

[使用例]

{border-style: none;}･･･ボーダーの指定がなく、ボーダーが表示されていない状態になり、border-widthの値は0です

{border-style: hidden;}･･･ボーダーを表示しない指定となり、border-widthの値は0です

{border-style: dotted;}･･･連続したドットのボーダーを表示がされ、border-widthの値は半分です

{border-style: dashed;}･･･実装依存での連続した線分を表示します

{border-style: solid;}･･･1本の直線での実線を表示します

{border-style: double;}･･･2本の直線を表示します

{border-style: groove;}･･･掘り込んだようなボーダーを表示します

{border-style: ridge;}･･･浮き出ているようなボーダーを表示します

{border-style: inset;}･･･囲われたものが埋め込まれたかのようなボーダーを表示します

{border-style: outset;}･･･insetと対をなるように、エンボスのようなボーダーを表示します

[説明]border-styleプロパティは、枠線(ボーダー)のスタイルを指定します。

[参考サイト]：border-styleについて

[参考サイト]：border-style

 

◇border-top,right,bottom,left-style･･･特定のボーダーのスタイルを指定する

[基本書式] {border-値-style: 値;}

●<top,right,bottom,left入力例>

{border-top-style: 値;}･･･トップのスタイルを指定します

{border-right-style: 値;}･･･ライトのスタイルを指定します

{border-left-style: 値;}･･･レフトのスタイルを指定します

{border-bottom-style: 値;}･･･ボトムのスタイルを指定します

[使用例]{border-値-style: 値;}

{border-top-style: solid;}･･･トップに1本線のボーダーを表示させる

[説明]border-値-style プロパティは、スタイルを指定するプロパティです。線の種類＝none、hidden、solid、double、groove、ridge、inset、outset、dashed、dotted。参考サイトは内容が重複するため、border-top-styleのものを用意しました。

[参考サイト]：border-top-style について

[参考サイト]：border-top-style
◇border-width･･･ボーダーの太さを指定する

[基本書式] {border-width: 値;}

[使用例]

{border-width: 1px;}･･･全部の太さを1pxに

{border-width: 1px 2px;}･･･上下の太さを1px、左右の太さを2pxに

{border-width: 1px 2px 3px;}･･･上の太さを1px、左右の太さを2px、下の太さを3pxに

{border-width: 1px 2px 3px 4px;}･･･上の太さを1px、右の太さを2px、下の太さを3px、左の太さを4pxに

[説明]border-widthプロパティは、ボーダーの太さを指定します。値は4パターンあり、1つの場合は全部の太さを、2つの場合は上下・左右を、3つの場合は上・左右・下を、4つの場合は上・右・下・左と時計回りに効果が出る指定を行います。

[参考サイト]：border-widthについて

[参考サイト]：border-width

 

◇border-top,right,bottom,left-width･･･特定のボーダーの太さを指定する

[基本書式] {border-値-width: 値;}

[使用例]

{border-top-width: 10px;}･･･トップのボーダーの太さを10pxに指定

{border-top-width: thin;}･･･トップのボーダーの太さを細く指定

[説明]border-値-widthプロパティは、特定のボーダーの太さを指定します。pxなどの数値で指定する他、thin＝細い、medium＝普通、thick＝太い、と指定することもできます。参考サイトは内容が重複するため、border-top-widthのものを用意しました。

[参考サイト]：border-top-widthについて

[参考サイト]：border-top-width

 

◇border-color･･･ボーダーの色を指定する

[基本書式] {border-color: 値;}

[使用例]

{border-color: red;}･･･色名での指定

{border-color: rgb(255,255,255);}･･･RGBでの指定

{border-color: #ffffff;}･･･#での指定

[説明]border-colorプロパティは、ボーダーの色を指定します。#から始まる6桁で入力するほか、色名やRGBでの指定もできます。

[参考サイト]：border-colorについて

[参考サイト]：border-color

 

◇border-top,right,bottom,left-color･･･特定のボーダーの色を指定する

[基本書式] {border-値-color: 値;}

●<top,right,bottom,left入力例>

{border-top-color: 値;}･･･トップの色を指定します

{border-right-color: 値;}･･･ライトの色を指定します

{border-left-color: 値;}･･･レフトの色を指定します

{border-bottom-color: 値;}･･･ボトムの色を指定します

[使用例]

{border-top-color: red;}･･･トップを色名での指定

{border-top-color: rgb(255,255,255);}･･･トップをRGBでの指定

{border-top-color: #ffffff;}･･･トップを#での指定

[説明]{border-値-colorプロパティは、特定のボーダーの色を指定します。参考サイトは内容が重複するため、border-top-colorのものを用意しました。

[参考サイト]：border-top-colorについて

[参考サイト]：border-top-color
◇border･･･ボーダーをまとめて指定する

[基本書式] {border: 値;}

[使用例]{border: スタイル 太さ #色;}

{border: solid 10px #ffffff;}･･･10pxの太さの白ボーダーを1本で表示する

[説明]borderプロパティは、ボーダーのスタイル・太さ・色などををまとめて指定することができます。

線の種類＝none、hidden、solid、double、groove、ridge、inset、outset、dashed、dotted・太さ＝pxなどの数値で指定する他、thin＝細い、medium＝普通、thick＝太い・色＝色名やRGBでの指定もできます。

[参考サイト]：borderについて

[参考サイト]：border

 

◇border-top,right,bottom,left･･･枠線のスタイル・太さ・色を指定する

[基本書式] {border-値: 値;}

●<top,right,bottom,left入力例>

{border-top: 値;}

{border-right: 値;}

{border-left: 値;}

{border-bottom: 値;}

[使用例]{border-値: 線の種類 太さ 色;}

{border-top: solid 10px #ffffff;}･･･トップに白の1本線で10pxの太さのボーダーを表示させる

[説明]border-値プロパティは、スタイル・太さ・色を指定するプロパティです。線の種類＝none、hidden、solid、double、groove、ridge、inset、outset、dashed、dotted。参考サイトは内容が重複するため、border-topのものを用意しました。

[参考サイト]：border-topについて

[参考サイト]：border-top

 

◇margin･･･マージンの指定をする

[基本書式] {margin: 値;}

[使用例]

{margin: 10px;}･･･上下左右に10pxのマージン

{margin: 10px 20px;}･･･上下に10pxのマージン、左右に20pxのマージン

{margin: 10px 20px 30px;}･･･上に10pxのマージン、左右に20pxのマージン、下に30pxのマージン

{margin: 10px 20px 30px 40px;}･･･上に10pxのマージン、右に20pxのマージン、下に30pxのマージン、左に40pxのマージン

{margin: 0 auto}･･･ボックスレベル要素を中央に配置することができます

[説明]marginプロパティは、マージンの指定をします。混同しがちなpaddingが余白を作ることを目的とするのに対し、marginは要素の移動を目的として使用します。値は4パターンあり、1つの場合は上下左右、2つの場合は上下・左右を、3つの場合は上・左右・下を、4つの場合は上・右・下・左と時計回りに効果が出る指定を行います。

[参考サイト]：marginについて

[参考サイト]：margin

 

◇margin-top,right,bottom,left･･･特定の部分にマージンを指定する

[基本書式] {margin-値: 値;}

[使用例]

{margin-top: 10px;}･･･トップに10pxのマージン

{margin-right: 10px;}･･･ライトに10pxのマージン

{margin-left: 10px;}･･･レフトに10pxのマージン

{margin-bottom: 10px;}･･･ボトムに10pxのマージン

[説明]margin-値のプロパティは、top,right,bottom,leftなど特定の部分にマージンを指定します。参考サイトは内容が重複するため、margin-topのものを用意しました。

[参考サイト]：margin-topについて

[参考サイト]：margin-top

 

◇padding･･･パディングを指定する

[基本書式] {padding: 値;}

[使用例]

{padding: 10px;}･･･上下左右に10pxのパディング

{padding: 10px 20px;}･･･上下に10pxのパディング、左右に20pxのパディングン

{padding: 10px 20px 30px;}･･･上に10pxのパディング、左右に20pxのパディング、下に30pxのマージン

{padding: 10px 20px 30px 40px;}･･･上に10pxのパディングン、右に20pxのパディング、下に30pxのパディングン、左に40pxのパディングン

[説明]paddingプロパティは、パディングの指定をします。混同しがちなmarginが要素の移動を目的とするのに対し、paddingは余白を作ることを目的として使用します。値は4パターンあり、1つの場合は上下左右、2つの場合は上下・左右を、3つの場合は上・左右・下を、4つの場合は上・右・下・左と時計回りに効果が出る指定を行います。

[参考サイト]：paddingについて

[参考サイト]：padding

 

◇padding-top,right,bottom,left･･･特定の部分にパディングを指定する

[基本書式] {padding-値: 値;}

[使用例]

{padding-top: 10px;}･･･トップに10pxのパディング

{padding-right: 10px;}･･･ライトに10pxのパディング

{padding-left: 10px;}･･･レフトに10pxのパディング

{padding-bottom: 10px;}･･･ボトムに10pxのパディング

[説明]padding-値のプロパティは、top,right,bottom,leftなど特定の部分にマージンを指定します。参考サイトは内容が重複するため、padding-topのものを用意しました。

[参考サイト]：padding-topについて

[参考サイト]：padding-top

 

 

◆配置･･･要素の配置に関する指定を行います

◇position･･･要素配置の基準位置を指定する

[基本書式] {position: 値;}

 

[使用例]

{position: static;}･･･配置方法を指定しないデフォルトの指定

{position: relative;}･･･相対位置への配置

{position: absolute;}･･･絶対位置への配置

{position: fixed;}･･･スクロールしても位置が固定される絶対位置への配置

[説明]positionプロパティは、要素配置の基準位置を指定します。

[参考サイト]：positionについて

[参考サイト]：position

 

◇top,right,bottom,left･･･positionプロパティを併用して配置位置を指定する

[基本書式] {position:値; top: 値;}

[使用例]

{position:absolute; top: auto;}･･･自動調整される指定で、デフォルトでの指定

{position:absolute; right: 10px;}･･･ライトからの絶対位置の配置位置を10pxに指定する

{position:absolute; left: 10%;}･･･レフトからの絶対位置から10％の割合ので配置位置に指定

[説明]top,right,bottom,leftプロパティは、positionプロパティを併用して使うプロパティです。上からの配置位置を指定します。
参考サイトは内容が重複するため、topのものを用意しました。

[参考サイト]：topについて

[参考サイト]：top

 

◇height ･･･高さを指定する

[基本書式] {height: 値;}

[使用例]

{height: auto;} ･･･状況に応じて自動設定される、デフォルトの指定

{height: 10px;} ･･･高さを数値で指定するもので、この場合では10pxと指定

{height: 10%;} ･･･高さを数値で指定するもので、この場合では10%と指定

[説明]heightプロパティは、高さを指定します。autoやpx、%で指定します。heightプロパティは、min-heightとmax-heightに上書きされてしまうプロパティです。

[参考サイト]：heightについて

[参考サイト]：height

 

◇width ･･･幅を指定する

[基本書式] {width : 値;}

[使用例]

{width : auto;} ･･･状況に応じて自動設定される、デフォルトの指定

{width : 10px;} ･･･幅を数値で指定するもので、この場合では10pxと指定

{width : 10%;} ･･･幅を数値で指定するもので、この場合では10%と指定

[説明]width プロパティは、高さを指定します。autoやpx、%で指定します。width プロパティは、min-width とmax-width に上書きされてしまうプロパティです。

[参考サイト]：widthについて

[参考サイト]：width

 

◇overflow･･･はみ出た内容等の表示方法を指定する

[基本書式] {overflow: 値;}

[使用例]

{overflow: visible;}･･･ボックスからはみ出して表示され、デフォルトの設定です

{overflow: scroll;}･･･入りきらない内容はスクロール化

{overflow: hidden;}･･･はみ出た部分は非表示

{overflow: auto;}･･･ブラウザに依存する指定で、一般的にはスクロール化

[説明]overflowプロパティは、はみ出た内容等の表示方法を指定します。ボックスの範囲内に内容が入りきらない場合に、スクロールや非表示などを指定することができます。

[参考サイト]：overflowについて

[参考サイト]：overflow

 

◇z-index･･･重なり順を指定する

[基本書式] {position: static以外の値; 値:値; z-index: 値;}

 

[使用例]

●<imgの上にpタグテキストが乗っかる使用例>

p{position: relative; top: 50px; z-index: 2;}

img{position: relative; top: -50px; z-index: 1;}

[説明]z-indexプロパティは、重なり順を指定します。positionプロパティでstatic以外の値が指定されている要素に適用されます。配置順としては、z-index: 1の上にz-index: 2が配置される形です。

[参考サイト]：z-indexについて

[参考サイト]：z-index

 

◇visibility･･･ボックスの表示と非表示を指定する

[基本書式] {visibility: 値;}

[使用例]

{visibility: visible;}･･･ボックスを表示

{visibility: hidden;}･･･ボックスを非表示

{visibility: collapse;}･･･指定部分を詰めて表示する指定ですが、ブラウザのサポートされていないこともあるため、hiddenのように非表示になることが多い

[説明]visibilityプロパティは、ボックスの表示と非表示を指定します。display:none;と違い、ボックスそのものは残ります。

[参考サイト]：visibilityについて

[参考サイト]：visibility

 

◇display･･･表示形式の指定をする

[基本書式] {display: 値;}

[使用例]

{display: inline;}･･･インラインボックスを生成する、デフォルトの設定

{display: block;}･･･ブロックボックスを生成

{display: list-item;}･･･li要素のようにリスト内容が収められるブロックボックスと、●などのリストマーカーのためのマーカーボックスを生成

{display: none;}･･･非表示となり、無いものとして扱う

[説明]displayプロパティは、ブロックレベル要素やインライン要素等の表示形式の指定します。

[参考サイト]：displayについて

[参考サイト]：display

 

◇float･･･ブロックレベルを左または右に沿うように設置する

[基本書式] {float: 値;}

[使用例]

{float: none;}･･･指定のないデフォルトの設定

{float: left;}･･･指定した要素を左に寄せ、続く内容はその右側に回り込みます

{float: right;}･･･指定した要素を右に寄せ、続く内容はその左側に回り込みます

[説明]floatプロパティは、ブロックレベルを左または右に沿うように設置することで、インライン要素を回り込ませることができます。floatを使用した際には、解除させないと後の要素まで回り込みを続けるため、clearプロパティなどで回り込みを解除させる必要があります。

[参考サイト]：floatについて

[参考サイト]：float

 

◇clear･･･回り込みの解除

[基本書式] {clear: 値;}

[使用例]

{clear: none;}･･･指定のないデフォルトの設定

{clear: left;}･･･左寄せされた要素に対する回り込みを解除

{clear: right;}･･･右寄せされた要素に対する回り込みを解除

{clear: both;}･･･全ての要素に対する回り込みを解除

[説明]clearプロパティは、回り込みの解除させるプロパティです。floatで行った回り込みを解除させる際に使います。すべての回り込みを解除させる汎用性から、clear: both;がよく使われます。また、::after 擬似要素にclearを使って解除する方法もあります。

 

[参考サイト]：clearについて

[参考サイト]：clear

[参考サイト]：::after

 

 

◆リスト･･･リストマークを指定する

◇list-style-type･･･マーカー文字の種類を指定する

[基本書式] {list-style-type: 値;}

[使用例]

{list-style-type: none;}･･･指定のないデフォルトの設定でマーカーの表示はありません

{list-style-type: disc;}･･･黒丸マーカーの表示

{list-style-type: circle;}･･･白丸マーカーの表示

{list-style-type: square;}･･･黒四角マーカーの表示

{list-style-type: decimal;}･･･10進数・算用数字の表示

{list-style-type: lower-roman;}･･･小文字のローマ数字の表示

{list-style-type: upper-roman;}･･･大文字のローマ数字の表示

{list-style-type: lower-alpha;}･･･小文字のアルファベットの表示

{list-style-type: upper-latin;}･･･大文字のアルファベットの表示

[説明]list-style-typeプロパティは、マーカー文字の種類を指定します。list-style-typeとlist-style-imageではlist-style-imageが優先されます。また、閲覧環境により仕様通りに表示されない場合もあります。displayプロパティの値を操作することで、全ての可視要素にこのスタイルを適用する事が可能です。

[参考サイト]：list-style-typeについて

[参考サイト]：list-style-type

 

◇list-style-image･･･マーカー画像を指定する

[基本書式] {list-style-image: url(画像の場所);}

[使用例]

{list-style-image: url(http://～);}

[説明]list-style-imageプロパティは、リストの先頭に表示するマーカーに■や●ではなく、画像ファイルを指定したい時に使用します。ただ、list-style を使うほうが便利なことが多いようです。

[参考サイト]：list-style-imageについて

[参考サイト]：list-style-image

 

◇list-style-position･･･マーカーの表示位置を指定する

[基本書式] {list-style-position: 値;}

[使用例]

{list-style-position: outside;}･･･リスト内容の領域の外側に表示され、マーカー以外の部分がインデントされた形に

{list-style-position: inside;}･･･リスト内容の領域の内側に表示され、マーカーとマーカー以外の部分の高さが揃うように

[説明]list-style-positionプロパティは、リストの先頭に表示するマーカーの表示位置を指定します。

[参考サイト]：list-style-positionについて

[参考サイト]：list-style-position

 

◇list-style･･･マーカーに関する指定をまとめて指定する

[基本書式] {list-style: 値;}

[使用例]

{list-style: disc inside;}･･･黒丸をリスト内容の領域の内側に表示

{list-style: lower-roman url(‘../画像の場所’) outside;}･･･小文字のローマ数字の表示で、指定した画像をリスト内容の領域の外側に表示

[説明]list-styleプロパティは、リストの先頭に表示するマーカーをまとめて指定します。スペースで区切ることで、 list-style-type・ list-style-image・ list-style-positionを順不同で指定することもできます。

[参考サイト]：list-styleについて

[参考サイト]：list-style