J. of Taroten

レスポンシブWebデザインについて (C5面:近況, 2017.2.13)

PC用にデザインされたウェブページをスマートフォンが表示しにくい

　PC用のウェブページを320 px程度の幅しかないスマートフォンで見ようとすると，PC用の横広画面を端末の画面に無理やり押し込んで表示するため，記事が見にくくなり，記事を拡大すると，携帯端末が嫌う横スクロールが生じる問題がありました。3割以上の方がウェブサイトを携帯端末で閲覧している時代を無視できず，このホームページも，スマートフォン対応をはじめることにしました。ただ，PC用と携帯端末用に2ファイル用意するのでは，管理の問題や検索サイトへの対応が悪化します。そこで，レスポンシブデザインという手法で対応することにしました。

端末のウインドウサイズにレスポンシブにウェブデザインを変える

　具体的には，これまでの固定されたTable組みによって，左にメニュー，右に本文と拘束された画面になっていたhtmlファイルを改め，携帯端末が表示しやすい縦に長い画面構成に書き換える一方，PCなど幅広画面をもった端末でアクセスしてきた人に対しては，htmlファイルとは別にブラウザに渡される書式設定のcssファイルがdiv領域ごとに位置をフロートさせ，画面ブロックを左右に振り分け表示します。様々な機種のパソコン，ブラウザ，スマートフォンでの見栄えを確認しながら，おおむねすべてのページのレスポンシブ化を概成しました。

横ウインドウ幅を320 px程度に狭くすると・・

　このページをPCで見ている人への見え方は以前と変わっていないと感じるでしょうが，横ウインドウ幅をスマートフォンのように320 px程度に狭くしたり，パソコンフル画面表示のように1024 px程度まで拡大したりしていただけると，途中で画面レイアウトが変わることに気付いていただけるかと思います。ただし，一部のIEの設定やバージョンで画面が正しく表示されない現象があることがわかりました。このうち，互換性表示に関わる問題は解決しました。スマートフォンでの見栄えについても確認した範囲では良好なようです。

企業サイト等で用いられている以下の過剰対応はしていません

　Retinaディスプレイといって，通常よりも高解像度の画質に対応した携帯端末やPCがあります。これらの機種でアクセスしてきた場合に細かい画像を渡すことも，レスポンシブWebデザインの要素技術ですが，高解像度画像を用意することは通信速度の低下以外に，人物が映っていた場合にプライバシー問題を生じるため，本ウェブサイトの画像のほとんどは横幅300 pxの画素で公開しています。また，reset.cssなどの過剰な設定をしていないため，見た目が端末によって多少変わるのを許容する代わりに，以下のように非常に簡明な短いファイルとなっており，混雑しているインターネット環境でも軽快な表示を可能としています。

htmlコードとcssコードを公開します

CSS(書式設定ファイル) 2段組みの場合に用いるtext1.cssを以下に示します。3段組み(右側に写真などを入れる)の場合には別のファイルtext0.cssを使用。

(↓ページ内表題の書式)
.title {  font-size: 28px; color: #399;
margin-top: 20px; margin-bottom: 10px;
padding-top: 5px; padding-bottom: 5px;
padding-left: 5px; border: #399 2px solid;
border-left-width: 10px}

(↓段落見出しの書式)
.subtitle {  font-size: 18px; color: #f60;
margin-top: 2px; margin-bottom: 2px;
width: auto; font-weight: bold;
padding-top: 2px; padding-right: 2px;
padding-bottom: 2px; line-height: 26px}

(↓本文の書式)
.main {  line-height: 150%;}

(↓横幅に関係のない書式設定)
#top_fig{background-color: #800;}
#top_navi{background-color: #fdd;}
#top_navi ul{list-style-type: none; overflow:hidden;}
#top_navi li{float:left; width:200px; margin-bottom: 9px; 
border-right:#fbb 1px solid; border-bottom: #fbb 1px solid;}
#top_navi a{display: block; text-align: center;}
#page_articles{background-color: #fee;}
#page_menu{background-color: #fdd;}
#page_menu ul{margin:0; padding:0;}
#page_menu ul li{line-height: 150%;
border: #333 1px solid; text-align:center;}
#page_articles img{max-width:100%;}
div#page_articles section#photo1 article
{width : 100%; text-align :center;}
#copyright{background-color: #ff8;}

(↓PCなど横広幅画面の場合の書式設定)
@media screen and (min-width: 700px) {
div#page_articles section#photo1 article
{width : 50%; float: left;}(←写真が多い記事で二段組にする設定)
div#page_articles section#photo1{overflow: hidden;}
#top_fig{width: 50%; float: left; background-color: #888;}
#top_navi{width: 50%; float: right;background-color: #fbb;}
(↑最上部のJ. of Tarotenと上部リンクの二段組)
#page_topic{width:100%; clear:both;}
(↑本文タイトル行の横通し表示)
#page_articles{width: 72%; float: right; background-color: #fee;}
#page_menu{width: 25%; float: left; background-color: #fdd;}
(↑本文を右に，カテゴリーリンクを左に二段組)
#copyright{width:100%; clear:both; background-color: #ff8;}
(↑copyrightを横通し表示)}

HTML(ページごとのファイル)

<!DOCTYPE html>
<html lang="ja">
<head>
<title>(ウインドーに表示のページのタイトル)</title>
<meta charset="Shift_JIS">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="text1.css">
(↑上三行がレスポンシブデザインでは必要になります)
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
  <div id="wrap">
    <div id="top_bar">
      <div id="top_fig">
        <img src="img/tarot_title.gif" alt="J. of Taroten">
      </div>
      <div id="top_navi">
        <ul>
          <li><a href="sendmail/index.html">
             感想・苦情・削除依頼</a></li>
          <li><a href="http://xx.xx.xx.xx">研究室公式ページ</a></li>
          <li><a href="taroten.html">編集長から</a></li>
          <li><a href = "yourvoi.html">投稿規定</a></li>
        </ul>
      </div>
    </div>
    <div id="page_topic">
      <h1 class = "title">ページ内に表示のページのタイトル</h1>
    </div>
    <div id="page_articles">
      <h2 class="subtitle">(段落ごとのタイトルその1)</h2>
      <p class = "main">
      　(本文その1)
      </p>
      <h2 class="subtitle">(段落ごとのタイトルその2)</h2>
      <p class = "main">
      　(本文その2)
      </p>
    </div>
    <div id="page_menu">
      <ul>
        <li><a href="index.html">最新コンテンツ</a></li>
        <li><a href="c1.html">C1旅行・出張</a></li>
        <li><a href="c2.html">C2環境衛生工学</a></li>
        <li><a href="c3.html">C3研究者の生態</a></li>
        <li><a href="c4.html">C4大学教育</a></li>
        <li><a href="c5.html">C5近況</a></li>
        <li><a href="c6.html">C6書評</a></li>
        <li><a href="c7.html">C7国家公務員Ⅰ種試験</a></li>
        <li><a href="c8.html">C8鉄道趣味</a></li>
        <li><a href="taroten.html">編集長から</a></li>
        <li><a href = "yourvoi.html">投稿規定</a></li>
      </ul>
    </div>
    <div id="copyright">
      <p align="right"><a href="xx.html">前に戻る</a>
        <a href="xx.html">次に進む </a></p>
      <p align="right"><a href="index.html">
     「たろてんの独り言」のTopページへ戻る</a></p>
      <p align="right">(C)2000-2017 <i>J. of Taroten</i>.
        Edited by Taroten</p>
    </div>
  </div>
</body>
</html>