考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。

レスポンシブデザイン 第3回

固定レイアウトによるレスポンシブデザイン

今回は固定レイアウトによるレスポンシブデザインを学習する。

  • 横幅980px
    f:id:ys_nim_9:20141126003047j:plain
  • 横幅800px
    f:id:ys_nim_9:20141126003053j:plain
  • 横幅320px
    f:id:ys_nim_9:20141126003056j:plain

固定レイアウトの特徴

固定レイアウトでは、指定したpxの範囲であれば表示に一意性が付与される。このため可変レイアウトよりもデザインの崩れが起こりにくい。一方、想定外の画面サイズを持つデバイスが世に多く出回ってしまった場合、ソースを修正する必要に迫られる可能性が考えられる。

html記述 head部

css前回と同様に3つ用意し、htmlでvierportとブレークポイントを指定したcssのlinkを記述する。

<meta charset="utf-8">
<title>Pickup Stream2</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style-l.css">
<link rel="stylesheet" href="style-m.css" media="only screen and (min-width:640px) and (max-width:979px)">
<link rel="stylesheet" href="style-s.css" media="only screen and (max-width:639px)">
<link href='http://fonts.googleapis.com/css?family=Maven+Pro:900,400' rel='stylesheet' type='text/css'>

html記述 body部

bodyは下記のとおり。

<body>
<div id="container">

<header id="header">
<div id="site"><!--サイト名 -->
<h1><img src="img/logo.png" alt="PICKUP STREAM"></h1>
</div>

<!-- ナビゲーションメニュー -->
<nav id="nav">
<ul>
<li><a href="url">HOME</a></li>
<li><a href="url">CATEGORY</a></li>
<li><a href="url">ABOUT</a></li>
<li><a href="url">CONTACT</a></li>
</ul>
</nav>
</header>

<div id="headerpost"><!--ヘッダー記事-->
<img src="img/basket.jpg" alt="*" width="620" height="465">
<section id="lead">
<h2>買い物に出掛けよう</h2>
<p>隣町に新しくできたショッピングセンターには楽しいお店がたくさんあります。1か所にまとまっているので、たくさん歩き回る必要もなく、楽々とお買い物ができておすすめです。</p>
<time datetime="2012-08-03" class="date">2012年8月3日</time>
<p class="more"><a href="url">MORE</a></p>
</section>
</div>

<div id="content">

<section class="post">
<a href="url">
<img src="img/windmill_thumb.jpg" alt="*">
<h2>風車と風の関係</h2>
<p>風車は風を受けて回転します。このとき、効率よく風を受けるためには、風上に向かって真正面をむかなければなりません…</p>
<time datetime="2012-08-01" class="date">2012年8月1日</time>
<p class="more_s">MORE</p>
</a>
</section>

<section class="post">
<a href="url">
<img src="img/leaf_thumb.jpg" alt="*">
<h2>ツルを伸ばしてどこまでも</h2>
<p>ツル植物は太い木の幹に巻きつき、どんどんとツルを伸ばしていきます。太陽の当たる方向に葉をつけ、枝を伸ばしていく…</p>
<time datetime="2012-07-28" class="date">2012年7月28日</time>
<p class="more_s">MORE</p>
</a>
</section>

<section class="post">
<a href="url">
<img src="img/sand_thumb.jpg" alt="*">
<h2>海岸のデコレーション</h2>
<p>海岸には砂や貝殻しかないように思ってしまいますが、よく見ると草花も生えていることがわかります。ただし、海水や潮風…</p>
<time datetime="2012-07-20" class="date">2012年7月20日</time>
<p class="more_s">MORE</p>
</a>
</section>

<section class="post">
<a href="url">
<img src="img/flower_thumb.jpg" alt="*">
<h2>色とりどりの絨毯</h2>
<p>原生花園では今年も色とりどりの花が咲いています。特に今年は原色の色鮮やかな花がたくさん咲いていますので、週末には…</p>
<time datetime="2012-07-05" class="date">2012年7月5日</time>
<p class="more_s">MORE</p>
</a>
</section>

</div> <!--#content-->

<footer id="footer">
<p>PICKUPxSTREAM</p><!-- サイト名 -->

