CODE-LIFE│コーディング・プログラミングのメモブログ

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ

CSS

マウスのクリックを透過・無効化させる2つの方法 CSSとjQuery

.hogehoge { pointer-events: none; } 例えば商品ページの商品画像にリンクが貼ってある状態で、 その商品が売り切れになり、商品画像の上に「売り切れ」などの文字が入ったの画像を .soldout { position: relative; } .soldout:after { content: "" display…

CSSで画像をぼかしてオンマウスした画像だけ鮮明に

CSS

See the Pen CSSで画像をぼかしてオンマウスした画像だけ鮮明に by maru (@maru0014) on CodePen. img { width:30%; -webkit-filter: blur(2px); filter: blur(2px); } filterプロパティはその名のとおり画像にフィルターをかけることができます。 これを使…

CSSのみで「スクロールすると表示されるフローティングメニュー」

CSS

ECサイトなどでタグの規制があり、JavaScriptが使えない環境下でもこれなら可能。 jQueryなどで実装する場合はスクロールイベントを拾ってきて表示させるんじゃないかと思いますが、 この場合はheader部分の背面にフローティングメニューを隠しておくイメー…

【CSSで3等分】 要素をきっちり三分割するスタイルシートの書き方

CSS

今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか? この書き方を知るまで僕は のような書き方をしていました。

Android標準ブラウザでbackground-size: autoが機能しない

CSS

見出しの背景画像として、幅1pxの画像をリピート表示させようとしたところAndroid標準ブラウザでのみ機能しなかったお話。 Android標準ブラウザで背景画像が表示されない ChromeやSafariでは正常に表示されたがAndroid標準ブラウザのみ背景が表示されなかっ…

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた

CSS

楽天 スマホ商品ページ共通説明文の画像CSSが書き換えられていた 商品ページ共通説明文の画像に対して厄介なCSSが記述されていました。 gista516c703c5d264491359 共通説明文内の画像すべてにblock表示横幅最大100%余白0が、!importantで強制的に適用される…