スマホ対応についてはすでにホームでコメントしましたが、ホームページビルダーで作ったPC向けのサイトをスマホ向けに改修するにはメニューやテーブルの構成を作り直す必要があり、スマホ専用のサイトを作らないと困難であることがわかりました。そこで、現在のPC向けの画面をそのままスマホ向けにすることで妥協したのですが、その場合画面がスマホ画面の幅に縮小されますので、10ポイントの文字では小さすぎます。そこで、最低限の対策として、PC閲覧時は以前のままとし、スマホ閲覧時だけ、文字を大きく（実際には14ポイント）することにしました。まだ改修途上ですが、記憶が新たなうちにそのやり方を記録しておかないとすぐ忘れてしまいますし、同様な課題を抱えている方への一助になればと思い、ここにまとめました。もともとホームページビルダー頼りで、HTMLやCSSの知識はほとんどない者がネット情報を頼りにしたやり方ですので、よりスマートな方法をご存知ならば、是非ご指導ください。
　基本的なやり方はネットに多くの情報がありますが、「既存のホームページをレスポンシブスマホ対応する方法」と題する下記サイトがわかりやすく、これをベースにして、ここでのやり方との違いを書いていきます。 https://www.nedia.ne.jp/blog/tech/2015/12/22/6874

　ここでまず躓きました。記載内容は正しいのですが、今回やりたいことは、PC用に作ったホームページをそのままスマホの幅に表示することです。ところが、スマホ対応について説明しているサイトは、そのほとんどがこれと同じことが書いてあります。これを鵜呑みにしたことが間違いですが、これを詳しく説明しているのが、下記のサイトです。
https://willcloud.jp/knowhow/responsive_htmlmail/
　このサイトは「レスポンシブHTMLメールの作り方とは？」であり、今回の目的には直接関係ないのですが、viewportのことが詳しく書いてあります。これによれば、viewportとは、画面の表示領域のこと、つまりPCやスマートフォンの画面の中で、Webコンテンツが見えている部分のことです。viewportが未設定のページをスマートフォンで表示した場合、viewportのwidthは、OSの初期値（iOS：980px、Android：800px）に設定されるとあり、これでスマホ未対応の画面が両側に空白ができるのは納得です。

　このサイトの幅は760pxですので、iOSが980pxとすると、(980-760)/2=120pxづつ左右にスペースができることになります。左の写真はスマホ未対応の画面をi-phoneで表示したもので、左のメニュー欄の幅が150pxですから、確かに両側に120px程度空いています。
　これがわかれば対策は自明で、横幅を760pxにしてやれば、ぴったり収まります。ところがもう一つ問題があります。それは最後の"initial-scale=1"です。initial-scale=1（拡大率：等倍）とは、言い換えると「デバイスの横幅と等幅で表示しなさい」と言う変動値の設定です。この場合、viewportは、デバイスの横幅（i-phoneの場合は414px）と等しくなるため、横幅760pxのページは346px分がはみ出してしまうことになります。実際この問題が解決するまで、そのような状態でした。
結論としてviewportの設定は以下のようにすることで画面に収まります。
<meta name="viewport" content="width=760">

　これは上記の通りで問題ありませんが、viewportで横幅は760pxに設定していますので、max-widthが640pxのままですと、スマホの場合もmin-width:640と判断し、pc用のCSSが適用されてしまいます。少し余裕をみて、境界のサイズは780pxとしました。

　PCの場合に"print"とありますが、PC用のレイアウトで印刷するための記述で、今回は入れていません。また、また、スマートフォン用の方には"img"タグに関する記述があります。この部分はスマートフォン表示の際に画像が自動的に画面サイズにあわせて縮小表示されるようにする記述ですが、こちらもスマホの幅は760pxですので、不要です。

　一般にスマホ対応の場合、ここからが手間がかかる作業になります。実は当初はテーブルを縦に並べるやり方にチャレンジしたのですが、本サイトは全体のテーブルを定義し、その中にまた個々のテーブルを作っていますので、自由に組み替えることができず、この手法はあきらめました。
　以上が大きな流れですが、今回の改修では、ステップ３のPC用CSSとスマホ用CSSに文字の大きさの定義を入れる必要があります。ホームページビルダーはテキストの作成時に文字サイズと行間を指定しますが、それはHTML内に定義されます。従い、スマホ対応にするには、HTMLの記述から文字サイズと行間の指定を削除し、その部分にclass名を付けて、PC用とスマホ用のそれぞれのCSSに、それらを記述します。下記はHTMLとCSSの具体的内容ですが、HTMLにはpc_viewという名前のclassを追加しています。
【一例として「ホーム」の場合】
<TD width="567" height="312" class="pc_view"; style="color : #136f6f ;background-color :...