<div id="iconmenu">
<ul>
<li><a href="url"><img src="img/twitter.png" alt="Twitter"></a></li>
<li><a href="url"><img src="img/facebook.png" alt="Facebook"></a></li>
<li><a href="url"><img src="img/googleplus.png" alt="Google Plus"></a></li>
<li><a href="url"><img src="img/rss.png" alt="RSS Feed"></a></li>
</ul>
</div>

<div id="submenu">
<ul>
<li><a href="url">Privacy Policy</a></li>
<li><a href="url">Terms of Use</a></li>
<li><a href="url">Contact</a></li>
</ul>
</div>

</footer> <!-- #footer -->
</div> <!-- #container -->
</body>

css記述 PC用表示および共通部

style-l.cssの記述は下記のとおりである。

body{
  margin: 24px 10px;
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
#container{
  width: 960px;
  margin: auto;
}
#header{
  margin-bottom: 10px;
}
#headerpost{
  margin-bottom: 30px;
}
#content{
  margin-bottom: 30px;
}

/*コンテンツ部分の記事のレイアウト*/
#content{
  overflow: hidden;
}
#content   .post{
  float: left;
  width: 216px;
  margin-right: 32px;
  margin-bottom: 25px;
}
#content   .post:last-child{
  margin-right: 0;
}
.post + .post + .post + .post{
  margin-right: 0;
}

/*コンテンツ*/

/* サムネイル画像 */
.post img{
  width: 216px;
  height: auto;
  vertical-align: bottom;
  border: none;
}

/* 記事のタイトルと文章 */
.post h2{
  font-size: 16px;
  margin: 5px 0 0;
}
.post p{
  font-size: 12px;
  margin: 10px 0;
}

/* 投稿日 */
time.date{
  float: left;
  margin: 0;
  font-size: 16px;
}

/* 続きを読むボタン */
.post .more_s{
  float: right;
  color: #ffffff;
  font-size: 14px;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  background-color: #666666;
  background-image: url(img/more_small.png);
  background-repeat: no-repeat;
  background-position: 94% 50%;
  padding: 3px 25px 3px 5px;
  margin: 0;
}

/* リンク */
.post a{
  color: #000000;
  text-decoration: none;
  display: block;
  overflow: hidden;
}
.post a:hover{
  background-color: #cfffb2;
}

/*ヘッダー*/

/* サイト名 */
#site{
  float: left;
}
#site h1{
  margin: 0;
}
#site img{
  vertical-align: bottom;
}

/* ナビゲーションメニュー */
#nav{
  float: right;
  font-size: 22px;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  padding-top: 30px;
}
#nav ul{
  margin: 0;
  padding: 0;
}
#nav li{
  list-style-type: none;
  float: left;
}
#nav li a{
  display: block;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  border-bottom: solid 5px transparent;
  color: #000000;
}
#nav li a:hover{
  border-bottom-color: #ff1e97;
}
#header{
  overflow: hidden;
}

/*ヘッダー記事*/

/* 記事の画像 */
#headerpost img{
  float: left;
  vertical-align: bottom;
}

/* 記事のタイトルや文章 */
#headerpost #lead{
  float: left;
  width: 300px;
  color: #ffffff;
  margin-left: 25px;
  overflow: hidden;
}

#headerpost h2{
  margin: 20px 0;
}
#headerpost .more{
  font-size: 18px;
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  text-align: right;
}
#headerpost .more a{
  color: #ffffff;
  background-image: url(img/more.png);
  background-repeat: no-repeat;
  background-position: right center;
  display: block;
  padding: 10px 40px 10px 0;
  text-decoration: none;
}

/* 背景 */
#headerpost{
  background-color: #333333;
  background: -webkit-gradient(linear,left top, left bottom, from(#000000), to(#888888));
  background: -webkit-linear-gradient(#000000 0%, #888888 100%);
  background: -moz-linear-gradient(#000000 0%, #888888 100%);
  background: -o-linear-gradient(#000000 0%, #888888 100%);
  background: -ms-linear-gradient(#000000 0%, #888888 100%);
  background: linear-gradient(#000000 0%, #888888 100%);
  overflow: hidden;
}

/*フッター*/

footer#footer{
  font-family: 'Maven Pro', Helvetica, Arial, sans-serif;
  color: #ffffff;
  background-color: #333333;
  padding: 10px 10px 20px;
  overflow:hidden;
}

/* サイト名 */
#footer p{
  float: left;
  margin: 0;
}

/* アイコンメニュー */
#iconmenu{
  float: right;
}
#iconmenu ul{
  margin: 0;
  padding: 3px 0 0;
}
#iconmenu li{
  display: inline;
  list-style-type: none;
}
#iconmenu img{
  border: none;
}

