質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

4464閲覧

labelで勝手に文字が太くなります。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/12/19 08:30

編集2022/01/13 09:10

メールフォームを作っているのですがlabelタグの文字だけ勝手に太字になってしまいます。普通の太さに戻したいのですが、どうすればいいでしょうか。教えてください。

<from action="#" metgod="post"> <div class="row foam"> <div class="address col-xs-6 col-sm-6 col-md-6 col-lg-6"> <p class="name"> <label for="name">お名前(必須)</label> <input type ="name" name="user_name" id="name"> </p> <p class="kana"> <label for="kana">フリガナ(必須)</label> <input type="kana" name="user_kana" id="kana"> </p> <p class="sex">性別(必須) <input type="radio" name="gender" value="man"> 男性 <input type="radio" name="gender" value="woman"> 女性 </p> <p class="tel"> <label for="tel">電話番号(必須)</label> <input type ="tel" name="user_tel" id="tel"> </p> <p class="mail"> <label for="mail">メールアドレス(必須)</label> <input type ="email" name="user_mail" id="mail"> </p> </div> <div class="address col-xs-6 col-sm-6 col-md-6 col-lg-6"> <p class="question"> <label for="question">ご質問・ご相談</label> <br> <input type ="question" name="user_question" id="questison"> </p> </div> </div> <br class="con-br"> <div class="button"> <button type="submit">送信<i class="fa fa-angle-right"></i></button> </div> </from>

ちなみにcssはこれしか書いていません。

.foam p { text-align: left; font-family: "Meiryo"; text-align: left; font-size: 16px; font-weight: normal; color: #535353; } button { outline: none; background-color: #8edee1; border: 1px solid #59cdd1; color: #fff; letter-spacing: 35px; padding: 15px 25px 15px 95px; } button:hover { opacity: 0.8; color: #fff; }

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2017/12/19 08:36

タグにbootstrapとありますが、bootstrapのcssが読み込まれているという認識ですか?
退会済みユーザー

退会済みユーザー

2017/12/19 08:38

わかりずらくてすみません!作業環境がDWなのでbootstrapのcssも読み込まれています。記載したcssはstyleに私が書き込んだものです。
guest

回答4

0

Bootstrap 3では、labelのスタイルを変えて太くしています。

CSS

1label { 2 display: inline-block; 3 max-width: 100%; 4 margin-bottom: 5px; 5 font-weight: bold; 6}

Bootstrap 4なら変わりません。

CSS

1label { 2 display: inline-block; 3 margin-bottom: .5rem; 4}

4にするのも大変だと思うので、自前のスタイルでもどしてあげればいいです。

CSS

1label { 2 font-weight: normal; 3}

投稿2017/12/19 08:47

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/19 09:16

なるほど!バージョンも確認してみます。ありがとうございます!
guest

0

ベストアンサー

bootstrapをご利用されている場合、labelタグを使用すると

css

1label { 2 display: inline-block; 3 max-width: 100%; 4 margin-bottom: 5px; 5 font-weight: 700; 6}

などと自然にlabelにfont-weightが付く使用になってしまいます。
そのため、新たにlabelにcssを例えば以下のように指定してあげることでlabelの太字は解消されるかと思われます。

css

1.foam p label{ 2 font-weight: normal !important; 3}

投稿2017/12/19 08:46

hatsu

総合スコア1809

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/19 09:15

きれいに治りました!ありがとうございます。わかりやすかったです。
guest

0

labelタグの文字だけ勝手に太字になってしまいます

十中八九環境側で読み込んでいるstyleが原因です。
ChromeやIEやEdgeやFireFoxには開発者ツールと呼ばれるものがついています。開発者ツールにはインスペクタと呼ばれる機能があり、HTMLのタグ構造を解析して、どの要素にどんなスタイルが適用されているかを覗き見ることができます。お使いのブラウザに合わせてやり方は違うので、ご自分で調査してみてください。
Chromeであればメニュー→その他のツール→デベロッパーツール等で開発者ツールが開きます。インスペクタは開発者ツールの一番左上の「四角形に矢印が刺さっている」ようなアイコンを押すことでインスペクタモードになります。この状態で表示されている要素をクリックすると、開発者ツール内にその要素のstyle等が表示されます。
原因がわかったら、それを打ち消すようなstyle指定をcssに追記してください。

投稿2017/12/19 08:44

masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/12/19 09:15

原因がわかりました!ありがとうございます。
guest

0

bootstrapをつかっていますか?
その場合、bootstrapのCSSがlabelタグにfont-weightを適用しています。

labelタグ内にstyle="font-weight:nomal;"を追加してみてください。
それで文字の太字が解除されるようなら、これをCSSのクラスに定義する等でご対応ください。

投稿2022/01/13 00:10

elms

総合スコア4

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問