要件
状態:-
閲覧数:1,650
投稿日:2017-03-23
更新日:2017-03-23
1.ボタンクリック
・「img src」へ「hogeクラス」付与
・JavaScriptで実装済
2.「hogeクラス」付与した要素
・CSSで画面一杯に表示したい
CSSだけで、「任意の要素に配置した画像」を画面一杯に表示することは、基本的には出来ない
・「img src」ではなく「背景画像」でも不可
・「div要素」でも無理
ネットに掲載されている情報は
・全て、特殊な条件を前提にしている
・「img src」へ「hogeクラス」付与
・JavaScriptで実装済
2.「hogeクラス」付与した要素
・CSSで画面一杯に表示したい
検索してみた結果分かったこと
CSSだけで、「任意の要素に配置した画像」を画面一杯に表示することは、基本的には出来ない
・「img src」ではなく「背景画像」でも不可
・「div要素」でも無理
ネットに掲載されている情報は
・全て、特殊な条件を前提にしている
「background-size:cover」は、「htmlタグ」や「bodyタグ」で使用した場合のみ、画面一杯に表示することが出来る
background-size:cover
ビューポート全体をカバーするが、使用場面は限られる
・「htmlタグ」や「bodyタグ」以外の要素で使用すると、画面一杯に表示することは出来ない
body {
/* 画像ファイルの指定 */
background-image: url(images/background-photo.jpg);
/* 画像を常に天地左右の中央に配置 */
background-position: center center;
/* 画像をタイル状に繰り返し表示しない */
background-repeat: no-repeat;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
/* 表示するコンテナの大きさに基づいて、背景画像を調整 */
background-size: cover;
/* 背景画像が読み込まれる前に表示される背景のカラー */
background-color: #464646;
}「max-width:100%;」は原寸画像サイズ以上に拡大表示することは出来ない。「width:100%;」は配置要素サイズ以上に拡大することが出来ない
「100vw;100vh;」は本当に親要素の影響を受けないの？
ネットには間違ってはいないけれども、紛らわしい表記が溢れている
要素をフルスクリーン（全画面）サイズにするには、以下の指定でOK
.box {
width: 100vw;
height: 100vh;
}
width: 100vw;
height: 100vh;
}
実際に試してみると？
・全画面表示にならない
何が問題なの？
CSSでは親要素の高さを取得することは出来ない
・親要素がなかったり、親要素に適切な値が付与されていればよいが、そうではない場合には全く対応できない
・分かりにくいCSS height のパーセント設定のまとめ
最終的には、jQueryでwindowサイズを取得して指定
最終的に
jQueryでwindowサイズを取得して指定
・CSSへの指定はheightにではなくmin-heightに指定する
・そうすることでコンテンツ量が画面サイズより大きい場合、コンテンツの長さに応じた高さを表示してくれる
//画面の高さ取得
h = $(window).height();
$("#contents #main article").css("min-height", h + "px");
h = $(window).height();
$("#contents #main article").css("min-height", h + "px");
感想
ネットには間違ってはいないけれども、紛らわしい表記が溢れている
・ちょっと検索してみたら「簡単に出来る」と自信満々に謳っていたので、片っ端から試してみたが、結局全滅だった
・時間のムダだった
・最初からjQueryで実装すれば良かったよ