エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
背景画像スライダーでよく使う3つのパターン | okuden-labo
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
背景画像スライダーでよく使う3つのパターン | okuden-labo
クライアントからの要望で、画面の横幅いっぱいを使った画像のスライドにしてほしいと言われることが多... クライアントからの要望で、画面の横幅いっぱいを使った画像のスライドにしてほしいと言われることが多く、いろいろと調べてみると、大まかに下記の3パターンの背景画像スライダーが存在することが分かりました。 概要とともにサンプルページも作成してますので、ご参考ください。 全画面表示 画面上部に表示:背景画像の縦横比が同じ 画面上部に表示:背景画像の高さを固定 なお、今回利用してるスライダーはjQueryプラグインのjQuery.BgSwitcherです。背景画像をスライダーを作成するなら、とても使い勝手が良いので利用させて頂きました。 1.全画面表示 表示領域に対して縦横100%で表示すると、全画面表示になる。 画像は横900px縦600pxを利用。 スライダーのサンプル1 CSS html, body { height: 100%; margin: 0 !important; padding: