Home / プログラミング / HTMLタグ内でstyleを適用させる方法

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

Pocket

e86c6e29a89421d25d52c929a537edc2_s

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

スポンサーリンク

1.styleを適用させる方法

062bb10d41a7329f098a3b6565fdc58f_s

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

1.styleとは

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

2.使用できる属性:scoped

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

3.使用できる属性:type

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

4.使用できる属性:disabled

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

5.使用できる属性:media

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

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

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

1.div

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

2.p

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

3.span

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

4.h1〜h6

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

5.hr

hrは、水平線を引きコンテンツを区切るために使います。水平線が引かれることで、コンテンツの区別がしやすくなり、見やすくなります。コンテンツごとに分けて表示させたい場合にもおすすめです。

6.blockquote

1 2

スポンサーリンク

スポンサーリンク

Check Also

【入門編】Androidアプリ開発のためのおすすめ勉強法全8選

Androidのアプリを作って …

Facebookでのご購読が便利です