【授業メモ】グリッドレイアウトとキャプションの表示
復習ポイント
■opacityとrgbaの違いとアニメーション
- opacity→すべての要素が透明になる
- rgba →背景色だけが透明になる
例えば、hoverして透明にしたい場合は、hover前の背景色もrgbaで指定しないといけない。
- transition: 〇s; →〇秒かけて変化する
例）hoverすると0.4秒かけて、変化する
.one .cap {/*アニメーションのスタート前（完全に料理の写真だけが見えている状態）*/
position: absolute;
left: 0;
top: 0;
background: rgba(255,255,153,0.3);
opacity: 0;
}
.one .cap:hover {/*アニメーション後の設定（文字が見えて、後ろの料理の写真も半透明で見えている状態）*/
background: rgba(255,255,153,0.ugokasu 3);
opacity:1;
transition: 0.4s;
}
■要素の％表示
100％→要素すべて
50%→要素の半分 など、％で場所を指定することができる
.three .cap : absolute;
top: 0;
left: 100%; →.threeの中の.capを、.threeの左となりぴったりにposition配置する
}
.three:hover .cap {
top: 0;
left: 50%; →.threeをhoverしたときに、その中の.capを、.threeの50%となり（50%被ってる）に動かす
transition: 0.3s;
}
キャプションの表示
→キャプションをdivに入れ、設定し、overflow:hiddens;で余分な部分を隠すと動きと結果だけが表示される
■キャプションの入れ方
画像を入れているliの中にdivを作り、そこにキャプションを入れていく
ulの中にはliしか入れられないが、liの中になら、div p等を入れることができる！！！！！！！
<ul>
<li><img src="img/ph01_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
<li><img src="img/ph11_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
<li><img src="img/ph19_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
</ul>
■写真をhoverしてキャプションを表示する方法
親要素に動作を加えたときに、親要素に属する子要素に変化を加える
<li class="two"><img src="img/ph11_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
.two:hover .cap {
top: 50%;
left: 0;
transition: 0.3s;
}
hoverするのはli class="two"、動かしたいのはliの中の文字が入っているdiv class="cap"
.twoの中にある.cap（親要素の中の子要素を指定できる）
■キャプションの動きの設定ができたら、
ulとli（キャプションを入れた要素）にoverflow:hidden;をかければ完成
ul {
overflow: hidden;
width: 960px;
height: 320px;
margin: 50px auto;
}
li {
margin: 10px;
float: left;
width: 300px;
height: 300px;
position: relative;
overflow: hidden;
}
.cap {
width:300px;
height: 300px;
background: #FFFF99;
}
.one .cap {/*アニメーションのスタート前（完全に料理の写真だけが見えている状態）*/
position: absolute;
left: 0;
top: 0;
background: rgba(255,255,153,0.3);
opacity: 0;
}
.one .cap:hover {/*アニメーション後の設定（文字が見えて、後ろの料理の写真も半透明で見えている状態）*/
background: rgba(255,255,153,0.3);
opacity:1;
transition: 0.4s;
}
.two .cap {
position: absolute;
top: 100%;
left: 0;
}
.two:hover .cap {
top: 50%;
left: 0;
transition: 0.3s;
}
.three .cap {
position: absolute;
top: 0;
left: 100%;
}
.three:hover .cap {
top: 0;
left: 50%;
transition: 0.3s;
}
</style>
</head>
<body>
<ul>
<li class="one"><img src="img/ph01_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
<li class="two"><img src="img/ph11_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
<li class="three"><img src="img/ph19_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div></li>
</ul>
</body>
</html>
グリッドレイアウトを作り、キャプションを入れる
格子状のレイアウト。レスポンシブ対応しやすいため、今もよく使われているレイアウト。
画面をいくつかのサイズのブロックで構成・配置していく方法。
■グリッドレイアウトのポイント
各要素の
- floatしている要素同士のmarginは加算される
- 要素の上に要素を重ねるpositionを上手く使う
見本
①まず、グリッドの大きさ（画像の大きさをメモして整理する）
S 140×140
M 140×300
300×140
L 300×300
②構造と幅高さ隙間を理解するために、図に書いて整理する
・縦長floatの3カラムレイアウト
・liに画像を入れてfloatで並ばせて、カラムもfloatで並ばせる
・margin加算忘れずに！
※ここだけfloat注意 M縦のみfloat:right！！！
■レイアウトができたら、キャプションを入れていく
positionメモ
・positionで基準点を設けないでabsoluteすると、属する親要素は追い抜いて、基準点はbodyになってしまう
％は、本来「親要素の何％」かなのだが、positionの場合は「基準点の何％」という意味で、％の対象は変わる
明日はこれをレスポンシブ対応していくらしい・・・！！！！！
やることが増えて混乱してきました。
便利だけどキャプションは結構復習しないと難しい。
