Chromeでinputやtextareaといった要素をfocusした際に表示される輪郭線(outline)を消す方法をご紹介しています。Chromeでinputをfocusすると線が表示されてデザインが崩れてしまう......どうすれば消せるの?上記の疑問にお答えします。結論Chromeのinputをfocusした際に表示される輪郭線は、下記を指定することで消すことができます。none;}input要素のみの場合は下記のように指定します。none;}outlineは要素の輪郭線を設定するプロパティです。詳細は下記をご参照ください。https://developer.mozilla.org/ja/docs/Web/CSS/outline輪郭線はどこで定義されているのかこの輪郭線はブラウザのユーザーエージェントが持っているデフォルトのスタイルシートで設定されています。stylesheet」と表示されているものです。本記事ではfocusをピックアップしていますが、focusの輪郭線だけではなくほとんどの要素に対してデフォルトのスタイルが設定されています。スタイルシートの全容は下記のリンク先にて確認できますので、興味がある方はぜひ!せっかくなのでChrome以外のデフォルトのスタイルシートのリンク先も掲載しておきますね。(他も見つけ次第準備追加していきます。https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css最後に本記事を執筆するに伴い、改めて色々なWEBブラウザを触ってみました。現在は仕事・プライベート共にChrome一辺倒の私ですが、昔はFirefoxやOperaも使っていました。Firefoxの急に落ちるバグによってChromeに移行したのですが、今は改善したのかな。したらメインブラウザに戻したい気もするので、久しぶりにがっつり使ってみようかなと思います。気分転換に他のブラウザで仕事をしてみるのも悪くないものです。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。