HTMLタグ内でstyleを適用させる方法

公開日：2017/03/31　更新日：2019/09/11　

※本ページにはプロモーション(広告)が含まれています

HTMLやCSSなどプログラミングを学ぶなかで、分からないことはたくさん出てきます。HTMLタグ内でもstyleを適用させる方法があるのはご存知でしょうか。ここでは適用させるための方法と、便利で使えるおすすめのHTMLタグについて、紹介いたします。HTMLやCSS、サイトの表示方法などに興味がある方は、参考にご覧ください。

１.styleを適用させる方法
２.便利で使えるおすすめのHTMLタグ

１.styleを適用させる方法

ここでは、HTMLタグ内でstyleを適用させる方法について紹介します。

１.styleとは

styleを使えば、HTMLの文書内にCSSのスタイル情報を記述できます。使用する際は、〜で使用します。スタイルシートは一般的にCSSファイルを作成し独立させます。しかし、HTMLタグにstyle属性を指定すれば、直接スタイルシートの記述が可能です。また、要素にstyle属性を追加して局所的に適用する場合は、要素内に要素を記述し、値にtext/cssを指定します。

２.使用できる属性：scoped

scopedを使えば 特定の範囲内のみにスタイルが適用 されます。scoped属性により親要素にみに適用され、省略した際は、スタイルは文書全体に適用されるのも特徴です。

３.使用できる属性：type

typeを使えば スタイルシートのMIMEタイプを指定 できます。省略もでき、省略した場合の既定値はtext/cssです。

４.使用できる属性：disabled

disabledを使えば 指定されたスタイルがドキュメントに適用されなく なります。

５.使用できる属性：media

mediaを使えば スタイルシートを適用する対象となる、メディアタイプを指定 をします。値は妥当なメディアクエリの必要があり、省略した場合はallが既定値になります。例えば、media属性を使って、「media=”screen”」と指定すると、スタイルの適用対象をスマートフォンやパソコンなどのブラウザのみにできます。またmediaの属性を指定しない時はallを使いますので、すべてのデバイスやメディアが対象となります。

２.便利で使えるおすすめのHTMLタグ

ここでは、覚えておくと便利なおすすめのHTMLタグを紹介いたします。

１.div

divは、ブロック要素の１つです。かたまりを定義するタグであり、divタグで囲んだかたまりに対してCSSでスタイル指定できますので、便利です。div要素を使えば前後に改行が入ります。

２.p

pは、段落を設定するためのタグです。長文など文章をを作成する際に多用するタグです。段落ではなく改行だけしたい場合は、brタグを用います。文章を分かりやすく読みやすく表示したい場合に便利なタグです

３.span

spanは文章の一部分をスタイル指定したい場合に使います。文章の一単語や一文章のみを色文字など装飾したい場合に用います。文章を作成するなかで、一部分だけを強調したい場合などに、役立つダグです。

４.h１〜h６

h１、h２、h３、h４、h５、h６は、見出しに使うブロック要素のタグです。数字が小さいほど見出しが大きくなります。長文やまとめ文章を作成する際など、メリハリがつき分かりやすい構成が作れます。この項目の見出し「h１〜h６」でh３の見出しを使っています。１つの文章のなかでh１〜h６まですべてを使う必要はありませんが、２〜３つ使って構成すると分かりやすくなります。