View
172
Download
3
Category
Preview:
DESCRIPTION
北海道工業大学電子計算機研究部ネットワークチーム 前期講座資料07
Citation preview
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: "[ 外部サイト ]"}
擬似要素
アンケート
課題1: CSS を駆使して信号機を作る ※ border-radius を指定すると要素の角を丸くする
ことが出来る課題2: 余裕がある場合は、信号機に動きを付ける
例:擬似クラス :hover や :checked を使って点灯する色を切り替える
例: CSS Animation で青3秒、黄色1秒、赤3秒の順で点灯させる
課題
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/
参考
Recommended