ホームへ

【CSS/html】inputやボタンのフォントを指定,継承させる方法

2022年07月21日

「inputを別のフォントにしたい」

「input,textarea,select,buttonが別のフォントになってる!?」

input,textarea,select,buttonのフォント(書体)を指定,継承させる方法を解説します。

font-familyを指定する

フォント(書体)を指定するにはfont-familyを指定します。




<style>
input,textarea,select,button{
    font-family: "游明朝 Medium";
}
</style>
<input type="text" value="inputテキスト"><br>
<textarea>textareaテキスト</textarea><br>
<select><option>selectテキスト</option></select><br>
<button>buttonテキスト</button>

フォントについては下記も参考にしてください。

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

inputはfont-familyを継承しない

font-familyは本来、子孫要素へ継承します。よってbodyに指定するとサイト全体のフォントを統一させることができます。

ただし、input,textarea,select,buttonはfont-familyを継承しません。

解決方法

「*(アスタリスク)」はすべてのセレクタを示すセレクタです。これにfont-familyを指定することでinput,textarea,select,buttonにもフォントを指定できます。

*{
    font-family: "游明朝 Medium";
}

サイト内のフォントをすべて統一させる場合はこれでもいいですが、他のフォントも指定することがある場合、この方法では継承においてうまくいかないことがあります。

それを避けるために、bodyを含めて(あるいは個別に)input,textarea,select,buttonにfont-familyを指定しましょう。

body,input,textarea,select,button{
    font-family: "游明朝 Medium";
}

そもそも継承さえすればいいのですから、input,textarea,select,buttonに「font-family:inherit」を指定しましょう。「inherit」はどのCSSでも使える値で、親と同じ値にする(継承させる)値です。

body{
    font-family: "游明朝 Medium";
}
*{
    font-family: inherit;
}

「*」に継承することを指定しておけば漏れもありません。

【まとめ】inputのフォントを指定する方法

inputにfont-familyを指定する

input,textarea,select,buttonはfont-familyを継承しない

→これらか「*」に「font-family:inherit」を指定する

以上、input(テキストボックス),textarea,select,buttonのフォント(書体)を指定,継承させる方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