
cssは全くの初心者です。教本で勉強しながらサンプルを動かしています。
reset.cssとstyle.cssの二つを利用し、
resetでブラウザの設定をリセットする形をとっています。
resetの内容は下記です。
-------------------------
@charset "UTF-8";
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
border: none;
}
img {
vertical-align: top;
}
-------------------------
ところが、実験的に検索ボタンを設けようと
<input Type="submit" name="subm" value="検索">
を追加したら、ボタンの境界線が消えてしまいました。
これを回避するにはどうしたらいいのでしょうか?
ちなみに<div>で囲って個別に境界線を設定する、という方法もあり、やってみましたが、
ボタンらしく見えませんでした。検索ボタンだけreset.cssの「border: none;」を
適用しない、なんて方法はあるのでしょうか?
No.2ベストアンサー
- 回答日時:
inputのborderを表示させたいだけならこれだけ追加すれば大丈夫だと思います。
input{
border:1px solid;
}
ただ、safari・opera等のブラウザだとボタンの形がデフォルトの状態とは違うものになってしうことがあります。
input要素に対してmarginとかpaddingとかborderとかを指定するとスタイルが崩れることが多いんです。
なので、全称セレクタはinput要素を使用する場合はリセットに使用されない方が良いということになります。
webサイト内で使っている他の要素全てを指定してリセットをかけてやりましょう。
そうすれば追加でのinputの指定が必要なくなりますし、ブラウザのデフォルトのスタイルのinput要素が表示されるはずです。
h1, h2, p, a, img, ul, ol, li{
margin: 0;
padding: 0;
list-style: none;
font-size: 100%;
border: none;
}
ご親切にありがとうございました!
>h1, h2, p, a, img, ul, ol, li{
なるほど、こんな方法もあるんですね!
参考になりました!
とりあえずこの方法で一度乗り切ってみたいと
思います。
ありがとうございました!
No.1
- 回答日時:
なぜそこまでリセットするのかわかりません。
リセットすれば、すべての要素について改めて設定しなけりゃならなくなる。結果的にCSSは膨大な利用になる。もちろん、あなたが、すべての要素のプロパティに関して初期値が何であるかをすべて把握しているのなら、それもよいでしょうが?単純にborder:noneの行を外せばよいです。
{list-style: none;
font-size: 100%;
border: none;
}
img {
vertical-align: top;
}
はしないほうが良いと思います。
個別に指定したほうがCSSもスリムになる。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
含む含まないという概念自体の...
-
emとstrongの反対
-
改行ほどは行かないけど、若干...
-
親要素・子要素
-
【ヒトの神秘】美男美女から何...
-
質問1.
-
overflow:hidden について
-
html タグの閉じスラッシュ前の...
-
マージソートの計算量について-...
-
このサイトのカテゴリのチェッ...
-
テンソル解析(絶対微分学)は...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
textareaの幅を画面と合わせたい
-
既婚男女の方、結婚前と結婚後...
-
textareaにタグを挿入したい。
-
<br /><hr />どっちを使ったら...
-
"A style=" のタグの意味を調べ...
-
エクセルでグラフにマークを入...
-
2個のFormを横並びにしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テンソル解析(絶対微分学)は...
-
含む含まないという概念自体の...
-
見た目と声さえ良ければ、他の...
-
既婚男女の方、結婚前と結婚後...
-
smallにtext-allignが効かない
-
1から100までの自然数のうち、2...
-
改行ほどは行かないけど、若干...
-
NからZへの全単射を具体的に構...
-
aの中にspan
-
input type="hidden"で取得した...
-
マージソートの計算量について-...
-
角丸画像の背景色を透明にした...
-
HTML の繰返し法???
-
【ヒトの神秘】美男美女から何...
-
textareaの幅を画面と合わせたい
-
CSSで改行後の行間調整
-
HTMLページ上でiframeを最前面...
-
質問1.
-
html タグの閉じスラッシュ前の...
-
tdに対してmin-heightの定義、...
おすすめ情報