デベロッパーツールで確認出来るCSSの「user agent stylesheet」について

f:id:ryoutaku_jo:20190711222301p:plain

【結論】

・「user agent stylesheet」とは、ブラウザ毎に定義されているデフォルトのCSS

GoogleChromeデベロッパーツールで確認する事が可能

・リセットCSSを使っても消えない場合があり、その時はスタイルを上書きして対処する

【目次】

【本題】

user agent stylesheet

全てのブラウザはデフォルトでCSSを持っています。

それにより、本来意図したCSSが適用されず、ページのデザインが崩れてしまうことがあります。

「user agent stylesheet」とは、そういったデフォルトのCSSを指します。

「user agent stylesheet」は、GoogleChromeデベロッパーツールで確認する事が可能です。

f:id:ryoutaku_jo:20190711224154p:plain

f:id:ryoutaku_jo:20190711224205p:plain

リセットCSSについて

こういったブラウザ固有のCSSを打ち消す為に、リセットCSSが存在します。

リセットCSSは無料でコードが配布されていたりするので、簡単に導入する事が可能です。

webdesign-trends.net

coliss.com

適用されない場合もある

しかしリセットCSSを使用しても消えない場合もあるので、その場合はスタイルを上書きして修正します。

f:id:ryoutaku_jo:20190711224216p:plain

f:id:ryoutaku_jo:20190711224229p:plain

参考情報

Chromeのデベロッパーツールに出てくる「user agent stylesheet」とは

user agent stylesheetとは何者か - 日々精進

https://coliss.com/articles/build-websites/operation/css/user-agent-stylesheets.html

CSSのuser agent stylesheetとは。 - よくきたわね、いらっしゃい

《今日の学習進捗(3年以内に10000時間に向けて)》

機能性を重視して複雑になってしまった機能の改修を行っているが、シンプルな構成を維持することの難しさを改めて感じた。

自社のサービスがSaaSという事もあり、様々な要望に汲み取って機能を増やしているが、それによって操作が複雑になったり、一画面の情報量が多くなった箇所が増えたことで、さっと試した人に取っ付きにくいという印象を与えてしまうことを懸念している。

例えば、必ずしも全ての人が設定しない項目も、等しく表示されることで、設定不要な人から煩わしく感じられるかもしれないといったことである。

(例え任意の項目ばかりだったとしても、設定項目が大量に並んでいると、心理的なハードルは上がると考えられる。)

また、ある程度サービスに触れた人から出た要望というのは、サービスに初めて触れる人にとっては仕様を理解しづらいかもしれない。

必須で無かったり、使用する人が稀な機能であれば、フォームを目立たない様にしたり、本流のサイト導線とは別のところに設定画面を設けるなどして、心理的な負担を軽減させる措置は必要だと考えている。

学習開始からの期間 :216日
今日までの合計時間:2092h
一日あたりの平均学習時間:9.7h
今日までに到達すべき目標時間:1973h
目標との解離:119h
「10,000時間」まで、

残り・・・「7908時間!」