レスポンシブで横並びの画像が縦並び
yokonarabipm03.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1"><!--レスポンシブ-->
<title>レスポンシブ</title>
<link rel="stylesheet" href="yokonarabi.css">
</head>
<body>
<div class="wrap">
<div class="image"><img src="fish_aburabouzu.png"></div>
<div class="image"><img src="fish_aburabouzu.png"></div>
</div>
</body>
</html>
yokonarabi.css
@charset "utf-8";
body{
background-color:#fff;
}
div.wrap{
}
@media all and (min-width:560px){
}
@media all and (min-width:960px){
div.image{
float:left;
width:50%;
}
}
レスポンシブ
ライブコーティング
ほんとはプレーンテキストの状態でタグを書き込んでいく
ここからここまではなにタグでいこうとか
次には中くらいのとこから、または、小さいところからくくっていく。やり方は人それぞれらしい
完成画像をイラレとかに取り込んで、実際のフォントサイズや各パーツのサイズを測ってはめこんでいく。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5+CSS3の新しい教科書</title>
<link rel="stylesheet" href="test1.css">
</head>
<body>
<header>
<p>基礎から覚える、深く理解できる。</p>
<h1>
<strong>HTML5+CSS3</strong><br>
の<br>
<span>新しい教科書</span><br>
改定新版
</h1>
<dl>
<dt>監修</dt>
<dd>こもりまさあき</dd>
</dl>
<dl>
<dt>共著</dt>
<dd>赤間公太郎</dt>
<dd>原一宣。</dt>
</dl>
<div class="stamp">
<p>
「応用力」と<br>
「考える力」が<br>
身につく！
</p>
</div>
</header>
<main>
<h2>
new textbool for<br>
HTML5+CSS3
</h2>
</main>
<fotter>
<div>
<p>
技術が変わっても、ずっと使える<br>
サイトの「正しい」作り方が分かる！<br>
</p>
<p>
サンプルデータ（レスポンシブ対応）がダウンロードできます。
</p>
</div>
<div>
<p>
books.Mdn.co.jp<br>
MDN<br>
エムディーエムコーポレーション
</p>
</div>
</fotter>
</body>
</html>
test1.css
@charset "utf-8";
:root{
font-size:10px;
}
body{
font-size:1rem;
}
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
font-size: 1rem;
box-sizing: border-box;
}
body{
border: 50px solid #ec5096;
padding: 4rem 2rem 0;
}
header{
border-bottom:1.5rem solid #ec5096;
}
.stamp{
position:absolute;
right: 2.3rem;
top: 2rem;
background-color:#0eb1ca;
border-radius:50%;
width:9rem;
height:9rem;
color:#fff;
}
.stamp p{
position:absolute;
top:0;
left:0;
transform:translate Y(50%);
text-align:center;
}
