HTML5+CSS3【マルチデバイス】―Fluid Image

HTML5 授業



Fluid Image


  • Fluid Imageとは、ウィンドウサイズに合わせて画像サイズも可変させる手法



Fluid Imageのデモ

ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Fulid Image</title>
<link rel="stylesheet" href="css/style130.css">

<!-- HTML5のIE対策 -->
<!--[if ite IE 9]>
<script src="http://html5shiv.googlecode.com/svn/ttunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

</head>
<body>

<header>
<h1>Flued Image</h1>
</header><!-- ▲/ header -->

<section>
<!-- 1600pxの画像を用意 -->
<figure><img src="img2/01.jpg" alt=""></figure>
<figure><img src="img2/02.jpg" alt=""></figure>
<figure><img src="img2/03.jpg" alt=""></figure>
</section><!-- ▲/ section -->

<footer>
<small>&copy; Fulid Image</small>
</footer><!-- ▲/ footer -->

</body>
</html>


ソースコード【 CSS 】

@charset "UTF-8";

header,figure,footer,section {
display: block;
margin: 0;
padding: 0;
}

body {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
text-align: center:
font-family: Verdana, Geneva, sans-serif;
}

header {
color: #fff;
background-color: #290033;
}

header h1 {
font-size: 1.6em;
padding: 0.4em 0;
margin: 0 0 0.2em 0;
}

footer {
width: 100%;
}

img {
max-width: 100%;
heght: auto;
margin: 0 0 5px 0;
padding: 0;
vertical-align: bottom;
border: 0;
}


ブラウザで表示【 Chrome 】

  • 各デバイスサイズでのディスプレイ幅に表示される







HTML5 Outliner【 Chrome 】