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』は内側の余白を決めるプロパティ。記述例は以下。

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』を使用すると続く要素を回りこませたりカラムレイアウトを構築できる。値に取れるのは『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』プロパティを使用するとかなり自由に配置を決定することができる。取れる値は以下。

• static
• relative
• absolute
• fixed

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

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

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

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

詳細はこちらへ

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

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

詳細はこちらへ