HTML

HTMLにCSSファイルを適用する三つの方法をご紹介!HTMLとCSSの関係

https://owl-view.com

HTMLとCSSの意味は?

HTMLやCSSという言葉を身近で良く聞きますが一体どう意味でどのような場所で使われているのでしょうか。HTMLやCSSの意味や二つの言葉の関係性を確認しましょう。

HTMLの意味とは?

HTMLは"Hyper Text Markup Language"の略です。Hyper Text(ハイパーテキスト)とはテキストを超えた文書という意味です。名前の意味通り、HTMLを使用することによって画像を表示したりサイトURLのリンクを張り付けたりすることができます。

 

HTMLはWebページを開発するための基本的な言語です。HTML言語のみを使用するとWebページの骨組み部分のみが作成されます。

HTMLの基本コード

CSSの意味とは

CSSは"Cascading Style Sheets" の略です。CSSを使う事によってHTMLで作成したWebページの骨組みの部分をかっこよくデザインすることができます。

HTMLにCSSを適用

HTMLとCSSの関係性は?

HTMLとCSSの基本的な意味合いをご紹介しました。HTMLとCSSの関係は見出しや文章を表示するなどの基本的な部分をHTMLが担当し、見出しや文章にデザインを施すのがCSSの役割になります。

 

HTMLとCSSを適用する三つの方法

 

HTML文書にCSSを適用する三つの方法

HTML文書にCSSを適用する方法は三つあります。外部でCSSファイルを作成し、HTMLファイル内にCSSファイルを関連付け読み込ませる方法。Styleタグで文書単位に適用する方法。Style属性で局所的に適用する方法があります。ここではHTMLファイルが既に存在している程で話を進めます。

HTMLファイルに外部CSSファイルを適用

簡単な流れ

  • HTMLファイルと同じ階層に拡張子「~~.css」でCSSファイルを作成する。
  • HTML内<head>タグ間に<link rel="stylesheet" type="text/css" href="style.css">を記載し、CSSファイルを読み込む。
  • エディターを開きCSSファイル内にHTMLを装飾する内容を記載して保存する。

 

HTMLに外部CSSファイルを適用する

 

  1. HTMLファイルと同じ階層に拡張子「~~.css」でCSSファイルを作成する。ここではファイル名を「style.css」としています。

    Basehtml.htmlにCSSファイルを適用

    href="リンク先のURL"を記載する。ここでは先程同じ階層に「style.css」という名前のファイルを作ったので相対パスで「style.css」を指定する。

    はてな

    link rel="stylesheet"・・・外部のスタイルシートを読み込む

    type="text/css"・・・・・CSSのMIMEタイプを指定

    href="URL"・・・・・・・・URLの指定

  2. HTML内<head>タグ間に<link rel="stylesheet" type="text/css" href="style.css">を記載し、CSSファイルを読み込む。
  3. エディターを開きCSSファイル内にHTMLを装飾する内容を記載して保存する。

<h1>のタグのカラー、背景色、見出しの上下感覚、ボトムにダブルラインを入れる内容になっています。

a:linkは{color:red}でcolorをredに指定。

bodyは背景をskyblueに指定。

作成したHTMLをWebブラウザで開くと次のようになる。

HTMLにCSSを適用

 

Styleタグで文書単位にHTMLにCSSを適用

簡単な流れ

  • HTMLコード”<head>”間に”<style type="text/css">”タグを記載
  • "<Style>"タグ間に"<!---->"でCSSコードを挟み記載し保存

 

HTMLコード内にStyleタグでCSSを記載

  1. HTMLコード<head></head>間に<style type="text/css"></style>タグを記載する。
  2. <Style>タグ間に<!-- -->でCSSコードを挟み記載し保存する。

Macでエディターを使用してHTMLファイルにCSSを記載して保存をすると次のようにアイコンに大まかな外観が表示されるようになる。

basehtml3.htmlファイルにCSSを記載して保存

次のコードはHTMLにStyleタグでCSSを直接組み込んで装飾しHTMLコードです。

Style属性で局所的にHTMLにCSSを適用

簡単な流れ

  • HTMLファイルの<head>間に<meta charset="utf-8">タグを設置
  • <body>内の各要素に対してCSSを直接指定

各要素に対して局所的にCSSを指定

 

 

  1. HTMLファイルの<head>間に<meta charset="utf-8">タグを設置する。
  2. <body>内の各要素に対してCSSを直接指定

    それぞれ各要素のタグ内で直接style=""で装飾を行なっていきます。このようにHTMLの<body>内各要素に対してCSSを適用していくやり方がありますが、複雑になってしまいがちです。

まとめ

HTMLにCSSを適用する三つの方法をご紹介しました。

ポイント

  • 外部CSSファイルの読み込み
  • HTML内<head>間にCSSを記載
  • HTML内<body>にCSSを局所的に記載

HTMLファイルとCSSファイルを分けた方が見た目がスッキリしますし、混合しないのでオススメです。

-HTML
-

© 2021 OWLVIEW Powered by AFFINGER5