こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。
style要素っていつ使うの？
CSSとかを適用させたい時に使うよ！
結論からいうと、style要素はCSSなどのスタイルシートを適用させたいときに使います。
今回はstyle要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。
スポンサーリンク
１： HTML5について
HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。
つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。
詳しくは下記の記事も参考にしてみてください。
HTMLの現在のバージョンは？HTML5は廃止に【HTML編】
２： style要素とは
style要素とは、ページ内にスタイルシートを記述して直接CSSを適用させる要素です。
style要素は文書メタデータで、ページに関する情報を表現します。
外部ファイルからCSSを適用させたい場合はlink要素を指定しますが、HTMLにそのまま記述して一つのファイルでマークアップもスタイルも管理したいという場合に使用します。
適用はページ単位になるのでそのページにだけ反映させたいとか、1ページだけのポートフォリオを作成したい場合とかであれば効果的ですが、2ページ以上あるサイトにスタイルを適用させたいのであればlink要素を指定した方が効果的でしょう。
style要素には4つの属性がありますが、特に理由がない場合はデフォルトのままで指定しなくても大丈夫です。HTMLに慣れてきてカスタマイズがしたくなってきたら試してみましょう。
| 属性 | 意味 |
|---|---|
| type | スタイル言語をMIMEタイプで指定 |
| media | スタイルを適用するメディアを指定 |
| nonce | 暗号ノンスを指定 |
| title | 代替スタイルシートのセットを指定 |
link要素の使い方は？HTML5の要素を使いこなそう【HTML編】
３： style要素の使い方
<head>
<style>
div {
background-color: aqua;
padding: 15px;
}
p {
color: red;
}
</style>
</head>head要素内にstyle要素を指定します。
style要素の中には単純にCSSを記述していきます。
各要素にCSSを適用できるようにプロパティと値を指定していきます。背景色や文字色などを指定して見栄えのいいデザインに仕上げていきましょう。
また、style要素は二つ指定することもできます。競合する宣言は、詳細度が同じであれば二つ目のstyle要素が適用されます。わざわざ複数指定することはないので、基本的にはstyle要素は1つにしましょう。
CSSについては下記の記事も参考にしてみてください。
HTMLとCSSでできること一覧！マスターしてWebサイトを作ろう【HTML/CSS編】
まとめ
今回はstyle要素についてと使い方について解説しました。
style要素はHTMLに直接CSSを記述して適用させるために使うものです。style要素を活用してオリジナルのデザインを作れるようになりましょう。
これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。
以上、ユキでした！
スポンサーリンク