HTML/CSS復習①からの続きです。
アニメーションを付ける
CSSファイル
transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);
hoverと組み合わせて使うことが多い
CSSファイル
#変化の対象となるところにカーソルを乗せると背景が1秒間赤色に変化する
div {
transition: 変化の対象(allだと全てのプロパティを指定) 変化の時間(例： 1s = 1秒);
}
div: hover {
background-color:red;
}
行間の指定
CSSファイル
line-height: 〇〇px;
position: absolute
CSSファイル
position: absolute; #要素同士を重ねて表示できる
CSSファイル
#サイト全体の左上部分を基準に、top, left, right, bottomで位置を指定できる
position: absolute;
top: 〇〇px;
left: 〇〇px;
基準としたい親要素に
CSSファイル
position: relative;
と指定すると、その要素の左上部分が基準となる
(デフォルトはブラウザ全体の左上部分が基準となる)
ボックスに影を付ける
CSSファイル
box-shadow: 〇〇px(水平方向) 〇〇px(垂直方向) 影の色;
cursorプロパティ
CSSファイル
cursor: カーソルの形; #マウスのカーソルが要素に乗った時、カーソルの形を変える
active
CSSファイル
div: active {
background-color: red; #セレクタにactiveを用いると、要素がクリックされている間のCSSを適用できる
}
CSSの打ち消し
CSSファイル
.btn-active {
box-shadow: none; #影を消すことができる
}
ボタンをへこませる
CSSファイル
.btn: active {
position: relative;
top: 6px;
box-shadow: none;
}
ヘッダーを画面上に固定する
CSSファイル
#top, left, right, bottom で位置を指定する
position: fixed;
top: 〇〇px;
left: 〇〇px;
right: 〇〇px;
bottom: 〇〇px;
要素の重なり順を指定する
z-indexプロパティを用いる
整数で指定する。値が大きいほど、上に表示される
*必ず、positionプロパティと併用しないといけない
メディアクエリ
メディアクエリ・・・ ブラウザの画面サイズに応じたCSSスタイルを設定するメディアクエリ用のCSSファイル
@media(条件: 例えばmax-width: 1000px, min-width: 670px など) {
#ここに、その画面サイズに適用したいCSSを記述する
}
ブレイクポイント
スマートフォン・・・ 670px以下 タブレット・・・ 671px ~ 1000px PC・・・ 1001px以上box-sizing
CSSファイル
box-sizing: border-box; #要素の幅(width)の合計にpadding, borderが含まれるように指定される
全要素にCSSを適用する
CSSファイル
* {
box-sizing: border-box; # *(アスタリスク)に対して指定すると全要素にCSSを適用できる
}
レスポンシブデザインの適用準備
＜head＞タグ内にviewportを設定するhtmlファイル
<head>
.
.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
</head>
メディアクエリ用のCSSファイルを用意する
メディアクエリ用のCSSファイルを用意する(responsive.css)htmlファイル
<head>
.
.
<link rel="stylesheet" href="responsive.css"> #viewportよりも下の行に記述することに注意
.
.
</head>