READ MORE

IE11とiPhon対応 フッタを画面下に表示

コンテンツの量が少ない場合や、解像度の高いディスプレイでみた場合、いわゆるスクロールバーが出ない状態では、フッタが上にせり上がった状態になり、下へ隙間ができます。 この解決方法でよく見かけるCSS対策がこの2つ。 bod …

READ MORE

@supportsでクリーンなIEハック

特定の機能が有効な環境にだけ適用させる@supportsでobject-fitなどInternetExplorerだけ非対応の機能を指定すると、クリーンなCSSハックができます。 サンプルソース 参考:@supports …

READ MORE

CSSのbackgtound-sizeを含めたショートハンド

背景画像のサイズを指定するスタイルプロパティbackground-sizeは、ショートハンドで1行にまとめられないものなんだと思い込んでいてながい間、このように分割して指定していました。 が、/をはさめばショートハンドで …

READ MORE

CSSのclip-pathでコンテンツを丸く切り抜く

マテリアルデザインの、ボタンが円形に広がりコンテンツ表示領域となるエフェクトを作りたくて 画像ではなくテキストやその他のタグも含んだ要素をマスキングするclip-pathの使い方を研究してみました。 サンプルは、マウスや …

READ MORE

サイズが可変のtableのセルに斜線を引くCSS

SVGを活用すると、可変になっている矩形の端から端にスタイルシートでナナメの線を引くことができます。 リキッドの<table>対戦表でセルに斜線を引く場合などでいかがでしょうか。 パソコンのブラウザの場合は、 …