スマホ向けに Apache2 デフォルトページのサイズを変更

先週インストールした Apache2 ウェブサーバに関連しての作業になります。

まず、デフォルトページの HTML ファイル
/var/www/html/index.html
を書き換えると、表示される内容がそのとおりに変更されることを確認しました

その書き換えの内容ですが、デフォルトのページ

Apache2 Ubuntu Default Page

をスマホで見やすくするための整形に挑戦しました。

まず、スマホでデフォルトのままのページをアクセスするとこんな感じです。

これを整形してこんな感じにできました。

スクリーンショットでは違いが分かりにくいですね

デフォルトで不便なことはページの幅が広いことです

右にスクロールしないと現れない情報があったり、あるいは、全体表示されると文字が小さくなりすぎます。

整形後にはちゃんと読めている

Apache2 Ubuntu Default Page
It Works!

が、整形前は右側にずれて見えなくなっているのが分かるかと思います。

整形のため修正した index.html について、修正の前後での diff は以下の通りです。

①

10a11
> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

②

32c33
< width: 800px;
---
> width: device-width;

③

67a69,78
> div.page_header2 {
> background-color: #F5F6F7;
> font-size: 150%;
> font-weight: bold;
> margin-top: 20px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 5px;
> }
>

④

195c206
< <div class="page_header floating_element">
---
> <div class="page_header">

⑤

197,199d207
< <span class="floating_element">
< Apache2 Ubuntu Default Page
< </span>

⑥

218a227,229
> <div class="page_header2">
> Apache2 Ubuntu Default Page
> </div>

各変更内容についてのメモです。

まず、ページ幅をスマホ用に設定しているのが下記の２箇所で、これがメインです

① 10a11
② 32c33

しかし、この設定だけでは、１行目の

Apache2 Ubuntu Default Page

が何故か見えなくなってしまいました。
これをなんとか見えるように対策したのが、残りの変更です。

記述順が前後しますが、
⑤ 197,199d207
⑥ 218a227,229
は、見えなくなってしまった

Apache2 Ubuntu Default Page

を記載している div 要素を、新規の div 要素⑥へ移動しています。

移動元の div 要素については、
④ 195c206
にあるように、floating_element の指定を削除しています。これを削除しないと、移動先新規のdiv要素でマージンをピクセルで指定する際に、それが本文先頭からになってしまい不便でした。

移動先となる新規の div 要素では、"page_header2" という新しい定義を使っていて、
③ 67a69,78
でそれを定義しています。

HTML は全くの素人ですが、以下のサイトを参考に見様見真似で上記の変更にたどり着きました。

初めてスマートフォン専用ページを作成する際に知っておきたいポイント

The Viewport Metatag (Mobile Web Part 1)

spanタグ

スタイルシート1 - スタイル設定の方法

とほほのスタイルシート入門

あとは、どこで調べたか忘れましたが、HTML のコメントは下記のように書きます。