シェアする
Writing Inline Styles with the style Attribute - Japanese Only
みなさまどうもこんにちわ。
では続きましてCSS記述の練習をしていきましょう。タグのstyle属性にCSSを直書きしていきたいと思います。
まずはタグにstyle属性を追加します。
※属性について忘れちゃった方はこちらの記事を参考にしてください。
<p style="">ここにスタイルを適用するよ</p>
この値にCSSを直で書いていきます。
style属性に直書きする場合はセレクタの指定と波括弧は必要ありません。対象セレクタはstyle属性が記述されているタグになるからですね。
先ほどの記事にあったこの場合ですと
p {
font-size: 18px;
font-weight: bold;
}
『p』と『{}』がなくなる感じですね。
では文字サイズを18pxにしてみましょう。文字サイズを変更するプロパティは『font-size』です。値は『18px』と指定します。
<p style=" font-size: 18px;">ここにスタイルを適用するよ</p>
これでこのp要素の文字サイズが18pxになります。みなさんもHTMLファイルに記述して実際に確認してみてください。全体のHTMLファイルはこのような記述になりますね。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS 練習中！</title> </head> <body> <p style=" font-size: 18px;">ここにスタイルを適用するよ</p> </body> </html>
確認できましたでしょうか？値を『100px』とかにすると文字がものすごく大きくなりますので分かりやすいかと思います。色々試してみてください。
では続いて複数のプロパティを指定してみましょう。文字を太くしてみます。文字の太さを調整するプロパティは『font-weight』で値は『bold』を指定すればOKです。『;』を忘れないように気をつけてください。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS 練習中！</title> </head> <body> <p style=" font-size: 18px; font-weight: bold;">ここにスタイルを適用するよ</p> <p>ここは影響をうけないよ</p> </body> </html>
いかがでしょうか？ブラウザでちゃんと太字になっていればOKです。
style属性に直書きする場合も最後の宣言は『;』が省略できます。ただこちらも『;』を記述するほうが一般的です。
先ほど解説した通り、style属性に直書きした場合は他のp要素は影響をうけません。あくまでもstyle属性が記述してある要素にしか影響を与えないからです。
ちょっと確認してみましょう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSS 練習中！</title> </head> <body> <p style=" font-size: 18px;">ここにスタイルを適用するよ</p> <p>ここは影響をうけないよ</p> </body> </html>
いかがでしょうか。上のp要素のみ装飾が加わっているのが確認できたと思います。
というわけでstyle属性に直書きする方法はこのような感じになりますね。
次の記事ではstyleタグを使用してCSSを記述していきます。引き続き頑張っていきましょう。
ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
