【style属性でデザインの指定】

style属性でデザインの指定

style属性を使おう

ブログやホームページを作成していると、よくスタイルシートという言葉を耳にします。

これは、一般的にはHTMLファイルとは別に「.cssファイル」を作成して使うもので、サイトの詳細なデザインを指定するのに役立つものです。

しかし、HTMLファイルを作るだけでも大変なのにスタイルシートまで作るなんて面倒!なので、HTMLタグの中に、Style属性として、詳細なデザインの指定を行う方法が便利です。

【使い方】

例えば、
今までは<font>タグを使い、以下のように文字色を指定していたのが

<h1><font color=”#0000ff”>大見出し</font></h1>
<p><font color=”#C0C0C0″>〜〜段落〜〜</font></p>

<h1 style=”color:#0000ff;”>見出し</h1>
<p style=”color:#C0C0C0;”>

このように、h要素や、p要素などに、styleを属性として指定することが出来ます。

少しスッキリしましたね。

div要素

div要素とは、ブロック要素のことで、<div>〜</div>で挟んだところをひとまとまりとして定義します。

使い方としては、

<div style=”color:#666699;   font_size : 15;”>
<h1>見出しその1</h1>
<p>内容〜〜〜</p>
<br><br>
<h2>見出しその2</h2>
<p>内容〜〜〜</p>
</div>

見出しその1

内容〜〜〜

見出しその2

内容〜〜〜

div要素で囲んだ範囲を、まとめて文字色とサイズの指定が出来ました。

<div>〜</div>と<div>〜</div>間は、<br>で改行を入れなくても、自動に改行されます。

ですので、文章の途中など、改行せずに対象の文字にだけ適用させたい場合には<span style=””>を使うと便利です。

<span style=”color:#カラーコード;background-color:#カラーコード;”>文字</span>

「color:#カラーコード;」では、文字の色を、

「background-color:#カラーコード;」では、背景色を指定します。

文章の<span style=”color:#33FFFF;background-color:#FFFFCC;”>一部だけ</span>色をつけました

文章の一部だけ色をつけました

覚えてしまうと便利なstyle属性はおすすめです。

また、<font>タグでの指定は、html5では非推奨となっておりますので、できるなら<font>タグではなく、style属性による指定を推奨します。

 

タイトルとURLをコピーしました