10月15日(水)1コマ目

今日、やったこと

文字の色やサイズを変える

今日のホワイトボード

 文字の色、サイズを変える

タグのstyle属性で見た目を設定できる。

図　style属性

プロパティ名は各設定項目ごとに用意されている。

プロパティ名	設定内容
color	文字色
font-size	文字の大きさ
font-style	文字を斜体にする
text-decoration	文字に下線、上線、取り消し線を追加
font-weight	文字の太さ

たとえば、<h1>タグで挟まれた見出しの文字を赤色で表示するには、下図のように

• <h1>タグにstyle属性追加
• style属性にて、プロパティ名color、設定値#ff0000を指定

すればいい。

図　<h1>タグにstyle属性で文字色指定

設定したい範囲がタグで挟まれていない場合は、<span></span>で挟んで範囲を指定。

<span>タグは範囲を作るためのタグで見た目には影響なし。

練習問題

正解例をあげておきます。

タグのネスト

タグは下図のように、ネスト（入れ子）構造にすることができる。

図　タグのネスト

Webブラウザの便利機能

MicrosoftのEdgeやGoogle Chrome（Chromiumたち）には「開発者ツール」または「Developer Tool」がある。これを使うとHTMLのデバッグが楽にできる。

①開発者ツールたちあげ

ブラウザ右上の…ボタンをクリックし、表示されたメニューから「その他のツール」->「開発者ツール」を選択。

図　開発者ツール立ち上げ

②「要素」タブをクリック

HTMLが表示される。特定の行を選択すると、その行のデザイン設定が右側に表示される。

図　要素タブをクリック

③デザイン設定を間違えると

デザイン設定を間違えると、下図のように取り消し線が表示される。

図　デザイン設定を間違えると

次回は

見た目の設定のつづき。