スマホ用のスタイルシートは、写真がスマホの画面のサイズから飛び出さないようにする必要があります。「横向き写真」「縦向き写真」といろいろありますが・・・。なんとこれだけで自動で解決。しかもスマホの種類すら関係なく機能します(・・;

まずは 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; ←これがないと写真が画面の中央に表示されずに、たぶん左端によったりします
}


IMG_0434.png



あ、それと「これだと簡単にレスポンシブ(リキッド)な表示自体はできるけども、スマホ向けにもでかい写真サイズをそのままに表示しているのでは?」という疑問は正しいです。めんどうなので対応しません。小さめの写真サイズを用意し「small」などのフォルダに分岐させて表示することもできるけど、めんどうすぎてやってられないから、うちではやりません(・・;

イメージ的には「レティーナ画像の記述方法」の逆向きみたいなもので、HTML5(ほぼ全てのブラウザで対応してるはず) でサポートされている「img」タグへの追加の記述方法で対応できます。これは画面(ディスプレイ)のサイズに合わせて、対応するサイズの写真を表示するもので、HTMLへ直接に記述できるものです。スクリプトなどをブロックしていても、HTML5 はただの HTML なのでほぼ常に機能します。

次の記事でタブレットで見たときの感じをアップします。

関連記事

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テクノロジー (31)
このブログについて (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 (22)
越後新潟をゆく (2)
近江彦根をゆく (5)
遠州(静岡)をゆく (7)
遺言 (2)
鎌倉をゆく (4)
青森、岩手をゆく (3)
過去ログ紹介 (1)
横濱散策 (1)
越前福井 (3)
越中富山 (2)
月別アーカイブ
検索フォーム
ブロとも申請フォーム
QRコード
QR
メールフォーム

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