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

デザインWebデザイン

概要

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

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

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

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

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

 閲覧数:481 投稿日: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 マウスオーバーで「リンク画像」拡大表示をCSSで実装 29
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない 29
6 画像背景色を透明化するオンラインサービス 29
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 28
8 「SRWare Iron」を検討 27
9 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 26
10 背景画像を要素幅一杯に広げ、リサイズにも対応させる 26
11 インライン要素のまま、上下marginを適用させる 26
12 HTML5では「ブロックレベル要素」「インライン要素」で分類しない 26
13 GIMPで大画像の上に複数枚の小画像を横一列に並べる 25
14 親要素の背景色を、CSSで打ち消したい 25
15 Chrome ブラウザで画像の DataURI を取得 25
16 aタグで複数のブロック要素を囲むやり方 25
17 プルダウンメニュー(セレクトボックス)要素を右揃えしようと思ったけど、出来なかったのでメモ 24
18 「Bootstrapデザイン」✕「グラフ」 24
19 主要サイトの横幅と、メイン広告の大きさを調査 24
20 「使用できるソケットを待機しています」はクライアント側の問題? 23
2022/11/29 1:02 更新
週間人気ページランキング / 11-22 → 11-28
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 59
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 27
3 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
4 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
4 「属性」「プロパティ」「アトリビュート」の違い | CSS 12
5 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 11
5 RGBの種類 / ビットカラー | RGB(色) 11
6 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 10
7 ページ内リンクの位置を微調整するためには、Negative margin を使用する | CSS 8
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 8
7 16進数カラーコード / 2進数 8
7 Design 0 8
7 「bgcolor」「background-color」「background」の違い | CSS 8
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 7
8 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; | CSS 7
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
9 「line-height」効果を打ち消すスタイルシートは、「line-height:normal; 6
9 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 6
9 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
2022/11/29 1:01 更新