Home / ネットワーク・IT / IT基礎知識 / プログラミング / HTMLタグ内でstyleを適用させる方法

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

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

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

styleを適用させる方法


htmlタグだけでもウェブサイトの機能を果たすことはできますが、そのままでは何の飾り気もない殺風景なサイトになってしまいます。

インターネット黎明期では背景色を指定しただけのhtml丸出しのサイトも珍しくありませんでしたが、現在では一切見られなくなりましたね。企業が運営するサイトはもちろん、個人運営のページもスタイリッシュなデザインを施しているものも多くなりました。

これらのサイトのように装飾するときに必要となるのが styleの適用 です。大きく分けて三つの方法がありますので見ていきましょう。

cssファイルを読み込む

一つ目は cssファイルを読み込む方法 です。htmlファイルとは別にcssファイルを作成してそちらに記述していく方法となります。styleを適用させる方法の中で、最も一般的とされており利用するケースも多くなっています。

わざわざcssファイルを用意する目的としては、別のhtmlファイルにもstyleを適用させたくなった時に重複する内容を記述する必要がなくなるからです。cssファイルを読み込む記述をするだけでよくなるわけですね。

重複したコードはなるべく記述しないように徹底して見やすいファイル作りを心がけていきましょう

headタグ内にstyleを記述する

二つ目は htmlファイルのheadタグ内にstyleを記述する方法 です。該当ページだけでしか使わないstyleを指定する時に利用する方法になっています。

headタグ内にstyleを記述する方法

body{
background-color: #0000ff
}

「body」はブラウザに表示されるメインコンテンツ。「background-color:#0000ff」は青色を意味します。上記の記述では背景色に青色を指定したことになります。

htmlタグにstyle属性を指定する

三つ目は本記事の本題でもある htmlタグ内に直接styleを記述する方法 です。特定のタグにだけstyleを適用させたい時に使用する方法です。思いの外使いたくなる時は多く、指定方法を覚えておくととても便利です。

htmlタグ内に直接styleを記述する方法

htmlタグに「style=””」と記述するとstyle属性を指定することができます。””の中には「color」や「background-color」など、数ある中から用途にあわせて記述します。

htmlタグ内にstyleを適用させる時に注意したいこと


htmlタグにstyleを指定する方法は簡単にできて便利なのですが、どんな時でもhtmlタグに記述すればいいわけではありません。向き不向きがありますので適切な使い方を心がけるようにしましょう。

指定するstyle属性が多い場合

指定したいstyle属性が一つである場合は、htmlタグ内もそれほど長い記述になりません。しかし複数のstyle属性を指定したくなる時もあります。テキストの色、テキストの配置、親要素との距離等。

これらを全てhtmlタグ内に記述すると htmlファイルが見づらくなったり、書き換えづらくなってしまったりと、保守性が著しく低下 してしまいます。

このようなケースでは、外部のcssファイルか、headタグ内に記述する方法を選択したほうが効率的と言えます。例え特定のタグにしか付けないstyle属性であってもです。

同じ記述を複数する場合

最初は特定の一つのタグにしか付けていなかったのに、気づいたら複数のタグに同じ記述をしてしまっている事ありませんか?これは非常に非効率的な事をしてしまっています。

本来は一つの記述で済むことを繰り返してしまっているのですから、時間を無駄に消費してしまっています。

さらにメンテナンス性の面でも問題があります。例えば属性を変更したくなった時、全てのhtmlタグの記述を変更する必要に迫られてしまいます。cssファイルやhead内の指定であれば一つの記述を書き換えるだけで済むのに余計に労力を使ってしまうんです。

このような状況になっていたら、styleを適用する方法を考え直してみてください。

基本的にはcssファイルを読み込む方法が好ましい

ここまで挙げた理由から、基本的にはcssファイルを読み込む方法を使いたいですね。もちろん局地的な利用であればhtmlタグに直接適用する方法は便利なのですが、コードの可視性やメンテナンス性など、様々な観点から最終的には別の方法をおすすめしたいと思います。

まとめ

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

1 2

Check Also

HTML学習に便利なHTMLのリファレンスサイト17選

HTMLを勉強する際には何を参 …