雑学

5分で分かる!HTMLとCSSの違いとは?定義や役割・読み込み方も現役エンジニアがわかりやすく解説

・HTMLファイルに直接CSSを記述する
・HTMLから外部CSSファイルを読み込む

主にこの2種類の方法があります。それぞれどんな特色やメリット・デメリットがあるのかなど詳しくみていきましょう。

HTMLファイルに直接CSSを記述する

HTMLファイル内に直接CSSの記述をしていく方法です。一見するとHTMLファイルが一つだけで済むから管理しやすいというメリットもありますが、一つにまとめたためにHTMLファイルが重くなってしまい、開くのに時間がかかってしまうといったデメリットも。

何だそんなことかという方もいらっしゃるかと思いますが、開くのに時間がかかってしまうと情報を見ようとしているユーザーはページが開くまで待てられず、別のページに推移してしまいます。せっかく作ったコンテンツも見てもらえる機会が減ってしまっては意味がありません。そのため、ページの開く速度というのもWebサイト制作において大切な要素となります。

CSSの記述が短ければ問題ありませんが、膨大な量の記述がある場合はHTMLファイルに直接CSSを記述する方法はあまりおすすめできません。

HTMLから外部CSSファイルを読み込む

次にHTMLファイルから外部に作成したCSSファイルを読み込む方法をご紹介します。外部のCSSファイルを読み込むメリットとして例え膨大なCSSの記述をしたとしても、HTMLファイルのデータ容量は変わらないためHTMLのデータは軽いままでCSSを適応させることが可能です。

つまり、HTMLファイルをWebブラウザ上で開いたとしても、開く時間に遅延があまりなくユーザーが離脱しにくいWebサイトが出来上がるということになります。

HTMLとCSSを紐づける際はこちらの外部CSSファイルを読み込む方法が主流となっているため、実際にHTMLとCSSを使用する際には、外部CSSファイルを読み込む方法がおすすめです。

no-img2″>
 <figcaption class=桜木建二

HTMLにCSSを適応させるときは、外部ファイルから読み込んだ方法が良さそうだな。HTMLファイルがWebブラウザ上で開く速度も重要になる。HTMLやCSSを記述する際には、色々なことを考えながらコーディングしないといけないとは、奥が深いっていうことがわかったな。

HTMLとCSSは誰でも習得できる

HTMLとCSSは直感的で分かりやすいプログラミング言語です。そのためこれまでプログラムなんて組んだことがない。という方でも少し勉強すればすぐにWebサイトの1つや2つ簡単に作れてしまいます。私にはプログラミングなんて。と思わずぜひ試しにHTMLやCSSに触れて1からプログラムを組む面白さをぜひ体験してみてくださいね。

1 2
Share: