タグ CSS の記事
Safari や iOS 上のブラウザで border-radius で子要素をマスクできない問題
Safari で HTML を閲覧した際に、親要素に overflow: hidden と border-radius を設定してあるのに子要素が border-radius の範囲をはみ出して表示されてしまう問題についてです。 追記: 親要素に overflow…
スマートフォンのブラウザでフォントサイズがおかしくなる問題の対処方法
ウェブ制作者向けの小ネタです。 スマートフォンのブラウザでウェブサイトを開いたときに、指定したフォントサイズと異なるサイズで文字が表示されてしまう問題についてです。 問題 font-size でフォントサイズを指定しているのに、 iOS や Android のブラウザでページ…
CSS でクラス指定の無い要素にのみスタイルを適用する方法
CSS の小ネタです。 CSS で class 属性での指定が無い要素にのみスタイルを付ける方法についてです。 この方法はハックでも何でも無いのですが、個人的には目からウロコでした。 これを使うと、規模が大きめのサイトの CSS で起こりがちな「スタイルリセット地獄」を回避…
csscomb で設定ファイルが見つからないエラーの対処方法
CSS の自動整形ツール csscomb を使っていて、設定ファイルがないというエラーが出る場合があります。 私の知るところでは、このエラーの原因には次の 2 つのパターンがあります。 設定ファイルがない 設定ファイルはあるがシンタックスエラーがある 前者の「設定ファイルがない…
SASS で function を使ってセレクタを生成する方法
CSS 拡張のひとつである SASS で function を使ってセレクタを生成する方法について。 通常 SASS の function の戻り値はプロパティの値に使うことが多いかと思いますが、セレクタとしても使用することが可能です(あまり使い途はありませんがプロパティ名にも…
水平メニューを作る CSS のスタイルまとめ
ウェブサイトでよく見かける「横方向に並ぶメニュー」の作り方についてまとめてみます。 記事執筆時点では、主流の横方向に並ぶメニュー(以後「水平メニュー」)の作り方は大きく分けて 4 つあります。 float を使う方法 inline-block を使う方法 table レイ…
Google Maps の埋め込み地図をレスポンシブにする方法
Google Maps の埋め込み地図をレスポンシブ化する方法について。 Google Maps の埋め込み用コードはそのまま埋め込んでもレスポンシブになってくれません。 ラッパー div を作成してラッパーに padding ( padding-bottom ) を指…
CSS でテキストの色と同じボーダーの色を設定する方法
CSS でテキストの色と同じボーダーの色を設定する方法について。 実は border-color を指定しない場合、 border-color は自動的に color の色になります。 ですので以下のように設定すれば、ボーダーの色が自動的に テキストの色と同じになりま…
CSS でテキストフィールドのフォーカス時の枠を取る方法
CSS でテキストフィールドが focus されたときに自動的に付くボーダーを外す方法についてです。 ここではテキストフィールドと書いていますが、 textarea や button 、 submit ボタンなどでも共通かと思います。 私がチェックした Chrome 、 Fir…