More than 3 years have passed since last update.

HTMLとCSS

Last updated at 2021-03-17Posted at 2021-03-16

#HTMLとCSSの概要

インターネットで見ているWebページの見た目を作る
ページの情報は、HTMLとCSSという2つの言語によって構成されている

##HTML

ウェブサイトに表示される情報を記載する言語
HTMLだけでも情報を表示することは可能
例：test.html

##CSS

HTMLに装飾を加えるための言語
HTMLとCSSはセットで使用するもの
例：style.css

###拡張子
ファイルに書かれる言語の種類を識別するためにファイル末尾につける文字列

htmlのファイルを作成する場合は〇〇.html
CSSの場合は〇〇.css

##HTMLのコード

test.html

	
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTML学習用ウェブサイト</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>
      これが<span class="blue">見出し</span>要素
    </h1>
    <p>
      １つ目の段落
    </p>
    <p class="second-message">
      2つ目の段落
    </p>
    <p id="third-message">
      3つ目の段落<b>この部分は太字</b>
    </p>
     <a href="https://www.google.com/">クリックしてGoogleへ遷移</a>
  </body>
</html>

HTMLの要素

< >...</ >
この記述ひとつひとつが要素
数多くの要素が積み重なってHTMLは構成されている

見出しであることを表している要素
リンクであることを表している要素

link要素

link要素を用いてHTMLファイルからCSSファイルを読み込む

<link rel="stylesheet" href="style.css">

cssのコード

style.css

.body {
    color: white;
    height: 100px;
}
p {
  color: red;
  font-size: 24px;
}
.first-message {
  color: red;
}
.second-message {
  color: orange;
  font-size: 12px;
}
#third-message {
  color: blue;
}
.blue {
  color: blue;
}

##cssはセレクタ・プロパティ・値の3つで構成されている

###セレクタ
どの部分のHTMLに適用するかを選択するための記述

.body {
color: white;
height: 100px;
}

###プロパティ
セレクタで指定したHTMLの「何を変えるのか」を選択するための記述

.body {
color: white;
height: 100px;
}

###値
値でどのような色にするのかを決める

.body {
color: white;
height: 100px;
}

##特定の箇所を指定してcssを適用させる

###classセレクタ
class名をCSSのセレクタとして使用する

.first-message {
color: red;
}

###idセレクタ
id名をCSSのセレクタとして使用する

#third-message {
color: blue;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

HTMLとCSS

HTMLの要素

タグ

link要素

cssのコード