見出し画像

styleタグとは?

<style>タグは、HTML文書内に直接CSS(Cascading Style Sheets)スタイルを書くために使われるタグだよ。CSSはWebページの見た目を整えるために使われる言語で、色やフォント、レイアウトなどを指定できるんだ。

<style>タグの基本

<style>タグは通常、HTML文書の<head>セクション内に配置されるよ。これにより、ページが読み込まれるときにスタイルが適用されるから、ページ全体のデザインを一貫して保つことができるんだ。

<style>タグの例

<!DOCTYPE html>
<html>
<head>
   <title>私のWebページ</title>
   <style>
       body {
           background-color: lightblue;
       }
       h1 {
           color: navy;
           margin-left: 20px;
       }
   </style>
</head>
<body>

<h1>こんにちは、世界!</h1>
<p>これは私の最初のスタイル付きWebページです。</p>

</body>
</html>



この例では、<style>タグの中でbody要素の背景色をlightblueに、h1要素の文字色をnavyに設定しているよ。また、h1要素の左の余白も20pxに設定しているね。

<style>タグの役割

• ページのデザイン: Webページの見た目に関する細かい設定を行う。
• レイアウトの調整: ページのレイアウトを調整して、異なるデバイスや画面サイズに適応させる。
• スタイルの一元管理: 複数のHTML要素に対して、一貫したスタイルを適用することができる。

<style>タグを使って、Webページに個性やブランドのイメージを反映させることができるんだ。CSSは非常に強力なツールで、学ぶほどにさまざまなデザインが実現可能になるよ。

この記事が気に入ったらサポートをしてみませんか?