/* サブメニュー */
#submenu{
  clear: both;
}
#submenu ul{
  margin: 10px 0;
  padding: 3px 0 0;
  font-size: 12px;
}
#submenu li{
  display: inline;
  list-style-type: none;
}
#submenu a{
  color: #ff1e97;
  font-weight: bold;
  border-right: solid 1px #ffffff;
  padding-right: 6px;
  margin-right: 3px;
  text-decoration: none;
}
#submenu li:last-child a{
  border: none;
}
#submenu li + li + li a{
  border: none;
}

/* コピーライト */
small{
  font-size: 12px;
  font-weight: bold;
  display: block;
}

css記述 タブレット

タブレット用のstyle-m.cssの記述は下記のとおり。前回(可変レイアウトでの制作)のでこのサイズのcssは、メイン記事とサイドバーの幅を百分率で取ったが、固定レイアウトではpxでの指定となる点が主な相違箇所だ。その他の変更はデザイン性の向上を意図している。

#container{
  width:620px;
}
#content .post{
  width:300px;
  margin-right:20px;
}
#content .post:nth-child(even){
  margin-right:0;
}
.post img{
  width:300px;
}
.post h2{
  font-size:22px;
}
.post p{
  font-size:16px;
}
.post .more_s{
  font-size:18px;
}

/*ナビを2段に*/
#nav{
  padding-top:0;
}
#nav li:nth-child(2){
  float:none;
  overflow:hidden;
}

/*トップ記事にpを重ねる*/
#headerpost{
  position:relative;
}
#headerpost img{
  float:none;
}
#headerpost #lead{
  float:none;
  position:absolute;
  left:0;
  bottom:0;
  background-color:rgba(0,0,0,0.7);
  width:auto;
  padding:10px 20px;
  margin:0;
}

#headerpost h2{
  font-size:20px;
  margin:10px 0 10px 0;
}

#headerpost p{
  font-size:14px;
  margin:0 0 20px 0;
}

css記述 スマートフォン

スマートフォン向けのレイアウトでも、百分率指定がpx指定となっている。

#container{
  width:300px;
}
#content .post{
  float:none;
  width:300px;
  margin-right:0;
}
.post img{
  width:300px;
}
.post h2{
  font-size:22px;
}
.post p{
  font-size:16px;
}
.post .more_s{
  font-size:18px;
}

/*ロゴ、ナビを小さく*/
#site{
  float:none;
}
#site img{
  width:300px;
  height:auto;
}

#nav{
  float:none;
  font-size:14px;
  padding-top:6px;
}
#nav ul li a{
  margin-left:0;
  margin-right:10px;
}

/*トップ記事の位置を画像の下に*/
#headerpost img{
  float:none;
  width:300px;
  height:auto;
}
#headerpost #lead{
  float:none;
  background-color:#252525;
  width:auto;
  padding:10px 10px;
  margin:0;
}
#headerpost h2{
  font-size:20px;
  margin:10px 0 10px 0;
}
#headerpost p{
  font-size:14px;
  margin:0 0 20px 0;
}

感想

表示デバイスの進化や大型化は続いている。曲面ディスプレイのスマートフォンが発売されたり、最近ではGaraxyがNoteEdgeという画面右手にシームレスな細長い別ディスプレイを備えた製品を発売した。また、あのiPhonでさえ画面を大型化しているといった状況で、おそらく戻すことはないであろう。
確率は低いが、そう遠くない将来ブレークポイントの見直しがあるかも知れない。そうした場合考えられるのは、固定レイアウトで作られた既存のスマートフォン対応サイトの手直し業務の大量発生だ。densityを活用している以上、そうすぐには考えられないものの、densityが何らかの技術的足枷として残留しているとみなされれば可能性がゼロではない。
技術の進歩は概ね工数を削減する方向性を持つ。その一方、古くなった技術が需要を生む場合もあり、そうした視点もWeb業界で生きていくためには有用と思われる。