しらぎくのウェブサイト作成入門メモ
しらぎくのウェブサイト作成入門制作者のメモ。

CSS で画像等の高さを解像度に合わせるには

レスポンシヴ・ウェブデザインなどではしばしば埋め込む画像を端末の解像度に合わせて適宜縮小します。

幅の方は簡単なのですが、高さの方は実は余り簡単ではありませんでした。

目次


CSS 第二水準で画像の高さを端末に合わせるには

CSS 第二水準第一改訂版(CSS 2.1)で画像に合わせて画像の表示解像度を変更する場合、max-width プロパティmax-height プロパティを指定する事であらゆる画像解像度に対応出来ます。

問題点

ところが、高さ関係のプロパティでパーセンテージを用いる場合、親要素に具体的な高さが定まっていないといけないのです。

端末の解像度に合わせて高さを定めたいのであれば、最上位要素である<html>要素から<img>要素に至るまでの全ての要素の height プロパティの値を auto でない値にしないと無理でしょう。

当然、その結果他の部分にまで大きな影響を与える事になるでしょう。

CSS 第三水準 数値・単位モジュールで導入された新しい長さの単位

CSS 第三水準(CSS3)の数値・単位モジュールでは、新たにヴューポートの幅や高さに対する比率を指定出来るようになりました。

このうち、vh 単位は、ヴューポートの高さに対する比率となります。

ヴューポートは特にスマートフォン等では<meta name="viewport">要素で具体的な値を指定出来るため、必ずしも端末の実解像度とは一致しません。

でも多くの場合横幅だけを指定する場合が多く、その場合は高さはそれに合わせて設定されるため実質的に画面の高さに対する比率と見なせます。

vh 単位等について注意すべき事

vh 単位等 CSS 第三水準 数値・単位モジュールで導入されたヴューポートの幅や高さに対する比率を使う場合、以下の点に注意しましょう:

取るべき値は百分率

ヴューポートの幅や高さに対する比率の単位で取るべき値は百分率です。

つまり、vh 単位で言えばヴューポートの高さ= 1vh ではなく、ヴューポートの高さ= 100vh となります。

これを忘れると、期待している高さの百分の一の解像度が適用される事となります。

スマートフォンでは要注意!

上記で述べた通り、ヴューポートの解像度は必ずしも端末の実解像度ではありません。

スマートフォン等では<meta name="viewport">要素で具体的なヴューポートの幅や高さを指定出来ます。

そして指定されたヴューポートの解像度が端末の実解像度と一致しない場合は適宜縮小拡大されます。

ヴューポートの縦横比が実解像度の縦横比と異なる場合、恐らく全体を収めるように縮小して余白を作る事になるでしょう。

縦方向に余白が出来た場合は、実解像度とは異なる値となります。

対応していない環境もある

スマートフォンではアンドロイドの 4.x までに未対応のものがあります。

一般に未対応の単位が含まれている場合、その値はエラーとし当該プロパティの指定は無効とみなされます。

それで問題があるか否かは状況次第でしょう。

メニュー

制作者の創作キャラクタ

堀北真希うさぎについて

堀北真希うさぎは、堀北真希ちゃんにうさ耳を付けた創作キャラクタです。

