[フォーム,線]ChromeやOperaなど一部のブラウザでは、フォーカスのあるテキスト入力欄(=カーソルの入った状態の編集領域)に独自の枠線を加えて描画します。テキストエリアの枠線を独自にデザインしているページでは、この仕様はちょっと邪魔です。独自デザインの枠線の外側に、ブラウザ側がさらに枠線を加えてしまって、枠が二重に見えてしまうからです。テキスト入力欄を角丸にしていると、見た目がおかしくなります。そんなときには、ブラウザ側が独自の枠線を付加しないようCSSで指定しておけば解決します。Chromeなどで、テキストエリアのフォーカス時に枠線を自動付加させたくない枠が二重になるのは、borderではなくoutlineだからChromeなどがテキスト入力欄に枠線を加えないようにする書き方いろいろあらゆるフォーカス時に、ブラウザが枠線を加えないようにする書き方テキストエリアのフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方1行テキスト入力欄のフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方Chromeなどがテキスト入力欄に枠線を加えないようにする動作サンプルChromeなどで、テキストエリアのフォーカス時に枠線を自動付加させたくないChromeやOperaなど一部のブラウザでは、フォーカスのあるテキスト入力欄(=カーソルの入った状態の編集領域)に独自の枠線を加えて描画します。通常はそれでも良いのですが、テキストエリアの枠線を独自にデザインしているページでは、この仕様はちょっと邪魔です。独自デザインの枠線の外側に、ブラウザ側がさらに枠線を加えてしまって、枠が二重に見えてしまうからです。テキスト入力欄を角丸にしていると、見た目がおかしくなります。そんなときには、ブラウザ側が独自の枠線を付加しないようCSSで指定しておけば解決します。Chromeなどのブラウザが、テキスト入力欄へのフォーカス時に自動で付加する枠線を消すには、outlineプロパティに値noneを指定するだけです。以下に、具体的なCSSソースの書き方などを紹介しておきます。枠が二重になるのは、borderではなくoutlineだからtextarea要素で作るテキストエリアや、input要素で作る1行テキスト入力欄の枠線を自分で装飾するには、主にborderプロパティが使われます。入力フォームに限らず、あらゆる要素の枠線を装飾したい場合にはborderプロパティを使いますよね。角丸にしたい場合は、border-radiusプロパティを使います。実は枠線を付加するプロパティは、borderプロパティだけではありません。outlineプロパティもあります。ChromeやOperaなどの一部のブラウザが(入力フォームにフォーカスが当たった際に)自動で付加する枠線は、borderプロパティではなくoutlineプロパティに値を加える方法で実現されています。CSSを使って、フォーカス時にoutlineプロパティの値を消す装飾を加えておけば、ブラウザによる枠線の自動付加を阻止できます。outlineプロパティで引く枠線の特長や方法については、別途「borderと違ってレイアウトに影響しない枠線が引けるoutlineプロパティ」で紹介していますので、ご参考にどうぞ。具体的には、以下のようにCSSソースを書くと良いでしょう。対象条件別に紹介しておきます。簡単なのは、あらゆるフォーカス時に一切枠線を付加しないようにする書き方です。このように書いておけば特に問題はないでしょう。:focus疑似クラスを使っています。要素名を特に指定していないので、あらゆる要素が対象になります。ここで、outlineプロパティの値をnoneにしているため、フォーカス時にも(outlineによる)枠線は付加されなくなります。※borderプロパティを使った枠線は、何の影響もなく表示されます。テキストエリアのフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方textarea要素で作るテキストエリアにカーソルが入った場合だけを対象にして、ブラウザが勝手に枠線を描画しないようにするには、以下のように書けば良いでしょう。:focus疑似クラスを使っています。1行テキスト入力欄のフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方input要素で作るテキスト入力欄にカーソルが入った場合だけを対象にして、ブラウザが勝手に枠線を描画しないようにするには、以下のように書けば良いでしょう。:focus疑似クラスを使っています。Chromeなどがテキスト入力欄に枠線を加えないようにする動作サンプル表示例は以下の通りです。最初の2つはoutloneプロパティを使っていないので、ChromeやOperaなど一部のブラウザでカーソルを入れると、自動で枠線が付加されます。1つ目は、元々枠線を装飾していないので、ブラウザが枠線を自動で加えてもおかしくは見えません。2つ目は、独自デザインとして角丸の枠線を加えてあるため、ブラウザがさらに枠線を加えると枠が二重に見えてしまいます。指定してあるため、テキスト入力欄内にカーソルを入れても、余計な枠線は付加されません。■上記に対して、ChromeやOperaなどの一部のブラウザがフォーカス時に枠線を付加しないようにしたテキストエリア:装飾なし(ブラウザによる枠線自動付加なし)枠線を装飾(ブラウザによる枠線自動付加なし)なお、フォーカスが当たっている場合にだけ特別な装飾を施すことは、今どこが入力可能状態なのか?を示す目的には役立ちます。したがって、上記のようにブラウザが標準で動的に加える枠線を消すのであれば、その代わりに「今ここが入力可能状態ですよ」と示すような別の装飾を加える方が望ましいでしょう。カーソルや文字が入っている間だけ一時的に入力欄を大きく表示するテキストエリアの作り方については、別の記事で紹介しますのでそちらもご参照下さい。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。下記の電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:例えばデザイナーである貴方が作成なさったデザイン物のHTML+CSSでの実装作業など、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。▲同じデザインでもCSSの書き方には多数の方法があります。どんな書き方を選択すればメンテナンス性の高いCSSソースになるのかがよく分かってお勧めです。▲PCだけでなく様々なサイズのモバイル端末に対応させるためのCSSの書き方などについて、カラーで見やすく解説されていて分かりやすいです。▲ユーザビリティとは何なのかを分かりやすく解説した本。読み物としても面白いです。■だから、そのデザインはダメなんだ。良い・悪いが比べてわかる▲何が原因で分かりにくくなってしまうのかを列挙したサンプル集。「こういうデザインだけは避けておこう」というマイナス回避の手段としても。知らないと困るWebデザインの新ルール4▲最近よく使われている様々なデザインパーツについて、それぞれの実現方法としてHTML+CSSソースの書き方を紹介しているTips集。カラーで見やすいです。掌田津耶乃さんによるBootstrap解説書。現場の新標準ガイド(マイナビ出版/368ページ)CSS(スタイルシート)に関する解説書は、HTMLを書く知識がどれくらいあるのかの前提が様々なので、自分に合う解説なのかどうかをプレビューなどで確認したり、目次から大まかな内容はチェックしておいた方が良いと思います。»スタイルシートTipsふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(7)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。▼当サイト内外で関連しそうな記事などが自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。