HTML入門編（５）（style 属性を付けて背景色を変えてみる）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！

第５回では、フォーム（テキストボックス）の背景色や形を style 属性を使って変えてみます。

1 フォームの背景色や形を変えたサンプル
2 フォームの背景色や形を変えてみよう
- 2.1 ■ style 属性を使って背景色を変える
- 2.2 ■ 枠線の色、枠線の種類、枠線の形を変える
3 まとめ
- 3.1 ■　次の記事に進む
- 3.2 ■　最初から読む

フォームの背景色や形を変えたサンプル

第三回で作ったフォームはテキストボックス（１行）の背景色は「白色」でした。

この背景色や形を好きな色に変えることができます。

ポイント

フォームの背景色や形を変えてみよう

背景色や形を style 属性を使って変えてみます。

■ style 属性を使って背景色を変える

テキストボックス（１行）の背景色の変え方です。

ポイント

Step.1 style 属性を使う

「HTMLタグ」で表現した対象のスタイル（色や形、装飾）を指定することができる属性 style 属性を利用して背景色を指定します。

「カスタムHTMLブロック」に次のサンプルを記述します。

Step.2 style 属性の使い方

style 属性は、値の部分に、どのように装飾するかの指定を行います。

「プロパティ」は「何を？」です。どんな装飾をしたいのかを指定します
「値」は、「どうするか」です。どのように装飾したいのかを指定します
「プロパティ」と「値」の間を「：」（半角のコロン）で区切ります
最後に「；」（半角のセミコロン）を書くことで「最後です」と明示します

上述の "width : 80%” では、対象の横幅を全体の 80% で表示してね。と指定しています。

同時に２種類以上の装飾を指定する場合は、style の値（" ～～ " の部分）に連続して記述します。

Step.3 背景色の指定は "background-color" を使う

背景色を指定する場合は、"background-color" を用います。色は２種類の方法でで指定することが可能です。

色の指定方法（１）：色の名前で指定する

色の名前（red、blue、yellow、black、white）で指定することができます。

色	指定する例
赤	style="background-color : red;"
青	style="background-color : blue;"
黄色	style="background-color : yellow;"
黒	style="background-color : black;"
白	style="background-color : white;"

※ 指定できる色の名前は他にも多数あります。（ "Cyan" や "Magenta" など）

色の指定方法（２）：カラーコードで指定する

色のカラーコードで指定することができます。

色	指定する例
赤	style="background-color : #FF0000;"
青	style="background-color : #0000FF;"
黄色	style="background-color : #FFFF00;"
黒	style="background-color : #000000;"
白	style="background-color : "FFFFFF;"

ポイント

「カラーコード」とは、色をR（赤）、G（緑）、B（青）の３原色で数値化して表したものです。

赤：０～２５５（１６進数で００～ＦＦで表す）
緑：０～２５５（１６進数で００～ＦＦで表す）
青：０～２５５（１６進数で００～ＦＦで表す）

「１６進数ってなんぞや？」と思った方は、「数字を１６個の記号（０－９、Ａ－Ｆ）で表したものだ！」と覚えておいてください。

色の名前を、カラーコードを次のページで確認できます。参考にしてください。

: ブログで使う【色】【カラーコード】サンプル・早見表・色見本・カラーピッカー

サイトに大事な色設定、いろいろ配色ためしたい。そんなときに必要なカラーを試作するページ。カラーコード打ち込んで、実際の色を確かめる。あれよこれよと悩んでいたら、いつまでたっても決まらない。……いや、そこは決めましょう！コードを打つと色が確認できるページです。配色考えるときの参考にしてください。

続きを見る

Step.4 完成です

完成です。プレビューなどで実際の画面を見て確認してください。

■ 枠線の色、枠線の種類、枠線の形を変える

テキストボックス（１行）の枠線の色、枠線の種類、枠線の形の変え方です。

ポイント

Step.1 style 属性を使う

「HTMLタグ」で表現した対象のスタイル（色や形、装飾）を指定することができる属性 style 属性を利用して枠線の色、枠線の種類、枠線の形を指定します。

「カスタムHTMLブロック」に次のサンプルを記述します。

<form>
■ 枠線の色を変える<br>
<input style="width : 80%;border-color: red;" type="text" value="枠線の色を変えました（赤色）"><br>
<br>
■ 枠線を点線で表示する<br>
<input style="width : 80%;border-color: black; border-style: dashed;" type="text" value="枠線を点線にしました"><br>
<br>
■ 角丸にする<br>
<input style="width : 80%;border-color: black; border-radius: 10px;" type="text" value="枠線の角を丸くしました"><br>
</form>

Step.2 style 属性で枠線を指定する方法

枠線を指定する方法で、今回用いたプロパティ（指定）は次の通りです。

プロパティ	説明	値
border-color	枠線の色を指定する	"red" で赤色を指定しています
border-style	枠線の形（直線、点線など）を指定する	"dashed" で点線を指定しています
border-radius	枠線の角の丸みを指定する	"10px" で 10ピクセルで丸みをつけるように指定しています

Step.3 完成です

完成です。プレビューなどで実際の画面を見て確認してください。

まとめ

背景色や、枠線の色、形、丸みなどは、style 属性を利用することで自由にカスタマイズ（指定）することが可能です。

style は利用の幅が広く、多様な装飾を可能にします。上手く使うと、オリジナリティあふれる見た目の記事が書けますね。

■　次の記事に進む

: HTML入門編（６）（最強タグ div と span）

WordPress で記事を書いていく中で、HTML も一緒に使ってみたい方へ！第６回では、最強タグ div と span が何故に最強か？を具体的なサンプルを使いながら解説します。

続きを見る

■　最初から読む

: HTML入門編（１）（WordPress で HTML を使ってみよう！）

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。「HTML を使うことでできること」、そして、「そもそも HTML とは何か？」から紹介し、HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

続きを見る