Q&A
ご返信ありがとうございます。
すでにその対応はしておりますが、ブラウザ上の1番上だけ、どうしても空白が消えず…そういうものなのでしょうか…
初心者です。
自分で今ホームページを作っています。
その中で、inputタグでリンクボタン作っています。しかし、クリックすると身に覚えのないshadow-box効果が出ます。
また、話は変わりますが、身に覚えのない空白(おそらくデフォルトでpaddingが効いてる？)があります。
使用しているブラウザはGoogle Chromですが、これは勝手にデフォルト値として決まってしまうのでしょうか？
もしデフォルト値が決まっているとしたら、どのようにして解除すれば良いでしょうか
回答2件
0
ベストアンサー
CSSの地獄へようこそ
まぁ、ノウハウなんかもありますので、ボチボチ見ていってください。
使用しているブラウザはGoogle Chromですが、これは勝手にデフォルト値として決まってしまうのでしょうか？
例えばulなんかの箇条書きを定義する要素があります。
箇条書きってこんな感じに「字下げ」してないと分からないですよね？
- 要因A
- 要因B
- 要因C
基本的に、この箇条書きのドットや字下げで何px動くかの初期値は
ブラウザが勝手に決めるようになっています。
Chrome、Firefox、Opera、Safari……とブラウザは沢山ありますが、
見え方が同じになる保証は一切ありません。
また、これはブラウザの問題ではありませんが、
パソコンによって文字を画面で表現する為に使うフォントはOSにより異なります。
例えばWindowsやMacにはそもそもインストールされているフォントが全く違う為
Windowsのパソコンではレイアウト崩れしないけど、
Macで見るとフォントが違うので、文字が太く横幅を消費しつくして改行され
レイアウト崩れが発生してしまうケースは頻発します。
これが地獄と表現した理由です。
もしデフォルト値が決まっているとしたら、どのようにして解除すれば良いでしょうか
とりあえずこの辺読んで勉強しましょう。
2020年版！おすすめのリセットCSSまとめ
デフォルト値がまちまちなら、
挙動を同じにしてしまえばええやんってなりますよね。
その為に作られたのがリセットCSSと呼ばれるジャンルになります。
純粋なリセットCSSは、箇条書きや、題名等の挙動も容赦なく消し去るので、
Webデザイナーは好みますが、
Webエンジニアなどには敬遠される傾向にあります。
人気があるのが「Normalize.css」ですかね。
とりあえずこれを上の方で読み込ませてから使えば、
レイアウト崩れだけで各種ブラウザで確認＆作業を続けて工数が爆発して死ぬみたいな未来は回避出来るかと思います。
記事によれば「A Modern CSS Reset」も猛追しているようですね。
投稿2020/12/18 10:47
総合スコア21203
0
ブラウザの初期スタイルは、
CSS
1* { 2 margin: 0px; 3 padding: 0px; 4} 5```[参考](http://www.htmq.com/tutorial/08_5.shtml)
投稿2020/12/18 10:22
編集2020/12/18 10:22
総合スコア2722
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/18 12:14