20200625 positionプロパティの復習・ナビゲーション作成・他不具合の修正方法
今日の講義のまとめ
<午前>
〇おさらい問題の答え合わせ
基準枠の決定（relative等）の仕方、要素同士の重ね合わせを利用した画像の合体
要素の移動の仕方等
〇要素前面・背面位置を調整するz-indexの使い方
〇min-widthの使用方法
min-widthの値は表示領域の幅と同じにすること
〇max-widthの使用方法
imgの表示サイズの設定に使用。ブラウザの表示サイズを変更しても、画像表示も変更に合わせてサイズを変更してくれる
max-width: 100%;
height: auto;
セットで使うこと。
<午後>
〇ナビゲーションの作成方法
手順 ①リストスタイルのリセット
②ナビを横並びにする
①
.nav ul { list-style: none;
padding-left: 0;
margin: 0;
②
display: flex; justify-content: center;}
〇ナビゲーションのリンクボタンの作成方法
手順
①幅の設定②枠線の設定③文字色の設定④下線を消す⑤横方向中央ぞろえ⑥余白調整
〇ボタン背景に画像を設定
〇応用編 JSの活用
onmouseover,onmouseout・・・マウスカーソルを乗せた際に動き出すJS
onmouseover="this" src='img/画像名1'"
↑↓マウスカーソルを置くと画像が切り替わる。
onmouseout="this src='img/画像名2'"
<その他>
〇作成したＨＰがブラウザによって表示のされ方が違ってくる問題
ーー解決方法ーー
→can i use（https://caniuse.com/）等を使用して、使用できる値を確認した上でＣＳＳに記述すること。
例）justify-content：space-evenly；を使用して、IEとchromeで表示の比較をしたらIEでは反映されないことがあった。
これはIEではspace-evenlyが対応していなため。
〇footerがページの下部ではなく中部あたりに表示されてしまう問題
ーー解決方法ーー
フレックスコンテナー内でフレックスアイテムを配置する方法を使用
#wrapper{
display: flex;
flex-direction: column;
height: 100%;
}
・flex-directionの値
①行のテキストの方向に配置 flex-direction: row;
②<row> と同様だが、逆向き flex-direction: row-reverse;
③ 積み重なるように配置する flex-direction: column;
④<column> と同様だが、逆向き flex-direction: column-reverse;
⑤ グローバル値
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset;
・表示を完全にするため
body{height: 100%;}
html{height: 100%;}
を記述
・下記のものを記述すると1：1の割合で要素が可変してくれる
※HTMLでidタグrecommendとintroを設けてる場合
#recommend{
flex:1
}
#intro{
flex:1
}
以上の設定をするとヘッダーとフッダーの表示が固定され、中のrecommendとintroはブラウザの拡大、縮小に応じて表示の大きさが変化する。
・・・とりあえずフッターは下部にちゃんと表示される形になるのかな。。
<課題>
min,max-widthの活用方法を駆使したおさらい問題を解いておく
ナビゲーションのおさらい問題を解いておく
ーーーー以下 本講義内容のメモ書きーーーー
午前中に学んだこと
問1・absoluteとrelativeの関係 動かしたい要素にposition:absolute; 基準枠に設定したい要素にposition:relative; 基準枠に設定した先祖要素の左上に動かしたい要素がくる。
問2.要素の上書き後書きのプロパティが先書きのプロパティを上書きする。
例
.gallery img{border:solid 10px;}
.gallery .fukidashi{ border:none;}
上記の場合はimgタグにborde要素が先書きされ、後書きのfukidashiタグにborderにnoneを入れることでfukidashi画像にsolidラインが書き込まれない。
問3p要素の改行について文章中に<br>を多用するのではなく、widthでp要素の大きさを調整することでｐ要素の大きさに合わせて一行に入る文字数が可変する。
z-indexの使い方
.数値が大きいほど前面に配置
.10刻みで指定するケースが多い→間に別の要素を追記しやすいため
.positionでrelative,absolute,fixedで指定がないと機能しない
.対象要素の位置調整が必要ないときはrelativeで指定すること。
min-widthの使用方法
min-widthの値は表示領域の幅と同じにすること
例題
↓---HTML---
<head> <meta charset="UTF-8">
<title>幅と高さのプロパティ</title>
<link href="block-width02.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="inner"> ブロックボックス1 </div>
</div>
</body>
</html>
↓---CSS---
body { margin: 0; min-width: 960px;}
.box { background-color: #fcc;}
.box .inner { width: 960px;
margin: 0 auto;
border: solid 1px #000;}
→bodyのmin-widthの数値=innerのwidthの数値
max-widthの使用方法
imgの表示サイズの設定に使用。ブラウザの表示サイズを変更しても、画像表示も変更に合わせてサイズを変更してくれる
max-width: 100%;
height: auto;
もセットで使うこと。
例 img { max-width: 100%;
height: auto;
vertical-align: bottom;}
※vertical-aline 隙間を埋める
↑の場合、画像の下部に隙間が空いていたのでbottomを指定する。
ナビゲーションの作成方法
/* ナビゲーション */表示されているナビゲーションの背景色.nav { background-color: #fcc;}
・を消したり項目を横並びにしたり真ん中に寄せたり・・・.nav ul { /* リストスタイルリセット */ list-style: none; padding-left: 0; margin: 0; /* 横並び */ display: flex; justify-content: center;}
ボタンの作成方法
.nav li a { background-color: #fcc; display: block;←CSSでブロック要素にしてしまう方法 width: 192px;←これはブロック要素にしか使えないものだがdisplay: blockのおかげで使用可能になっている。
border: solid 1px #333; border-right: none;←右側がぽっかり空いちゃうがlast-childで埋める
text-decoration: none;
color: #333;
text-align: center;（←フレックスを使用している場合はjustify-content:center;）
padding: 10px 0;}
.nav li:last-child a { border-right: solid 1px #333;←空いている右側を埋める}
.nav li a:hover { background-color: #f00;←カーソルを乗せた際に変色}
.nav .en { font-weight: 700;}
.nav .jp { font-size: 70%;}
①幅の設定②枠線の設定③文字色の設定④下線を消す⑤横方向中央ぞろえ⑥余白調整
〇ボタン背景に画像を設定/* 基本タグ */body { margin: 0;}
/* 幅計算 */* { box-sizing: border-box;}
/* 表示領域 */.inner { width: 960px; margin: 0 auto;}
/* ナビゲーション */.nav { background-color: #fcc;}
.nav ul { /* リストスタイルリセット */ list-style: none; padding-left: 0; margin: 0; /* 横並び */ display: flex; justify-content: center;}
.nav li a { /* ボタン幅・高さ デザイナーに依頼したボタン1つ分の幅と高さ */ display: block; width: 192px; height: 60px; /* 共通背景画像設定 */ background-repeat: no-repeat; /* 文字非表示 ↓このまま使うと文字がうつらなくなる */ text-indent: -9999px;}
.nav li.menu1 a { background-image: url(img/btn01.png);}
.nav li.menu2 a { background-image: url(img/btn02.png);}
.nav li.menu3 a { background-image: url(img/btn03.png);}
.nav li.menu4 a { background-image: url(img/btn04.png);}
.nav li.menu5 a { background-image: url(img/btn05.png);}
.nav li a:hover { background-position-y: -100px;}
※透明度の設定0~1.nav li a:hover { opacity: 0.7;
〇応用JS onmouseover,onmouseout・・・マウスカーソルを乗せた際に動き出すJSonmouseover="this" src='img/画像名1'"↑↓onmouseout="this src='img/画像名2'"マウスカーソルを置くと画像が切り替わる。
