HTML / CSS を使う

HTML入門編(5)(style 属性を付けて背景色を変えてみる)


【第5回】HTML入門編(タイトル)



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

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


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


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

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


ポイント


■ 背景色




■ 枠線の色を変える


■ 枠線を点線で表示する


■ 角丸にする



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


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


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


テキストボックス(1行)の背景色の変え方です。


ポイント


■ 背景色


Step.1 style 属性を使う


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


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

<form>
    <input style="width : 80%;background-color: #FFFCDB;" type="text" value="背景色を変えました(黄色)">
</form>


Step.2 style 属性の使い方


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


style 属性の書き方

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

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


style 属性を複数指定する場合

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


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


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


色の指定方法(1):色の名前で指定する

色の名前(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" など)


色の指定方法(2):カラーコードで指定する

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


指定する例

style="background-color : #FF0000;"

style="background-color : #0000FF;"
黄色
style="background-color : #FFFF00;"

style="background-color : #000000;"

style="background-color : "FFFFFF;"

ポイント


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


  • 赤:0~255(16進数で00~FFで表す)
  • 緑:0~255(16進数で00~FFで表す)
  • 青:0~255(16進数で00~FFで表す)

「16進数ってなんぞや?」と思った方は、「数字を16個の記号(0-9、A-F)で表したものだ!」と覚えておいてください。



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

【Web Site】カラーコードサンプル(コードを指定して色を確認できます)

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

続きを見る


Step.4 完成です


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


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


テキストボックス(1行)の枠線の色、枠線の種類、枠線の形の変え方です。


ポイント


■ 枠線の色を変える


■ 枠線を点線で表示する


■ 角丸にする



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入門編(6)(最強タグ div と span)

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

続きを見る


■ 最初から読む

HTML入門編(1)(WordPress で HTML を使ってみよう!)

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

続きを見る




「WordPress で HTML / CSS を使う」一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