概要
状態:-
閲覧数:2,600
投稿日:2013-06-14
更新日:2013-06-14
・既に親要素の横幅を越えたヘッダー／レスポンシブに対応していることもあり、画像スライダーもイケるやろうと思い挑戦したけど、デザイン上の理由で挫折したのでメモ
・この件、二度とチャレンジしない
勘違いしていたこと
・(横幅だけ)画面一杯に画像配置しているサイトはほとんどがギミック
・画像の端に色を付け単色で統一しているか、繰り返し要素の画像を利用して、それっぽく見せかけているか
・あるいは右端に「広告」や「メニュー」を入れているか
・実際に、1200px以上の1枚もの画像を用意しているサイトなどほとんどない(ような気がする)
重い
・トップにデカイ画像を配置すると、見た目が重くなる
・画像の両端を背景色に溶け込ませようかと思ったけど、スライダーなので複数画像に対応するのが面倒
・ImageMagickで一気に処理しようとするも、うまくいかず
全画面対応？
・いっそのこと全画面対応すればよいのかもしれないが、写真メインのサイトでもないのに、そこまでするのもどうかと…
・結局、見せ方を工夫すればいいじゃん、と思い直し、デカイ画像の力に頼るのはヤメることにした
・この件、二度とチャレンジしない
勘違いしていたこと
・(横幅だけ)画面一杯に画像配置しているサイトはほとんどがギミック
・画像の端に色を付け単色で統一しているか、繰り返し要素の画像を利用して、それっぽく見せかけているか
・あるいは右端に「広告」や「メニュー」を入れているか
・実際に、1200px以上の1枚もの画像を用意しているサイトなどほとんどない(ような気がする)
重い
・トップにデカイ画像を配置すると、見た目が重くなる
・画像の両端を背景色に溶け込ませようかと思ったけど、スライダーなので複数画像に対応するのが面倒
・ImageMagickで一気に処理しようとするも、うまくいかず
全画面対応？
・いっそのこと全画面対応すればよいのかもしれないが、写真メインのサイトでもないのに、そこまでするのもどうかと…
・結局、見せ方を工夫すればいいじゃん、と思い直し、デカイ画像の力に頼るのはヤメることにした
「親要素越え」✕「横幅Max状態でのCSS3画像スライドショー」
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「画像でドーンと魅せる」
・何れが良いか、まだ結論は出ていない
・ちょっと利用してみて、ダメだったら、再度検討する予定