webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

responsive 全画面表示

  • 仕上がりの目標。
  • hoverすると、べた色が下から出てきて、文字の位置がセンターにくる。
  • 後ろのレイヤ―、<div id="photo">の「background」に画像をレイアウトする。
  • 手前のレイヤー、<div id="caption">の「background」に色ベタをレイアウトする。
  • #photo、の中に(入れ子で)#captionを配置する。

f:id:ohta-felica:20160808052355j:plain

 

f:id:ohta-felica:20160808052447j:plain

 

f:id:ohta-felica:20160808052453p:plain

 

VHとは?

f:id:ohta-felica:20160808053105p:plain

 opacity

  • 要素全体の不透明度。背景も、文字も透過になる。

f:id:ohta-felica:20160808170819p:plain

 rgba

  • rgbaで設定できるのは、backgroundの不透明度のみ。
  • 16進数をrgbに変換する。#e20613→16*14+2, 6, 16+3→226, 6,19

.caption{
background: rgba(226, 6, 19, 0.5);
width: 100%;
height: 100%;
}

  •  .caption(=上にあるキャプションレイヤー)にrgbaで背景を指定する。
  • <div class="caption">の背景色だけ不透明になる。結果として下にある<div class="photo">が少しだけ見えている。
  • <div class="caption">の親要素、<div class="photo">に対して、幅と高さを100%に指定しておく。 

f:id:ohta-felica:20160808172603p:plain

f:id:ohta-felica:20160808172814p:plain

  •  hoverする前は、写真がきちんと見えているのだから、rgbaの a=0。
  • captionを見せたい位置にくるように、尚且つボタンが隠れるように、<div class="caption">のpadding-topを調節する。
  • padding-topを使って、.captionの縦の長さを長くする。色べたの長さを長くする。さらに、最初は見せたくないボタンを隠すところがコツ。
  • padding-topの分だけ、高さが伸びる。その分だけpositionで上げることができる。
  • padding-topの分量=position topの移動幅の最大値。
  • (おまけ)文字が見にくいので、text-shadowを使う。

f:id:ohta-felica:20160808180051p:plain

 

  • 今後の方針。まずposition absoluteを使って、最初の位置を規定する。
  • 親要素の.photoにはposition relative。
  • hoverした時は、position topの値を「-(マイナス)」にして.captionの位置を上にあげる。移動できる最大量はpadding-bottomの値。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>vougue responsive</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<div class="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 160 160" enable-background="new 0 0 160 160" xml:space="preserve">
<!--svgタグをbodyの中にコピー
width:とheight:を削除する。
pタグをつけてサイズ指定する-->
<g id="background">
<rect fill="#FFFFFF" width="160" height="160"/>
</g>
<g id="frame">
<path id="line" fill="#CCBB8E" d="M5,5h149.999v149.999H5V5z M0,160h160V0H0V160z"/>
</g>
<g id="text">
<path class="char" d="M102.678,139.061c2.12,0,2.12-0.548,2.12-5.404c0-0.412-0.138-4.857-0.205-5.268c-0.136-1.163-0.411-1.849-0.411-2.326

 

中略

 

c-0.342-0.958-1.368-0.958-1.915-0.958H56.385z"/>
</g>
</svg>
</div><!--logo-->

<div class="upper">
<div class="ph01 photo">
<div class="caption">
<h2>#01</h2>
<p class="text">photo caption #01</p>
<p class="more"><a href="#">more storys</a></p>
</div><!--caption-->
</div><!--photo-->

<div class="ph02 photo">
<div class="caption">
<h2>#02</h2>
<p class="text">photo caption #02</p>
<p class="more"><a href="#">more storys</a></p>
</div><!--caption-->
</div><!--photo-->

</div><!--upper-->

<div class="bottom">

<div class="ph03 photo">
<div class="caption">
<h2>#03</h2>
<p class="text">photo caption #03</p>
<p class="more"><a href="#">more storys</a></p>
</div><!--caption-->
</div><!--photo-->

<div class="ph04 photo">
<div class="caption">
<h2>#04</h2>
<p class="text">photo caption #04</p>
<p class="more"><a href="#">more storys</a></p>
</div><!--caption-->
</div><!--photo-->

<div class="ph05 photo">
<div class="caption">
<h2>#05</h2>
<p class="text">photo caption #05</p>
<p class="more"><a href="#">more storys</a></p>
</div><!--caption-->
</div><!--photo-->

</div><!--bottom-->
<footer>copyright Hiroyuki FURUHASHI all rights reserved</footer>
</div><!--container-->
</body>
</html>

 

@charset "utf-8";
/* CSS Document */
html, body, div, img, h1, h2, p, a{
margin: 0;
padding: 0;
line-height: 1.0;
font-family: Helvetica, sans-serif;
}
img{vertical-align: bottom:}
a{text-decoration: none;}
/*reset
-----------------------------------------------------------------*/
#container{
width: 100%;
position: relative;
}
.ph01{background: url(img/01.jpg) no-repeat ;}
.ph02{background: url(img/02.jpg) no-repeat ;}
.ph03{background: url(img/03.jpg) no-repeat ;}
.ph04{background: url(img/04.jpg) no-repeat ;}
.ph05{background: url(img/05.jpg) no-repeat ;}

.upper, .bottom{
overflow: hidden;
}
.photo{
float: left;
max-width: 100%;
background-size: cover;
text-align: center;
position: relative;/*子要素.captionのabsoluteを設定するため。*/
}
.upper .photo{
width: 50%;
height:50vh;
}
.bottom .photo{
width: 33.33%;
height: 50vh;
}
/*layout for images
------------------------------------------------------------------*/
h2, p{
color: #fcfcfc;
text-shadow: 0px 0px 4px #333333;
line-height: 40px;
}
h2{font-size: 32px;}
p{font-size: 20px;}
p a{
color: white;
line-height: 50px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
p.text{
padding-bottom: 6%;
}
/*layout for texts
----------------------------------------------------------------*/
.caption{
background: rgba(205, 187, 143, 0);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: ease 0.3s;
}
.upper .caption{
padding-top: 35%;
}
.bottom .caption{
padding-top:55%;
}
.caption:hover{
background: rgba(205, 187, 143, 0.5);
}
.upper .caption:hover{
top: -25%;
}
.bottom .caption:hover{
top: -25%;
}
footer{
height: 150px;
background: #ccbb8e;
text-align: center;
line-height: 150px;
font-size: 16px;
font-family:Arial, Helvetica, sans-serif;
color: #000080;
}
/*animation
------------------------------------------------------------------------------------*/
.logo{
width: 160px;
height: 160px;
position: absolute;
top:42%;
left:50%;
margin: -80px 0 0 -80px;
z-index: 100;
}
path.char{
stroke:#e20613;
stroke-width: 1;
fill:#ffffff;
stroke-dasharray: 3000;/*破線の間隔*/
stroke-dashoffset: 3000;
animation:DASH 6s ease-in-out 1s forwards;
}/*animation name=DASH duration delayの順番*/
@keyframes DASH{
0%{stroke-dashoffset: 3000; fill:#fff;}
85%{stroke-dashoffset: 0; fill:#dd010e;}
100%{stroke-dashoffset: 0; fill:#e20613;}
}