Web ページをスマートフォンに合わせてみる

Android や iOS のスマートフォンやタブレット、携帯端末は色々あります。 スマートフォンで Web ページを見るときに、大きすぎるページが縮小されたり、右や横に動いたり、指でリンクをタッチしずらかったり、色々と使いづらいところがあるものです。 もともと PC 画面での閲覧を前提にしているのでしかたありません。 プロバイダーの Blog とか、Google Site や Jimdo などの無料 Web サービスだと、スマートフォンでも見やすいように表示を変えたり、色々配慮されているようです。 しかし、昔ながらの 手打ちの html なので、そんなことが勝手にされるはずもなく、何とか見やすくなるように色々と手を加えてみた。

1. ページ幅を画面幅にする

閲覧しているデバイス（スマートフォンとかタブレットとか）の画面幅に合わせてページが表示されるようにする。

例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 大きい画像を画面に合わせる

画像の幅を画面幅以内に収めるため、下記のスタイル設定を追加する。 height を 「auto」にしておくと、画像高さをオリジナルの画像の比率で画像幅に合わせて調整してくれる。 

<style type="text/css">
img { 
    max-width: 100%; 
    height:auto;
}
</style>

これは画面上の img 全般に適用される。 もし、アフィリエイトとかで、 

<img border=0 width=1 height=1....>

といった隠し画像がある場合は、これも大きさを変えられてしまう。 普段は見えないはずですが、マウスカーソルを画像に乗せた場合に大きな画像表示する（span、hover などのスタイル）場合、この画像も大きくなって表示される（たぶん画像は白紙）。 このときは、 

<style type="text/css">
    .size_img {
    max-width: 100%; 
    height:auto;
}
</style>

とかを定義して、関係する 画像の img タグに直接定義する。 

<IMG alt=...... class="size_img">

3. <pre> で指定された行を折り返すようにする

ソースコードなどをそのまま記載する場合、<pre>〜</pre> で記載したりします。 このとき、ソースコードの文字列が画面に収まらないと、画面が横にずれたり、ページの表示が縮小されたりします。

例 
(defun c:ObjMoveZero()
    (setq ensel (car (entsel 
    xxxxxxxxxx
    (princ)
)

この場合、スタイルで、pre の行折り返しなどを指定しておけば、画面がずれない。 ついでにフォントのサイズも調整しておくと良い。 

<style type="text/css">
pre {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: small;
}
</style>

4. ul、ol、li をリンクに活用する

普通、<a href>〜</a> のリンクはテキストに下線で表示されます。 これでは指先で押しづらい。 li といったリスト行をそのまま <a href>〜</a> のブロックにできれば、スマートフォンの狭い画面でも指先クリックがしやすくなる。 そんなスタイル設定があるんですね。

例えば、上のリンクは、<ul><li><a href>〜</a></li></ul> で書かれていて、スタイルシートでリスト全体をクリックできるようにしています。 クリックしやすくするため、line-height を 200% にしています。 

<style type="text/css">
xxxx li { 
    margin:0px 0px 0px 10px;
    padding:0px 0px;
    list-style-type : none; 
    line-height: 200%;
}
</style>

スタイル無しなら、以下のような表示になります。でも、これだけリンクされた文字列が長いとブロック化とあまり変わらないか・・・

5. 参考：「トップに戻る」について

よく「戻る」ボタンでは、 

<a href="sample.htm">XXXXX</a>
<a href="javascript:history.back();">XXXXX</a>

上記のようにページ名を指定したり、javascript を書いたりしていました。

html5 では、以下のような書き方もできるらしいです。 

<a href="#top">このページのトップに戻る</a>

ただし、リンク先などの固有ID として "top" を使っていると、そこに飛んでしまうらしい。 その辺りを注意したら、シンプルで使いまわししやすい記述方法ではないでしょうか。

6. 参考：id の使い方

id と class の使い方を混同してしまっていたときがあります。

id はページ内で重複しない。<a></a> のリンク先としても使うを考えると当然のことです。スタイルのつもりで使うとたくさん出現してしまう。 書いてしまったときは、ちょっと恥ずかしかった。

7. 参考：ページ内のリンク名

ページ内の見出しなとにリンク名を付けるとき、よく使っていた書き方が <a>〜</a> です。 たとえば見出し h4 にリンク名を付ける時は下記のようでしょうか。 

<h4><a name="リンク名">XXXXXX</a></h4>
<h4><a id="リンク名">XXXXXX</a></h4>

name にしろ id にしろ、<a></a> で使っていましたが、html5 では id の属性を <a></a> 意外でも使える。 見出し h4 の場合は下記のようになる。 

<h4 id="リンク名">XXXXXX</h4>

これは記述も省略できて楽です。 ただし指定する id（リンク名）は、大文字で英字から始まるのが良いらしい。

8. 参考：タグの入れ子について

文書を書く時のタグにも順番があります。 例えば、<p> の下に <ul> は書けません。 こんな風に書いては恥ずかしい。 

<p>
  <ul>
    <li></li>
    <li></li>
  </ul>
</p>

<li> の下に <p> を書くのは良い。 

<ul>
  <li>
    <p></p>
  </li>
  <li>
    <p></p>
  </li>
</ul>

間違ったのを発見して赤面していまいます。 今は学校の授業で html も習うんでしょうか。 ああ恥ずかしい・・・

スマートフォンを考えたとき、上記の他に <table>〜</table> が使われていれば、それを <div>〜</div> にするなど考えた方が良いようです。

スマートフォンのために PC とは別に書き足さなければならないかと思いましたが、画像や文だけの簡単な表示であれば、Jquery などを使わずスタイルシートで対応できることが多く、助かりました。

手直しのついでに、新しく書くところは、なるべく html5 とか、新しい仕様に合わせた方が良いんでしょう。 誰に html ソースを覗かれるかわかりませんから。

光回線

ＧＭＯインターネット株式会社【GMOとくとくBB】ドコモ光

株式会社アウンカンパニー【ソフトバンク光キャンペーン】

サーバー・ドメイン

「ロリポップ！」レンタルサーバー

「ムームードメイン」独自ドメイン

低コストで簡単、プロのようなホームページ作成「グーペ」

「ヘテムル」レンタルサーバー

ページトップに戻る

※本ページのイラスト・イメージは、プリントアウトファクトリー様 (https://www.printout.jp/) のクリップアートを使用しています。

Copyright(c) 有限会社 岡田電工 Okada Denko Ltd. All Rights Reserved.

HP開設 2003年
2016年5月
2016年6月