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>
.
.
<metaname="viewport"content="width=device-width, initial-scale=1.0">
.
.
</head>メディアクエリ用のCSSファイルを用意する
メディアクエリ用のCSSファイルを用意する(responsive.css)
htmlファイル
<head>
.
.
<linkrel="stylesheet"href="responsive.css"> #viewportよりも下の行に記述することに注意
.
.
</head>