CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
background-attachment: fixed がスマホで効かない問題は ::before で解決！
background-attachment: fixed がスマホで効かない問題は ::before で解決！ Webページの背景画像を、background-size: cover で background-attachment: fixed にしたいとき、PCブラウザでは意図どおりに表示するのに、iOS Safari ではウマくいかない事態になりました。 調べてみると、iOS Safari では、「background-size: cover」を使ってるとき「background-attachment:fixed」が効かないらしいんです。 出典：Can I use これを解決するためには、擬似要素「::before」で <body> の前に擬似ブロックレベル要素を作り、そこに背景画像を貼るのがイイみたい。自分なりに改良したソースコードをメモります。 height:100vh がベターか
CSS Media Queriesでレスポンシブにコンテンツを切り替える - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
まずは任意のclassを作成し、（ここではclass名を「.spNone」としています） このclassに「display:none」を指定します。 <div class="spNone">こちらが消える予定</div> 次にCSS内にメディアクエリを記述します。今回は横幅480px以下の端末では非表示にしたいと思います。 CSS body { background-color: #FFFFFF; margin: 0; padding: 0; } #all { background-color: #FFFFFF; max-width: 800px; margin: 10px auto; } div { border: #000000 1px solid; margin: 10px; padding: 10px: background-color: #CCCCCC; } @media scr
【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About
レスポンシブWebデザインとは、画面サイズなどの閲覧環境に応じてWebページのレイアウトや装飾が自動調整される作り方のことです。記事「レスポンシブWebデザインの簡単な作り方」でも解説しました。特に、画像サイズを画面幅に自動で合わせる方法は、Webサイトのスマートフォン対応目的でも需要が高いでしょう。 例えば、下図のWebページをご覧下さい。ページ上部に見える大きなバナー画像の表示サイズは、ブラウザのウインドウサイズをある程度小さくすると、描画領域の横幅に合わせて自動的に縮小されるデザインになっています。 今回はこのような、画面サイズ（ブラウザのウインドウの横幅サイズ）に合わせて、縦横比率を維持したまま画像の表示サイズを変化させる方法をご紹介いたします。レスポンシブWebデザインを採用したページではもちろん、そうでない場合でも、画面サイズに合わせて画像サイズを自動で拡大縮小させたい様々な場
![【HTML＋CSS】ウインドウ幅に合わせて画像サイズを変化させる方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/1d9230bd03ef83fbdd879610f125c72468e6b161/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F0%2F6%2F3%2F0%2F1640285675%2Ftopimg_original.jpeg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSレイアウトを学ぶ
【デモ有り、コピペOK!】iframe(地図も動画も)縦横比が常に一定の完全フルレスポンシブのBOXを設置する方法 | 駆け出しwebクリエイター黒ブタの気まぐれブログ
4/4 tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About![4/4 tableレイアウトをCSSだけでレスポンシブ化する方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/299995f81ab1b48dd61b1a07280867044b3e11a3/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F5%2F6%2F3%2F7%2F2%2Ftopimg_original.png)
