HTML・CSS・Javascriptなどのメモブログ│CODE-LIFE

WEB製作の仕事を始めたMaruのhtml・CSS・jsメモブログ。たまにExcelVBAの話もでます。

CSS

HTML要素を超簡単に横並びにできるCSSの書き方 Flexbox

この記事でできるようになること divやliの表示をキレイに簡単に横並びにできる 去年(2016年)くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout(フレキシブルボックスレイアウト)。通称flexbox。 そろそろ使っても良いんじゃ…

【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ

CSS

clearfixが適用されていない状態 See the Pen flow-root by maru (@maru0014) on CodePen. float:left;でdiv要素を横並びにしましたが、clearfixを行っていないため外枠の.rowが上の方でちっちゃくなってしまいました。 現状で最もスマートな、短いclearfix…

マウスのクリックを透過・無効化させる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

今日のお題は「きっちり」三等分できる書き方。 どんな書き方を想像しましたか? この書き方を知るまで僕は .col3 li { width : 33.33333% ; } のような書き方をしていました。 実際にこの書き方をしているウェブサイトもよく見かけます。 が、性格の問題も…

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

CSS

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

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

CSS

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