Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. CSS中級編 - CSS中級編総まとめ

CSS中級編総まとめ

みなさまどうもこんにちは。

ここまでお付き合い頂き誠にありがとうございました。こちらがCSS中級編の総まとめとなります。もし忘れてしまった項目などありましたらこちらで再確認しちゃってください。

開発ツール

『開発ツール』(インスペクタツール)はブラウザに組み込まれている開発用のツール。WindowsOSは『F12』キー、MacOSは『option』+『command』+『i』の同時押しで開くことができる。

詳細はこちら

子孫セレクタ

子孫セレクタの指定方法はいずれかの要素を記述した後に半角スペースを空けてさらに要素を記述する。記述例は以下。

p span {
    color: red;
}

要素と要素の間に『>』を挟んで記述すると子要素の指定となる。記述例は以下。

div > span {
    color: red;
}

詳細はこちら

隣接した要素などを指定

隣接セレクタの指定方法は要素と要素の間に『+』を記述する。隣接セレクタと名前がついているが、次にいる隣接した要素に対しての指定となる。手前にいる要素は対象外となるので注意。記述例は以下。

h1 + p {
    color: red;
}

全ての弟要素に対して指定する場合は要素と要素の間に『~』を記述する。記述例は以下。

h1 ~ p {
    color: red;
}

詳細はこちら

擬似クラス

擬似クラスを使用するとイベントが起こった際のデザインを変更することができる。記述例は以下。

a:link {
    color: purple;
}
a:visited {
    color: pink;
}
p:hover {
    color: red;
}
a:active {
    color: orange;
}

上記の記述例を全て反映させるときは順番の概念があるので注意。以下の順番で記述すること。

:link → :visited → :hover → :active

詳細はこちら

『margin』プロパティと『padding』プロパティ

『margin』は外側の余白を決めるプロパティ、『padding』は内側の余白を決めるプロパティ。記述例は以下。

p {
    margin: 20px;               /* 上下左右の外側の余白を20pxで指定 */
    margin: 20px 10px;          /* 上下が20px,左右は10pxで外側の余白を指定 */
    margin: 20px 10px 5px;      /* 上が20px,左右が10px,下が5pxで外側の余白を指定 */
    margin: 20px 10px 5px 3px;  /* 上が20px,右が10px,下が5px,左が3pxで外側の余白を指定 */

    padding: 20px;              /* 上下左右の内側の余白を20pxで指定 */
    padding: 20px 10px;         /* 上下が20px,左右は10pxで内側の余白を指定 */
    padding: 20px 10px 5px;     /* 上が20px,左右が10px,下が5pxで内側の余白を指定 */
    padding: 20px 10px 5px 3px; /* 上が20px,右が10px,下が5px,左が3pxで内側の余白を指定 */
}
p {
    margin-top: 20px;       /* 上の外側の余白を20pxで指定 */
    margin-right: 20px;     /* 右の外側の余白を20pxで指定 */
    margin-bottom: 20px;    /* 下の外側の余白を20pxで指定 */
    margin-left: 20px;      /* 左の外側の余白を20pxで指定 */

    padding-top: 20px:      /* 上の内側の余白を20pxで指定 */
    padding-right: 20px;    /* 右の内側の余白を20pxで指定 */
    padding-bottom: 20px;   /* 下の内側の余白を20pxで指定 */
    padding-left: 20px;     /* 左の内側の余白を20pxで指定 */
}

『margin』の値に『auto』と設定する場合は必ず『width』を指定する。上下方向の『auto』は指定できない。インラインレベル要素は上下方向の『margin』は効かず、『auto』という値も効かない。『margin』は上下方向のみ相殺される場合がある。親子関係でも相殺されるので注意。

要素の大きさは『padding』の値が加算されて決定される。子要素がインラインレベル要素だった場合、paddingを設定してもそのpaddingの大きさは親要素の大きさを決定付ける数値として加算されず子要素が親要素を突き破った形でレンダリングされるので注意。

詳細はこちら

『float』プロパティ

『float』を使用すると続く要素を回りこませたりカラムレイアウトを構築できる。値に取れるのは『left』、『right』、『none』の3つ。値に『left』か『right』を指定した場合にフロートされた要素としてレンダリングされる。『left』と指定すると左寄せのフロート、『right』と指定すると右寄せのフロートとなる。記述例は以下。

p {
    float: left;
    width: 200px;
    height: 200px;
}
div {
    float: right;
    width: 200px;
    height: 200px; 
}

floatプロパティを使って要素をフロートさせる場合は同時にwidthプロパティも指定しなくてはならない。

親要素にフロートされた子要素の高さを算出させたい場合は親要素に直接高さを指定するか、『clear』プロパティを使用するか、親要素に『overflow』プロパティを指定するか、もしくは『clearfix』を使用すれば良い。

詳細はこちら

『position』プロパティと『z-index』プロパティ

『position』プロパティを使用するとかなり自由に配置を決定することができる。取れる値は以下。

  • static
  • relative
  • absolute
  • fixed

『position』プロパティに『static』以外の値が設定してある場合は『top』、『bottom』、『left』、『right』プロパティで配置の調整ができる。詳細は以下。

top基準となる位置の上からの配置距離を指定
bottom基準となる位置の下からの配置距離を指定
left基準となる位置の左からの配置距離を指定
right基準となる位置の右からの配置距離を指定

『position』プロパティに対して『static』と値を取ると通常の配置となる。

『position』プロパティに『relative』と値を取ると通常のドキュメントフローで配置される位置を基準とした配置となる。

『position』プロパティに『absolute』と値を取ると祖先要素の『position』プロパティに『static』以外の値が指定されている場合には直近の祖先要素が基準とした配置となり、祖先要素の『position』プロパティに『static』以外の値が指定されていなかった場合はウィンドウを基準とした配置となる。その際は元々配置されるはずだった領域は存在しなかったものとして詰まってレンダリングされる。子要素に『position: absolute』と指定してあった場合、親要素はその子要素の高さを自身の高さに算出できない。

詳細はこちら

『position』プロパティに『fixed』と値を取るとウィンドウを基準位置として配置され、スクロールを行ってもその位置は固定されたままとなる。その際は元々配置されるはずだった領域は存在しなかったものとして詰まってレンダリングされる。子要素に『position: fixed』と指定してあった場合、親要素はその子要素の高さを自身の高さに算出できない。

『z-index』の値に数値を指定すると要素の重なり具合を調節できる。その際は対象となる要素の『position』プロパティに『static』以外の値を設定する必要がある。『スタックコンテキスト』や『スタックレベル』に注意。

詳細はこちら

以上となります。このような駄文に最後までお付き合い頂き感無量でございます、誠にありがとうございました。当サイトの情報が少しでもあなたの知力となっておられますように。

また機会がありましたらどこかでお会いしましょう。ではこの辺で失礼させて頂きます。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。