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

LINEで送る
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

blockquoteは、引用文を示すためのタグです。blockquoteを使うと、引用文が「””」で表示されます。何か文章を作成するなかで、引用を多用する方が知っておくと便利なタグです。

7.a

aはアンカータグと言われ、リンク先の指定に使うタグです。他のホームページや電話番号、メールアドレスなど、指定のページに移動させたい場合に使います。検索する必要がなく、クリック・1タップでリンク先に移動でき、閲覧者にとってとても便利です。お店や機関の紹介など行う文章を作成する際に便利なタグです。

8.img

imgは、画像を表示させるためのタグです。表示させたい画像をsrcの属性に指定すれば、画像が認識され表示されます。思い出の画像やおすすめ商品画像などを掲載したい場合に使えるタグです。画像があることで、閲覧者も見やすくなり、説得力も増します。

9.ul、li

ul、liは、文章内などに箇条書きのリストを作るためのタグです。箇条書きで構成できますので、何かを紹介したい場合や、手順を説明したい場合などにおすすめです。箇条書きの先頭は■で表示されます。

10.ol、li

ul、liが■の箇条書きリストを作成するのに対して、ol、liは、番号付きのリストを作るためのタグです。1、2、3、、、など、番号が表示されるため、手順を説明する際に特に活用できるタグです。内容に合わせてul、liとol、liの箇条書き・番号付きリストを使い分けると良いです。

11.dl、dt、dd

dl、dt、ddは定義型リストと呼ばれる要素です。dl、dt、ddはセットで使用し、定義用語をdtに、用語の意味をddに記入します。これにより、Q&Aなどが分かりやすく表示できます。Q&Aのように質問に対する答え以外にも、さまざまな用途で使えます。

12.table、tr、th、td

table、tr、th、tdは、表を作るためのタグです。trには表に表示される行、thには表に表示される見出し、tdには表に表示されるセルになります。見出しの有無などでthを使わないなどもあります。表を使って説明ができ、より分かりやすくまとめたい場合におすすめのタグです。

13.文字レイアウトに関するタグ

文字を太文字で表示したい場合は「strong」もしくは「b」を使い、斜め文字で表示したい場合は「em」もしくは「i」を使います。太文字や斜め文字を使うことで、文章内で強調することができます。無効な文字などを表したり、単語や文章に取り消し線を表示したい場合は「s」「del」を使います。これらを使うだけで、表現の幅が広がります。

14.ruby

rubyを使えば、英語や漢字にふりがなを表示したい場合に使います。読み方が分かりにくい漢字や英語表記にふりがなが表示できるため、多くの人に読んでもらいやすいです。

15.video

videoを使えば、動画を表示することができます。YouTube以外の動画も挿入できるため、非常に便利です。何かを紹介するサイトなどを作成する際に使えます。

16.select

selectは、選択項目を表示したい場合に使えるタグです。セレクトボックスを表示したい場合に簡単に使えます。項目を選びやすいので利用者も便利です。

まとめ

いかがでしたでしょうか。今回は、「HTMLタグ内でstyleを適用させる方法」について、紹介いたしました。〜を使えば、直接スタイルシートの記述が可能です。これにより、より便利な使い方ができます。また、簡単に使えるおすすめのHTMLタグも紹介していますので、気になるものがあれば、ぜひ試しに使ってみてください!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です