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で質問しましょう!
似たような質問が見つかりました
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
質問1.
-
テキストボックスの中にリンク...
-
親要素・子要素
-
HTMLです 四角みたいにして中に...
-
2個のFormを横並びにしたい
-
超音波で洗脳。
-
アコーディオンメニューの二階...
-
CSSのセレクタに指定するbodyと...
-
HTMLです次の意味を持つ要素ま...
-
CSS:overflow要素の印刷について
-
タグの締め
-
下線と文字の間を調整するには...
-
「諸要素」とはどういう意味で...
-
含む含まないという概念自体の...
-
改行ほどは行かないけど、若干...
-
角丸画像の背景色を透明にした...
-
border: noneでボタンの境界線...
-
submit buttonの違い
-
tdに対してmin-heightの定義、...
-
CSSで改行後の行間調整
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
還暦を過ぎた方々に質問です。
-
「諸要素」とはどういう意味で...
-
質問1.
-
textareaの幅を画面と合わせたい
-
角丸画像の背景色を透明にした...
-
2個のFormを横並びにしたい
-
テキストボックスの中にリンク...
-
HTMLです 四角みたいにして中に...
-
CSS:overflow要素の印刷について
-
input type="hidden"で取得した...
-
tdに対してmin-heightの定義、...
-
HTMLページ上でiframeを最前面...
-
タグは大文字と小文字どちらが...
-
HTMLです
-
2行にしたい要素、改行か分割...
-
改行ほどは行かないけど、若干...
-
H1タグを画像にしたい
おすすめ情報