タグ CSS の記事

Safari や iOS 上のブラウザで border-radius で子要素をマスクできない問題

Safari で HTML を閲覧した際に、親要素にとを設定してあるのに子要素がの範囲をはみ出して表示されてしまう問題についてです。追記: 親要素にを設定している前提の説明が抜けてしまっていたのでタイトルと本文を修正しました（コメントいただいた方ありがとうござ…

ウェブ制作者向けの小ネタです。スマートフォンのブラウザでウェブサイトを開いたときに、指定したフォントサイズと異なるサイズで文字が表示されてしまう問題についてです。問題でフォントサイズを指定しているのに、 iOS や Android のブラウザでページを表示すると文字が大…

CSS の小ネタです。 CSS で属性での指定が無い要素にのみスタイルを付ける方法についてです。この方法はハックでも何でも無いのですが、個人的には目からウロコでした。これを使うと、規模が大きめのサイトの CSS で起こりがちな「スタイルリセット地獄」を回避でき、 CSS…

CSS の自動整形ツール csscomb を使っていて、設定ファイルがないというエラーが出る場合があります。私の知るところでは、このエラーの原因には次の 2 つのパターンがあります。設定ファイルがない設定ファイルはあるがシンタックスエラーがある前者の「設定ファイルがない…

CSS 拡張のひとつである SASS で function を使ってセレクタを生成する方法について。通常 SASS の function の戻り値はプロパティの値に使うことが多いかと思いますが、セレクタとしても使用することが可能です（あまり使い途はありませんがプロパティ名にも…

ウェブサイトでよく見かける「横方向に並ぶメニュー」の作り方についてまとめてみます。記事執筆時点では、主流の横方向に並ぶメニュー（以後「水平メニュー」）の作り方は大きく分けて 4 つあります。を使う方法を使う方法レイアウトを使う方法を使う方法以下それぞれの実装…

Google Maps の埋め込み地図をレスポンシブ化する方法について。 Google Maps の埋め込み用コードはそのまま埋め込んでもレスポンシブになってくれません。ラッパー div を作成してラッパーに ( ) を指定するちょっとハック的な方法が主流です。 CSS(…

CSS でテキストの色と同じボーダーの色を設定する方法について。実はを指定しない場合、は自動的にの色になります。ですので以下のように設定すれば、ボーダーの色が自動的にテキストの色と同じになります。 CSS3 ではこれを明示的に表すためのキーワードというものが…

CSS でテキストフィールドが focus されたときに自動的に付くボーダーを外す方法についてです。ここではテキストフィールドと書いていますが、 textarea や button 、 submit ボタンなどでも共通かと思います。私がチェックした Chrome 、 Fir…