web log / パソコンサイトをモバイルに変換する方法

現在公式サイトのスマホ表示を改良中です。といってもリニューアルではありません。スマホでちゃんと表示されるように改良しています※完全ではありません(笑)。

これに伴い、参考となるサイトなどをウェヴログ(web log)として当ブログ上にのこします。旅行先での宿泊を検討されて当ブログをご覧になられた方が「えっ！？」と思われる内容かもしれませんが、予めご了承ください。

暫く、本来のブログ(web log)の使い方をするとのお知らせでした。

大山は6月は閑散期。赤いりぼんは5月ゴールデンウイーク明けから6月2週目まで改修工事をおこないました。でその後は、、、閑散期です(笑)。お陰様で外仕事や事務仕事がはかどります(苦笑い)。こんにちは。大山でペンションを営むオーナー(2代目)です。さて今日のブ...

blog.akairibon.net

2024-06-24 23:59

パソコンサイトをモバイルサイトレスポンシブフリーに変換する方法

パソコンサイトをモバイルサイト(レスポンシブフリー)に変換する方法

パソコンサイトをモバイルサイトレスポンシブフリーに変換する方法

<font>タグや他のインラインHTML要素の代わりにCSSを使うことを検討する。
ページの横幅が広すぎるとしたら、広すぎるHTML要素がおそらく原因になっている。フロートやリサイズするCSSとともにHTMLを使用したほうがいい。についてはCSSの配信最適化についてはPageSpeed Insightsのページを見るといい。
固定ピクセル幅のwidthをすべて取り除き（例: <table width=”600″>）、相対幅のwidth（例: <table width=”80%”>）か最大幅のwidth（例: <table style=”max-width:600px;”>）またはメディアクエリを使用したレスポンシブな幅にする。
スタイルシートにimg { max-width:100% }を追加する。これは横幅が広い画像を処理しやすくする方法で、横幅が広い画像をすべてデバイスの幅に収まるように縮小してくれる。
ページのレイアウト整えるために<table>タグを使うことを避ける。<table>は本当のテーブル（表）だけに使うようにする。<table>でのレイアウトをすでに使っているなら、PCでも適切にレンダリングされるように、divタグとCSSのフロート/インラインブロックにまず最初に変換する。その次に、レスポンシブにするためにメディアクエリを追加する。レスポンシブレイアウトを作成するための詳細と例は、Web Fundamentals レスポンシブウェブデザインの基礎とレスポンシブウェブデザインのパターンを参照。
幅が広いテーブル（3～4列以上）を避ける。モバイルのスクリーンには入りきらない。そうしたテーブルをすでにを使っているなら、修正するか（例: 数式や行列の項目を移項する）、またはテーブルなしのスタイル（例: <dl>）に変換することを推奨する
<pre>タグはページ幅をさらに広くしてしまうことがよくあるので、可能であれば取り除く。方法は次のタグのコンテンツに依存する。
・テキストのフォーマットには、CSSのmargin・padding・text-indentなどを使う
・テーブルには、<table>タグを使う。先に説明した横幅が広いテーブルに対する指示も参照すること
・固定幅のフォントには、CSSの font-family:monospace を使う
・空白のスペースを本当に確保する必要があるときは（たとえばコンピュータのコード）、<pre>タグを使っても構わないが、preのボックスのなかで横方向のスクロールができるように style=”overflow:auto;” を追加する