Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSS
入門編

トップページ
CSS入門編 - まずはstyle属性に直書きしてみよう

まずはstyle属性に直書きしてみよう

みなさまどうもこんにちわ。

では続きまして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を記述していきます。引き続き頑張っていきましょう。

ではー。

この記事は桜舞が執筆致しました。