object-fit:cover;がIE11で効かない場合の対処法です。手順としましては、 ofi.min.jsを読み込む JavascriptでobjectFitImages();を実行する object-fit:co […]
タグ: css
transformを使った上下左右センタリング IE11でスクロールバーが出る
cssのtransform:translateでブロック要素を上下左右にセンタリングしたところ、IE11でなぜかスクロールバーが出る。 言葉にすると分かりづらいですが、下の画像のようにbody(青線部分)の中に配置したブ […]
CSSで要素を右側だけとか左側だけとか一部分を角丸にする
CSSでテキスト入力ボックスやボタンを角丸にするのはよくやりますが、四隅全部ではなく部分的に角丸をする方法です。 たとえば下の画像では、テキストボックスは左側だけを、ボタンは右側だけを角丸にしています。 input[ty […]
formのテキストボックスやボタンがきれいに並ばない(頭が揃わない・ズレる)
フォームのテキストボックス(input type="text")やボタン(input type="button")を横一列で奇麗に並べようと思っても、表示させるブラウザによって位置がズレます。 本当は下の画像のようにした […]
iphoneやipadでフォームのテキスト欄やボタンのデザインにCSSが効かない
inputタグのテキスト入力ボックス(input type="text")やボタン(input type="button")のデザインをCSSで作っても、そのままではiOSのiphoneやipadで効きません。 たとえば […]
inupt type="text"でカーソルを入れるとボヤっと出る枠線を消す
フォームのテキスト入力欄(inupt type="text")にフォーカスをあてた際に、下の画像のようにぼやっと表示されるブルーの枠線が邪魔なので、それを消す方法です。 :focus擬似クラスに、outline:0;を設 […]
buttonタグをクリックすると表示されるボヤっとした枠線を消す
buttonタグでボタンを作った際に、そのボタンをクリックすると下の画像のようにブルーのぼやっとした枠線が表示されます。 これがとても邪魔なので、それをCSSで消す方法です。 :focus擬似クラスにoutline:0; […]
WP Social Bookmarking Light ボタンの隙間を消す
WP Social Bookmarking Lightを使用してFacebookシェアボタン等のソーシャルボタンを表示させた時に、ツイッター、Google+1、Pocketの各ボタンの右側にできる隙間を消す方法です。 デ […]
アルファベットが(勝手に)大文字になるCSS
海外製のWordPressテーマをさわっているとよくあるんですが、アルファベットが勝手に大文字にされてしまうやつ。あれ本当におせっかいですよね。こっちはあえて小文字で見せたいと思うから小文字で打つわけで、大文字にしたけれ […]