READ MORE

CSSでグラデーションのborder

角が完全な丸になった形状ならば、box-shadowで、 角ばった角ならば、border-imageとbox-shadowでグラデーションを作られます。

READ MORE

特殊文字をCSSのcontentへ表示

CSSのcontentでは文字を挿入することもできますが 「&(&)」「>(>)」などの特殊文字はコードのまま出力されてしまいます。 contentで特殊文字を使うときは、16 …

READ MORE

CSSのpointer-eventでマウスイベントを制御

pointer-event: none; を使うと、CSSでクリックイベントを無効にできます。 工夫すれば、従来Javascriptを使用していた制御もCSSだけで実現できます。 pointer-eventは、最新ブラウ …

READ MORE

画像ファイルなしCSSだけでSVGを表示

スタイルシートだけでSVG画像を表示する方法です。 画像ファイルを読み込んで表示するのではなく、SVGのコードをBase64でエンコードしてソースに直接埋め込みます。 古いブラウザでは表示できませんので、ご注意を。 × …

READ MORE

YoutubeやGoogleMapsをリキッド表示にするCSS

absoluteで絶対位置配置した要素のサイズを相対指定の応用で YoutubeやGoogleMapsAPIなどiframeで埋め込む要素を縦横比固定でリキッド表示するCSSです。 スマートフォンやレスポンシブ対応のとき …

READ MORE

CSSのmedia querysでは必ず1em=16pxになる

レスポンシブデザインで頻繁に使用するCSS media querysのmax-widthでは 文字サイズを基準としたemを単位に使った場合 必ず、ブラウザの初期フォントサイズ16pxが基準になります。 例えば、iPadよ …

READ MORE

cssだけでラジオボタンを2択スイッチに変更

cssだけでcheckboxやradioのデザインを変更の応用で、 Javascriptを使わず2択スイッチのデザインを付ける方法です。 IE8ではデフォルトのラジオボタンが表示され、IE9以上ではスタイルが適用されます …