【CSS/html】ボタンの色を変える方法マンガでわかるホームページ作成ホームへ【CSS/html】ボタンの色を変える方法2022年05月01日htmlの標準のボタンは背景色が灰色で目立ちません。「でもボタンを目立たせたい!」ボタンの色を変える方法を解説します。「入力中のテキストボックスの色を変えたい」「選択されたラジオボタンの色を変えたい」CSSでinput(テキストボックス,ラジオボタン)の文字色を変える方法を解説します。「テキストボックスをグレーにして入力できることがわかるようにしたい!」テキストボックスの色を変える方法を解説します。「ボタンを押したことがちゃんとわかるようにしたい」どのボタンをクリックしたかわかるようにしたい」クリックしたら色が変わるボタンの作り方を紹介します。【背景色を変える】backgroundbackgroundは背景を指定するCSSです。これにカラーコードを指定すると指定した色になります。background【背景の指定方法】CSSにおいて背景を指定するには「background」プロパティを使います。backgroundでは主に5つのプロパティがあり、それらを説明します。この記事を読むCSSでのカラーコード(色)の書き方Webサイトでは背景色、線の色、文字の色など色(カラーコード)を指定する場面が多々あります。色(カラーコード)の書き方を3つ紹介します。この記事を読むCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【枠線を変える】border標準の枠線は少し太いのと上左と右下で微妙に色が違っていてダサいです。borderを指定すると枠線を変えることができます。borderには線の太さ、種類、色を指定します。borderおよびborderに関連するCSSプロパティの種類一覧を実例とともに紹介します。この記事を読む【余白を増やす】paddingボタンの余白がないと窮屈な印象を与えたり、そもそも押しづらいものです。paddingを指定すると枠線と文字の間の余白を取ることができます。値は上下、左右で指定できます。横長のボタンの場合は左右の余白を多めにとるとバランスがよくなります。class="example3">【CSS】marginとは?paddingとは?両者の違い・使い分けについてmarginとpaddingはボックスの余白を調整するCSSです。marginとpaddingの使い方や違いについて説明します。この記事を読む【文字色を変える】colorボタンを目立たせるためにもう少し濃いめのボタンにしたいこともあるでしょう。濃いめのボタンにしたときは文字色を白にしたほうが読みやすいですね。colorは文字色を変えるCSSです。#FFFを指定して白文字にしましょう。class="example4">背景色が濃いときは枠線が邪魔になることがあります。noneを指定すると枠線を消すことができます。class="example5">widthは横幅を指定するCSSです。height【要素の幅と高さを指定】CSSのwidth(幅)とheight(高さ)の指定について説明します。あわせて注意点、min-width(最小幅)、max-width(最大幅)についても説明します。center」で文字を中央寄せしましょう。【背景色を変える】background【枠線を変える】border【余白を増やす】padding【文字色を変える】color【横幅を変える】width以上、ボタンの色を変える方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。