CSS 基礎Ⅱ

電算部ネットワーク講座 07

属性セレクタ隣接セレクタ間接セレクタ擬似クラス擬似要素課題参考

目次

CSS を使いこなすことで、これから学ぶ JavaScript を使うこと無く CSS だけで次のようなことを実現できるようになる。例えば…マウスを重ねた時のスタイル外部サイトへのリンクにマークを付けるリンク先のファイルの拡張子毎にアイコンを付ける先頭の要素、行、文字を対象にスタイルを適用する要素にエフェクトをかける要素に動きを持たせる ( アニメーションさせる )

CSS を使いこなす

属性セレクタ属性を指定して選択

<input type="text" require>

/* require 属性を持つ input 要素 */input[require] { border-color: #f00;}

/* 拡張子が .pdf のリンク (a 要素 ) */a[href$=".pdf"] { background-color: #eee;}

属性セレクタ

隣接セレクタ隣接する弟要素を選択

/* h1 要素に隣接する p 要素 */h1 + p { color: #e55;}

li + li { border-top: 1px solid #000;}

隣接セレクタ

間接セレクタ弟要素を選択

/* h2 要素の弟要素になる h2 要素 */h2 ~ h2 { margin-top: 20px;}

間接セレクタ

擬似クラス状態や位置を指定して選択

/* .link クラスを持つ要素の hover 擬似クラス マウスカーソルを重ねると適用される*/.link:hover { font-weight: bold;}

擬似クラス

擬似要素存在しない要素を選択

/* 外部サイトへのリンクの前方に [ 外部サイト ] と追記する*/a[href^="http://"]:before,a[href^="https://"]:before,a[href^="//"]:before { content: "[ 外部サイト ]"}

擬似要素

アンケート

課題１： CSS を駆使して信号機を作る ※ border-radius を指定すると要素の角を丸くする

ことが出来る課題２： 余裕がある場合は、信号機に動きを付ける

例：擬似クラス :hover や :checked を使って点灯する色を切り替える

例： CSS Animation で青３秒、黄色１秒、赤３秒の順で点灯させる

課題

http://weboook.blog22.fc2.com/blog-entry-268.html

http://zero.css-happylife.com/https://developer.mozilla.org/ja/docs/Web/CSShttp://www.css-lecture.com/log/css-beginner/

参考