iPad Pro というタブレットの横画面表示と縦画面表示。うちの写真はウェブ向け写真の横サイズ（1000〜1400）で、縦サイズ（800〜1200）になってます。なのでそれを基本に話を書いてます。あと、うちは写真を「P(パラグラフ)の中にはあえて置かないで、直接に記述するようにしています。
横（写真は縦）
縦画面（写真は縦）
横（写真は縦）
縦画面（写真は縦）
スマホをブログ目的で横方向に持つ人はほとんどいないので、あたしはそれは無視してます。一方、タブレットは横持ちと縦持ちが考えられるので、一応は縦持ちにも対応。やってみるとわかるんだけど、タブレットの縦持ちに対する写真のサイズは結構めんどい。そこであたしは、HTMLページのヘッダーにこのように書いています。
/* 画面サイズが768pxから1024pxまではここを読み込む */
@media screen and (min-width:768px) and ( max-width:1024px) {
p{
display: inline-block;
text-align: left;
width :85%; /* これはPタグの親要素となっているものに対して85％という大きさ*/
/* デバッグ用色づけモード background: darkblue; */
}
/* 2022-8-28 追加。画像のサイズによりページごとに異なってしまう。このページは画像がでかい*/
img.tate{
width: 50%;
}
ここで重要なのは、タブレットの画面の横サイズに対して、写真の横サイズを50％にするという記述。これにより、タブレットの種類や機種が変わっても動的に変化して表示できます。ただし、写真の横サイズを基準として、そのまま縦サイズも比率で変更するので、あまりにも縦方向に長い写真だとはみだします。その場合には「width: 40%;」などとやってみてください。
あ！大切なことを追記。えと、「img」とはイメージタグのことで写真挿入につかいます。でもここでは「img.tate」となっています。この「.tate」とは「独自につくった tate という「クラス」のことで、「写真の縦モードを追加する」と解釈してオッケー。
縦持ちのタブレット向けには基本的に一括で「width35〜50%」の記述でいいと思う。あと、width でうまくいかないときには、zoom というタグでうまいこと写真サイズを変更して表示できる可能性が高いです。うちはとにかく「Java Script は使わない」というやり方で記述しています。
- 関連記事
-
-
スマホ用CSS 追加ネタ
2022/03/28
-
タブレット向けの写真の表示方法（HTMLにCSSを直接に記述）
2022/03/28
-
スマホ用のCSS記述方法。とにかく簡単。
2022/03/28
-
