１ スマホがターゲット
スマホで見やすいホームページをすることが重要（と思う）。パソコンの表示はどうでも良いくらい。スマホで見やすければパソコンで見にくいことはあまりない。アップロードする前に、ブラウザを使い、スマホでの表示を確認するようにする。
ホームページの内容（パソコンでの操作の説明等）により、パソコンの表示を優先する場合もアリと思う。
・初期表示のまま拡大縮小せず読めるようにする。
・写真サイズは自動調節で表示する。画面横幅におさまるように。
・見出しは改行しないように文字数と文字サイズを決める。
・ゴシック文字は、読みずらい場合が多い。特に文章は、避けるべき。
・文章は自動の改行機能を意識する。読みにくくならぬようにする。
・自動改行の為、段付けはとても見にくくなる。
・スマホの画面サイズは機種により様々なので、それを意識する。
１． ビューポート設定で スマホの画面に合わせる
<meta name="viewport" content="width=device-width, initial-scale=1.0">
②．CSSの設定
画像（写真）が無い場合は、３番目の@media が無いと横幅全て表示されるので文字が非常に小さくなる。
@media指定でテーブルの罫線が表示されない場合があった。 使う場合は、注意。
通常これをセットで使用すれば良い。
p {
font-family: HGP明朝B;
font-size: medium;
}
img{
max-width: 100%;
height: auto; /* 比を維持して高さ自動調整 */
}
/* スマートフォン */
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 15px;
}
③ 見出しと 段落の間が空きすぎる
例えば ｈ２ の見出しと 段落（ｐタグ）が空きすぎてバランスが悪い。
改善法方
・h2の下側のマージンをゼロ（又はほゞゼロ）にする。
・ｐの上側マージジンを少なめに（0.3em）程度にする。
詳細は、別途（後日）