カテゴリー:
Webデザイン
閲覧数:609 配信日:2013-06-14 16:24
CSS3フルスクリーン
・一旦は諦め代替案を探したのだが、結局、「CSS3画像スルスクリーンスライドショー」を、「特定HTMLタグ」に部分適用することで対応することにした
「親要素越え画像」✕「横幅Max状態」注意事項
・通常の場合
▼CSS
html {
overflow: auto;
}
body {
overflow: hidden;
}
.hoge {
margin-left: -500%;
margin-right: -500%;
padding-left: 500%;
padding-right: 500%;
}
・ところが、これを画像に当てはめてもうまくいかない
・具体的には画像が拡大されてしまう
・しょうがないので対処療法的に記述せざるを得ない
▼CSS
.hoge {
margin-left: -5%;
margin-right: -5%;
padding-left: 5%;
padding-right: 5%;
}
・無理やり引き伸ばしているので、「文字メインの画像」とか、そういう厳密なのには向いていないと思われ
・今回は、CSS3でエフェクトかましているので、とりあえず、これで済ませる予定…
・だけど、一番問題なのは、このCSS3「スルスクリーン画像スライドショー」の仕組み自体を全然理解できてない、こと
・ほんまCSS3とか、マジ分かんない
・いつ勉強するのよ? オレは…
結論は出ていない
「デカイ画像の力に頼らず、レイアウトの見せ方を工夫する」VS「画像でドーンと魅せる」
・何れが良いか、まだ結論は出ていない
・ちょっと利用してみて、ダメだったら、再度検討する予定