スマホ用のスタイルシートは、写真がスマホの画面のサイズから飛び出さないようにする必要があります。「横向き写真」「縦向き写真」といろいろありますが・・・。なんとこれだけで自動で解決。しかもスマホの種類すら関係なく機能します（・・；
まずは HTML ページのヘッダーの場所へこれを記述。毎回コピペで問題なし。
<link media=”only screen and (max-device-width: 480px)” href=”それぞれのパス/css/sumafo-test.css” type=”text/css” rel=”stylesheet”>
この例では、sumafo-test.css という外部置き用のスタイルシートファイルに、以下の内容が単純なテキストファイルで記述されています（文字コードは utf-8。他の文字コードでもたいていは問題ないけど utf-8 のがおすすめ）
img{
max-width: 95%; ←これ！横のサイズは上限が95％だよ〜と記述する
height: auto; ←スマホに限らず、HTMLやCSSでは height(高さ)はいじらないほうがいいです。バグりやすい
display: inline-block; ←説明すると長いので「ブロック表示モードにおいてインライン表示する」という意味
padding: 1rem 0rem;
text-align: center; ←これがないと写真が画面の中央に表示されずに、たぶん左端によったりします
}
あ、それと「これだと簡単にレスポンシブ（リキッド）な表示自体はできるけども、スマホ向けにもでかい写真サイズをそのままに表示しているのでは？」という疑問は正しいです。めんどうなので対応しません。小さめの写真サイズを用意し「small」などのフォルダに分岐させて表示することもできるけど、めんどうすぎてやってられないから、うちではやりません（・・；
イメージ的には「レティーナ画像の記述方法」の逆向きみたいなもので、HTML5（ほぼ全てのブラウザで対応してるはず） でサポートされている「img」タグへの追加の記述方法で対応できます。これは画面（ディスプレイ）のサイズに合わせて、対応するサイズの写真を表示するもので、HTMLへ直接に記述できるものです。スクリプトなどをブロックしていても、HTML5 はただの HTML なのでほぼ常に機能します。
次の記事でタブレットで見たときの感じをアップします。
br
br
コメント