また、CSSは以下の通りです。
【PC用】
/*- themeid=hpb9tm10_10; --------------------------------*/
/*-------------------- body --------------------*/

@media screen and (min-width: 780px) {

.pc_view{
font-size:10pt;
line-height:16pt;
}
・・・

【スマホ用】
/*- themeid=hpb9tm10_10_sp; --------------------------------*/
/*-------------------- body --------------------*/

@media screen and (max-width: 780px) {

.pc_view{
font-size:14pt;
line-height:20pt;
}
・・・

これで完成ですが、予期しない問題が発生しました。スマホの表示は問題ないのですが、PCで見た時、何故か「ホーム」と「オーディオルーム」及び「DISC」のページは10ポイントで表示されるのですが、「オーディオシステム」と「コンサート」及び「オーディオ随想」のページのみ、どちらのCSSも適用されない状態になってしまいます。これらのページの違いを調べてもまったく見当がつきません。そこで念のため、普段使っているMicrosoft EdgeではなくGoogle Chromeでチェックしたら、すべてのページが問題なく10ポイントで表示されました。つまり、Edgeだけの問題であることが判明しました。
　この原因は未だに不明ですが、Edgeについて調べていたら「CSSメディアクエリーで Microsoft Edge を指定するコードを紹介します。」という記事が見つかり、渡りに船とそのまま使わせていただくことにしました。これは CSSにMicrosoft Edge での下記のスタイルを記述する方法です。
@supports (-ms-ime-align:auto) {
...(Microsoft Edgeで適用する スタイル)
}

　ただし、今回はHTMLに以下のCSSを追加し、PC用のCSSを、microsoft-edge.cssとして追加するだけでうまく行きました。とはいうものの、これだけでどうしてEdgeであることを判別できるのか謎ですし、あくまで対処療法に過ぎないのですが、とりあえずこのまま進めることにしました。
<link rel="stylesheet" href="microsoft-edge.css">

---

　スマホ対応でもう一つ不可解なことが起きましたので、追記しておきます。それはフォントのことですが、PCではゴシック体で表示されるのですが、スマホでは明朝体になってしまいます。例によってWebで調べたところ、CSSで"font-family : sans-serif"と指定すれば良いと書いてあります。早速やってみましたが、Google Chromeではちゃんとゴシックになりますが、safariは変わらず明朝のままです。
　そこで、更に調べると、ios（のsafari）でサイトを表示したときに、文字化けをするケースおよびフォントが明朝体で表示されてしまうケースが増えているそうで、safari特有の事象らしい。ならばということで、"font-family : sans-serif"をHTMLのbodyに記載したところ解決しました。もともとPCはゴシック表示でしたので、HTMLで記述しても影響はなく、これで進めることにしました。すでに、Edgeだけmin-widthを認識しない問題は報告済み（ちなみに同じMicrosoftのIEではOK）ですが、ブラウザには何かと振り回されます。
　 上記フォントに加えて、EdgeとsafariではCSSの一部が反映されないケースがありました。表の境界線をCSSで定義していて、それを変更すると、Chromeではそれが反映されますが、safariでは反映されません。またかということで、HTMLで定義して、ようやく反映されました。safariでも、CSSのすべてが無視されるわけではないので、優先度を設けているもかもしれません。それにしてもWebデザインの方々はこういうケースにどう対応しているのか知りたいものです。（2021年2月）

---

　この時はEdgeが反映されないのは、EdgeがCSSを認識していないためと思っていましたが、レスポンシブデザインへの移行を行った時に、これらの原因はEgdeのキャッシュにあることに気づきました。当時はEgdeの場合「設定」でキャッシュを消去しないと更新されないことに気づかず、今から思えば無駄な作業をしていたことになります。（2021年10月）

　　　 　　　　

• レコードコンサート
• 日本語対訳
• レスポンシブデザイン
• 電気工事士
• TVライブラリー
• コンテンツ編
• 2021-22のTV放映から