CSS

csscomb で設定ファイルが見つからないエラーの対処方法

CSS の自動整形ツール csscomb を使っていて、設定ファイルがないというエラーが出る場合があります。

Configuration file /path/to/.csscomb.json was not found.

私の知るところでは、このエラーの原因には次の 2 つのパターンがあります。

  1. 設定ファイルがない
  2. 設定ファイルはあるがシンタックスエラーがある

前者の「設定ファイルがない」かどうかは、単純にファイルの存在をチェックすれば OK です。 ユーザのホーム直下に置いた設定ファイルなどがなくなっていないか確認しましょう。

水平メニューを作る CSS のスタイルまとめ

ウェブサイトでよく見かける「横方向に並ぶメニュー」の作り方についてまとめてみます。

記事執筆時点では、主流の横方向に並ぶメニュー(以後「水平メニュー」)の作り方は大きく分けて 4 つあります。

  1. float を使う方法
  2. inline-block を使う方法
  3. table レイアウトを使う方法
  4. flexbox を使う方法

以下それぞれの実装方法( HOW )について述べていきますがまずその前にそれぞれのメリット/デメリットと使いどころ( WHEN )について確認してみたいと思います。

Google Maps の埋め込み地図をレスポンシブにする方法

Google Maps の埋め込み地図をレスポンシブ化する方法について。

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

CSS(SCSS):

CSS でテキストの色と同じボーダーの色を設定する方法

CSS でテキストの色と同じボーダーの色を設定する方法について。

実は border-color を指定しない場合、 border-color は自動的に color の色になります。 ですので以下のように設定すれば、ボーダーの色が自動的にテキストの色と同じになります。

target-element {
  color: #abc;
  border: 1px solid;
}

CSS3 ではこれを明示的に表すためのキーワード currentColor というものが導入され、以下のように記述することが可能となっています。

CSS でテキストフィールドのフォーカス時の枠を取る方法

CSS でテキストフィールドが focus されたときに自動的に付くボーダーを外す方法についてです。

ここではテキストフィールドと書いていますが、 textarea や button 、 submit ボタンなどでも共通かと思います。

input:focus {
  outline: none;
}

私がチェックした Chrome 、 Firefox ではこれで無事解決となりましたが、ブラウザによっては box-shadow なども設定する必要があるようです。