主な作品

  • 堀北真希うさぎのお誕生日(平成29年版)
  • 平成29年暑中見舞い動画・夏休みの堀北真希うさぎと紀子ちゃん(神崎紀子)
  • 堀北真希うさぎと史子ちゃん(山下史子)の並行世界:堀北真希うさぎと夏休みにアルバイトをしている史子ちゃん(平成28年 7月版)
  • 四月初めの午後、新学年一日目を終えて帰宅した堀北真希うさぎと先に帰宅していたうさ耳中学生(平成29年版)
  • 平成28年堀北真希うさぎヴァレンタイン企画動画
  • 成人式から帰宅途中の堀北真希うさぎと史子ちゃん(山下史子) (平成29年版)
  • 成人式を終えて電車で同級生の史子ちゃん(山下史子)と帰宅する堀北真希うさぎ(うさ耳女子大生) (平成26年版)
  • 平成28年クリスマス動画・堀北真希うさぎとうさ耳中学生姉妹のホワイトクリスマス
  • 初雪が降った十一月の午後、大学のゼミ室での堀北真希うさぎと皆藤愛子ぐま(くま耳大学院生) (平成28年版)
  • 紅葉の下、コスモスの花が咲く秋の道を歩く堀北真希うさぎ(平成28年版)
  • 休日の夜、部屋で課題のレポートを書いていた堀北真希うさぎ(平成28年11月版)
  • 女子高校生を家庭教師として指導している堀北真希うさぎ(平成28年10月版)
  • 昭和50年代後半のコンタクトレンズ専用目薬『マイティアCL』新発売仮想コマーシャル
  • 堀北真希うさぎと、美容院から出てきた妹の七五三に付添う千裕ちゃん(佐藤千裕) (平成28年版)
  • 学園祭の模擬授業で、講師・皆藤愛子ぐま(くま耳大学院生)を紹介する進行役・堀北真希うさぎ(平成28年版)
  • "目の日"の翌日の朝、洗面所でコンタクトレンズを入れていた堀北真希うさぎ(平成28年版)
  • 平成28年暑中見舞い・夏休みの学校での堀北真希うさぎと千裕ちゃん(佐藤千裕)
  • 六月の晴れた週末、ウェディングドレスに身を包んだ堀北真希うさぎ(平成27年版)
  • 10月10日の"目の日"に描いた、眼科医院待合室での堀北真希うさぎと紀子ちゃん(神崎紀子) (平成27年版)
  • 堀北真希うさぎの目は、ボシュロム ?堀北真希うさぎの平成初頭のボシュロム CM 風コンタクトレンズ装着場面〜
紀子ちゃん(神崎紀子)について

紀子ちゃん(神崎紀子)は制作者の幼馴染をモデルにした創作キャラクタです。

主な作品

  • さくら吹雪の放課後、学校から自宅に着いた紀子ちゃん(神崎紀子) (平成29年版)
  • 四月初めの春休みの朝、身支度時に窓の外に咲き始めた庭のさくらを見る紀子ちゃん(神崎紀子) (平成29年版)
  • さくらの花が咲く三月末の午後、眼鏡屋で買い物していた堀北真希うさぎとこれから買い物する紀子ちゃん(神崎紀子) (平成29年版)
  • 平成29年年賀動画・晴れ着を着た紀子ちゃん(神崎紀子)のお正月の朝
  • クリスマス前の十二月の夜、塾に行くため電飾を付けた家を出る紀子ちゃん(神崎紀子) (平成28年12月14日版)
  • 体育授業での紀子ちゃん(神崎紀子)とゆうちゃん(中村由子) (平成28年10月10日版)
  • さくらの開花が近い三月末の朝、家の玄関を出た紀子ちゃん(平成28年 3月版)
  • 十一月の週末の午後、お出掛け前に眼鏡を片付けている紀子ちゃん(神崎紀子) (平成28年版)
  • 文化祭でクラス合唱をしている紀子ちゃん(神崎紀子)とゆうちゃん(中村由子)たち(平成28年版)
  • ウェディングドレスに身を包んだ紀子ちゃん(神崎紀子) (平成28年版)
  • 四月末の午後、西洋式カントリーガール風エプロンドレスに身を包んだ紀子ちゃん(神崎紀子) (平成28年版)
  • 四月初めの春休み、自宅の庭での紀子ちゃん(神崎紀子) (平成28年版)
  • 学校の健康診断で視力検査を受けている紀子ちゃん(神崎紀子) (平成27年版)
  • 水泳補講後、更衣室でコンタクトレンズを入れる紀子ちゃん(神崎紀子)とゆうちゃん(中村由子) (平成26年版)
  • 平成24年春の挨拶・紀子ちゃん(神崎紀子)の新学年の朝
  • 夏休みの午後の堀北真希うさぎと市民プールから帰る紀子ちゃん(神崎紀子) (平成28年版)

しらぎく日記システム 第 0.731版 (平成29年10月31日)