iPad Pro というタブレットの横画面表示と縦画面表示。うちの写真はウェブ向け写真の横サイズ(1000〜1400)で、縦サイズ(800〜1200)になってます。なのでそれを基本に話を書いてます。あと、うちは写真を「P(パラグラフ)の中にはあえて置かないで、直接に記述するようにしています。



横(写真は縦)

IMG_4534.jpg


縦画面(写真は縦)

IMG_4535.jpg


スマホをブログ目的で横方向に持つ人はほとんどいないので、あたしはそれは無視してます。一方、タブレットは横持ちと縦持ちが考えられるので、一応は縦持ちにも対応。やってみるとわかるんだけど、タブレットの縦持ちに対する写真のサイズは結構めんどい。そこであたしは、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 は使わない」というやり方で記述しています。



関連記事

2022/03/28|ITテクノロジーコメント(0)トラックバック(0)TOP↑
この記事にコメント
名前:
コメントタイトル:
メールアドレス:
URL:
コメント:

パスワード:
管理人だけに表示:
管理者にだけ表示を許可
この記事にトラックバック
プロフィール

上条ゆか@M嬢王国

Author:上条ゆか@M嬢王国
163.1kg, 52kg, 長い黒髪

元ティーカップ(AutoPage)を基として、ワードプレスに移行しつつ、FC2へと移行したのがこのブログです~。メインはウェブサイトに全部あります。旧ブログからの写真の移行は85%くらいはできたかなぁ。カテゴリごとにやっています。旅行系写真日記のデータ移行は100%完了しました。

EPUBなどの電子書籍フォーマットで無料配布などもやるかも。

ポッドキャストは国際政治ネタのみです。

My Website(歌舞伎町のM嬢ゆか)

旅写真日記サイトです。
気まぐれに縄の写真とかアップしたりもするかも。

Camera:
Nikon D850, D750, D5100
Nikon Z9, Zfc

Lens:
Full Frame
Nikon 28mm/1.8G *Favorite
Nikon 85mm/f1.8G, 105mm/f1.8G, 200mm/f2
Cosina Nokton 58mm/1.4 SL-2N *Favorite
Cosina Ultron 40mm/f2 SL-2N
Cosina Color-Schopar 28mm/f2.8
Hellios 40mm/f2
Tamron 70-200mm/f2.8 VC G2
Tamron 15-30mm/f2.8 VC *Favorite
APS-C
Nikon 35mm/f1.8 G *Favorite

趣味: 写真、緊縛(受け手)、旅行、和歌
言葉: 日本語、English
@元・M嬢王国、M嬢遊戯、M女子王国

リンク
ブロとも一覧
最新記事
最新コメント
カテゴリ (2022年8月まで移行中)
未分類 (185)
マイポートレート (152)
ポートレート(弱エロス) (2)
固定ページ (1)
Coffee Photos (3)
TimeLapse (5)
あの人を求めて (1)
お正月シリーズ (3)
ノンジャンル (279)
一夜城(石垣山城址)と山中城址 (4)
エロスSM (429)
ブログメンテ関連 (38)
上州群馬をゆく (7)
ITテクノロジー (30)
このブログについて (3)
京都、古都 (22)
信州(長野・山梨)をゆく (10)
八王子城、滝山城 (3)
備中岡山をゆく (3)
ファッション/インテリア/カメラ (41)
冬はイルミネーション (5)
加賀 夏の陣 (5)
動物さん、鳥さん (1)
北海道をゆく (6)
台湾写真日記(2018夏) (6)
台湾旅日記(2016冬) (9)
告白 (34)
四国をゆく(讃岐・阿波) (6)
夢の旅 (4)
固定記事 (1)
オリジナルTシャツショップ (1)
奥州仙台をゆく (13)
尾張名古屋 (7)
常陸茨城をゆく (4)
旅行写真日記 (85)
春は桜 (15)
栃木をゆく (2)
アメリカ政治 (30)
中国政治 (8)
映画/音楽/歴嬢関連/文芸 (77)
森のポートレート (3)
武州埼玉をゆく(箕輪・鉢形・忍) (3)
水墨画 (1)
海と海のポートレート (3)
減量、美容外科、整体 (21)
熊本をゆく (8)
病気 (2)
私的な日記 (198)
秋は紅葉 (6)
美味しいもの (94)
美濃をゆく (3)
羽州山形をゆく (6)
花ポートレート - Flower (20)
越後新潟をゆく (2)
近江彦根をゆく (5)
遠州(静岡)をゆく (7)
遺言 (2)
鎌倉をゆく (4)
青森、岩手をゆく (3)
過去ログ紹介 (1)
横濱散策 (1)
越前福井 (3)
越中富山 (2)
月別アーカイブ
検索フォーム
ブロとも申請フォーム
QRコード
QR
メールフォーム

名前:
メール:
件名:
本文: