「親要素越え」✕「横幅Max状態での画像スライダー」を検討

デザインWebデザイン

概要

 状態:-  閲覧数:2,728  投稿日:2013-06-14  更新日:2013-06-14
・既に親要素の横幅を越えたヘッダー/レスポンシブに対応していることもあり、画像スライダーもイケるやろうと思い挑戦したけど、デザイン上の理由で挫折したのでメモ
・この件、二度とチャレンジしない

勘違いしていたこと
・(横幅だけ)画面一杯に画像配置しているサイトはほとんどがギミック
・画像の端に色を付け単色で統一しているか、繰り返し要素の画像を利用して、それっぽく見せかけているか
・あるいは右端に「広告」や「メニュー」を入れているか
・実際に、1200px以上の1枚もの画像を用意しているサイトなどほとんどない(ような気がする)

重い
・トップにデカイ画像を配置すると、見た目が重くなる
・画像の両端を背景色に溶け込ませようかと思ったけど、スライダーなので複数画像に対応するのが面倒
・ImageMagickで一気に処理しようとするも、うまくいかず

全画面対応?
・いっそのこと全画面対応すればよいのかもしれないが、写真メインのサイトでもないのに、そこまでするのもどうかと…
・結局、見せ方を工夫すればいいじゃん、と思い直し、デカイ画像の力に頼るのはヤメることにした

「親要素越え」✕「横幅Max状態でのCSS3画像スライドショー」

 閲覧数:601 投稿日:2013-06-14 更新日:2013-06-14

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「画像でドーンと魅せる」
・何れが良いか、まだ結論は出ていない
・ちょっと利用してみて、ダメだったら、再度検討する予定


デザイン変更



類似度ページランキング
順位 ページタイトル抜粋
1 「親要素越え」✕「横幅Max状態での画像スライダー」を検討 93
2 親要素の横幅を越えたヘッダー/レスポンシブ対応 46
3 自分の環境でスプライト画像を作成したい 33
4 「クリエイティブ・コモンズ・ライセンス」以外の画像素材サービス「ライセンス規約」 29
5 マウスオーバーで「リンク画像」拡大表示をCSSで実装 29
6 画像背景色を透明化するオンラインサービス 29
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 29
8 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 28
9 「SRWare Iron」を検討 27
10 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 26
11 インライン要素のまま、上下marginを適用させる 26
12 背景画像を要素幅一杯に広げ、リサイズにも対応させる 26
13 HTML5では「ブロックレベル要素」「インライン要素」で分類しない 26
14 GIMPで大画像の上に複数枚の小画像を横一列に並べる 25
15 aタグで複数のブロック要素を囲むやり方 25
16 親要素の背景色を、CSSで打ち消したい 25
17 Chrome ブラウザで画像の DataURI を取得 25
18 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 24
19 「Bootstrapデザイン」✕「グラフ」 24
20 主要サイトの横幅と、メイン広告の大きさを調査 24
2024/10/10 17:36 更新
週間人気ページランキング / 10-3 → 10-9
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 43
2 RGB ⇔ Lab | 色変換(色) 20
3 鉄道会社毎のカラーコード | カラーコード(色) 15
4 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 7
5 16進数カラーコード / 2進数 7
6 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 5
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 5
8 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 4
8 RGBの種類 / ビットカラー | RGB(色) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
8 「bgcolor」「background-color」「background」の違い | CSS 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
9 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 3
9 画像ライセンスは大きく3種類に分かれる。「All rights reserved」+「クリエイティブ・コモンズ・ライセンス」+「その他」 | 画像著作権(画像) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
9 8ビットカラー / インデックスカラー / パレットカラー 3
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
2024/10/10 1:01 更新