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

デザインWebデザイン

概要

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

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

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

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

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

 閲覧数:340 投稿日: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 親要素の横幅を越えたヘッダー/レスポンシブ対応 46
2 自分の環境でスプライト画像を作成したい 33
3 「クリエイティブ・コモンズ・ライセンス」以外の画像素材サービス「ライセンス規約」 29
4 画像背景色を透明化するオンラインサービス 29
5 マウスオーバーで「リンク画像」拡大表示をCSSで実装 29
6 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 29
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 28
8 「SRWare Iron」を検討 27
9 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 26
10 インライン要素のまま、上下marginを適用させる 26
11 背景画像を要素幅一杯に広げ、リサイズにも対応させる 26
12 HTML5では「ブロックレベル要素」「インライン要素」で分類しない 26
13 GIMPで大画像の上に複数枚の小画像を横一列に並べる 25
14 Chrome ブラウザで画像の DataURI を取得 25
15 親要素の背景色を、CSSで打ち消したい 25
16 aタグで複数のブロック要素を囲むやり方 25
17 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 24
18 「Bootstrapデザイン」✕「グラフ」 24
19 主要サイトの横幅と、メイン広告の大きさを調査 24
20 「使用できるソケットを待機しています」はクライアント側の問題? 23
2021/7/28 10:46 更新
週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新