riquidデザイン　スマホ用

HTML CSS

今回はスマートフォンやタブレットで見ても
レイアウトが崩れない記述です。

ソースを記述していきます。


【HTML】

<body>
  <header>
    <h1>見出し</h1>
  </header>
  
  <article id="first">
    <p>文章が続きます。</p>

    <p class="hane"><img src="img/hane01.png" width="150" height="83" alt=""></p>
  </article>
  
  <figure id="up"><!-- 図解 -->
    <ul>
      <li><img src="＃" alt=""></li>
      <li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
      <li><img src="＃" alt=""></li>
      <li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
　　　<li><img src="＃" alt=""></li>
    </ul>
  </figure>
  
  <article id="second">
    <section class="position">  <!-- 章 -->
      <h2>見出し2</h2>
      <p>文章が続きます。</p>
    </section>
    
    <section class="transition">
      <h2>見出し2</h2>
      <p>文章が続きます。</p>
    </section>
  </article>

  <footer>
    <small>Copyright &copy; 2013 All Rights Reserved.</small>
  </footer>
</body>

【CSS】

body {
background-color: #D2DBE8;
}

header {
position: fixed;
width: 100%;
text-align: center;
height: 48px;
line-height: 48px;
opacity: 0.9;
background-color: #D2DBE8;
}

h1 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
color: #FFF;
margin-bottom: 10px;
}

article#first {
font-size: 12px;
text-align: center;
line-height: 1.5;
padding-top: 50px;
}

article#first p.hane {
width: 150px;
height: 83px;
margin:10px auto 20px;
}

figure {
width: 100%;
margin: 0;
padding: 0;
}

figure ul {
width: 100%;
overflow: hidden;
}

figure ul li {
float: left;
width: 25%; /* 画像を4つ横に並べたいから */
height: 25%;
padding: 0;
vertical-align: bottom; /* 隙間が出来ないように */
}

figure ul li img {
display: block; /* widthを指定したいから */
width: 100%;
height: auto;
}

article#second section h2 {
margin-bottom: 5px;
font-size: 16px;
}

article#second {
padding: 30px 0 30px 30px;
text-align: left;
margin: 0 auto 60px;
background-color: #000000;
overflow: hidden;
}

article#second section.position {
float: left;
max-width: 400px;
margin-right: 30px;
margin-bottom: 10px;
color: #ffffff;
font-size: 12px;
line-height: 1.5;
}

article#second section.transition {
float: left;
max-width: 400px;
margin-right: 30px;
margin-bottom: 10px; /* footerに入り込まないようにする為、大きめに取る事も */
color: #ffffff;
font-size: 12px;
line-height: 1.5;
}

footer {
position: fixed;
bottom: 0;
left: 0;
padding: 12px 0;
width: 100%;
text-align: center;
font-size: 12px;
line-height: 1.1;
opacity: 0.9;
background-color: #D2DBE8;
}

まぁ、画像の大きさなどによって数値は変更してください。

これで並んでいる画像も見ているデバイスによって
大きさが変更されて見易い作りになっています。