タグ・デザイン掲示板

[

名前変換ページのCSS
by はち

2018-01-12 12:39

現在、名前変換画面レイアウトは独自タグを利用し、全体にid指定をかけてCSSにてデザインを入れています。

入力欄フォーム、設定ボタンは反映されるのですが、クリアボタンだけ初期設定のままになってしまいます。

このように入力してるのですが、何かおかしな部分がありましたらご指摘お願い致します。

/* フォームのスタイル */
#dream form{
width:auto;
margin-top:2px;
padding:1px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border: 2px solid #B0E0E6; }
}

/* 入力欄のスタイル */
#dream input[type='text']{
width:auto;
margin-top:2px;
padding:1px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border: 2px solid #B0E0E6; }
}

/* クリアボタンのスタイル */
#dream input[name='clear']{
width:auto;
padding-right:5px;
padding-left:5px;
margin:1%;
text-align:center;
font-family: 'Unkempt',DotumChe,serif;
font-size:13px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border-left: 2px solid #B0E0E6;
border-top: 2px solid #B0E0E6;
border-right: 2px solid #B0E0E6;
border-bottom: 2px solid #B0E0E6;
/* 角を丸くする */
border-radius:2px;}

/* 設定ボタンのスタイル*/
#dream input[name='set']{
width:auto;
padding-right:5px;
padding-left:5px;
margin:1%;
text-align:center;
font-family: 'Unkempt',DotumChe,serif;
font-size:13px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border-left: 2px solid #B0E0E6;
border-top: 2px solid #B0E0E6;
border-right: 2px solid #B0E0E6;
border-bottom: 2px solid #B0E0E6;
/* 角を丸くする */
border-radius:2px;}

フォームのスタイルは、誤って入力フォームのデザインを入れたらなんか反映できたのでそのままにしてるのですが、ここは本来どういった設定を入れるのでしょうか。

/* 設定ボタンのスタイル*/
#dream input[name='set']{～

などはテンプレとして教えていただき、あとは好みのデザインにするのに指定を足してと言われたのでやってみたのですがなかなか上手くいきません。

pc
[編集]

by 774

2018-01-12 13:48
『フォームのスタイル』『入力欄のスタイル』の}が二重になっているのが原因です。各一つずつに修正してみてください。

セットボタンとクリアボタンや、枠の上下左右でデザインを変えるなら分けて記述すべきですが、両方一緒で良いならまとめちゃった方が楽と思いますよ。

/* フォームのスタイル */
#dream form {
width:auto;
margin-top:2px;
padding:1px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border: 2px solid #B0E0E6; }
}

/* 入力欄のスタイル */
#dream input[type="text"]{
width:auto;
margin-top:2px;
padding:1px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border: 2px solid #B0E0E6;
}

/* ボタンのスタイル */
#dream input[type="submit"]{
width:auto;
padding: 0 5px;
margin:1%;
text-align:center;
font-family: 'Unkempt','DotumChe',serif;
font-size:13px;
/* 文字色 */
color:#c49a6a;
/* 背景色 */
background-color:#fff;
/* 枠の色 */
border: 2px solid #B0E0E6;
/* 角を丸くする */
border-radius:2px;}

▼フォームのスタイル
>ここは本来どういった設定を入れるのでしょうか。

言ってしまえばなんでもいいです。

▽正式名称
│セレクタ {
│　　プロパティ: 値;
│}
▽わかりやすく
│どこを {
│　　どういったデザインにするか
│}
<style>要素間でのCSSの基本的な記述は上記です。

該当箇所のセレクタは『#dream form』なので『id="dream"』要素内の『<form>』要素に反映されます。そこに反映させたい指定を記述しましょう。
詳細は『CSS セレクタ』『CSS プロパティ』『CSS 「やりたいこと」』での検索をお勧めします。

もしレイアウト内で独自タグを使っているようならHTMLタグとして確認できないので思考として紐づけし難いかもしれませんが、一度該当ページのソース表示をしておくと実出力HTMLが見られるのでどのタグにスタイルが掛かっているか少しわかりやすいと思います。

pc
[編集]

by はち

2018-01-12 14:05
ご丁寧にありがとうございます！！

ご指摘いただいた通りに修正し、まとめられるところはまとめたらスッキリできました。

ありがとうございました！

pc
[編集]

[