HTML/CSS早見表

Last updated at 2026-05-13Posted at 2026-05-11

完全に自分用です

HTML

基本構造

<!DOCTYPE html> <!-- HTMLのバージョン指定-->
<html>
  <head> <!-- webページの設定 -->
    <meta charset="UTF-8" /> <!-- 文字コード -->
    <title>page-title</title> <!-- ページタイトル -->
    <link rel="stylesheet" href="stylesheet.css"> <!-- CSSの読み込み -->
  </head>
  <body>
    <!-- 表示させたい内容 -->
  </body>
</html>

要点

ブロック要素：前後に改行が入り、親要素の幅に合わせて広がる要素
- （例）：<div>, <h1>, <p>
インライン要素：前後に改行が入らない要素
- （例）：<span>, <a>

	ブロック要素	インラインブロック要素	インライン要素
`width`, `height`	指定できる	指定できる	指定できない
`margin` , `padding`	指定できる	指定できる	指定できない
配置	縦並び（前後に改行が入る）	横並び	横並び

各種タグ

: コメント
<p>: 段落(paragraph)。要素末で改行される。
<div>: division. 要素のグループ分けに使う。
<a href="https://hogehoge">xxx</a>: リンク。xxxの部分が表示される。リンク遷移先を用意しない場合は"#"としておく。
<img src="https://hogehoge">: 画像を表示。終了タグ不要。
<ul>, <li>: 箇条書きリスト。<li>を<ul>で囲む。CSSでlist-style: none;を設定することでブレッド（・）を消せる。

<ul>
  <li>list1<li>
  <li>list2<li>
</ul>

<span>：文中の一部にだけCSSを適用させたい場合に使う。前後に改行が入らない。
<input>: 一行のテキスト入力を受け取る。終了タグ不要。
- <input type="submit" value="text">: 送信ボタン。textがボタン上に表示される。
<textarea>: 複数行のテキスト入力を受け取る。
<header>, <footer>: ヘッダーとフッター用にすでに用意されているタグ。

CSS

/*
要素(セレクタ){
  プロパティ: 値;
}
*/

h1 {
  color : red;
}

/*class名にはドットを付ける*/
.selected{
  color: red;
}

/*<li>のうち、.selected内のものだけCSSを適用させたい場合*/
.selected li{
}

/*複数のセレクタに同じCSSを適用させたい場合*/
input, textarea{
}

/*
HTML側で
<div class="btn a"></div>
<div class="btn b"></div>
とすれば、.btn{}、.a{}、.b{}単位でCSSが設定できる
*/

複数の要素に同じclassをつけた場合、同じCSSが適用される

color: 文字色。主要な色はredとかでもOK
font-size: 文字の大きさ。pxで指定。
font-family: フォント。フォント名にスペースがある場合は"で囲んで書く。
background-color: 背景色。#ddddddのように同じ値が続く場合は#dddと省略できる（各桁を2回繰り返した6桁と等価)
width: 要素の横幅。pxで指定。
height: 要素の高さ。pxで指定。
background-image: 背景画像を設定する。
- :url(hoge.png)などと設定する。
- 表示範囲を埋め尽くすまでリピートして画像が表示される。画像を拡大縮小して表示範囲に合わせるには、background-size: cover;を指定する。
float: 要素を横並びにする。例えばfloat: left;を設定した場合、指定された要素を浮かせ、親の要素の左端に寄せ、後続のコンテンツが右に回り込むようにする
opacity: 要素を透明にする。0.0(完全透明)~1.0(不透明)の間で指定し、単位は不要。
- 一部分だけを透過させたいような場合は、opacityを使わず色自体をrgbaで指定して処理する。rgba(r,g,b,a)で色を指定し、aが0.0~1.0の透過度。
letter-spacing: 文字の間隔をpxで指定する。

余白

padding, margin(,border)などで余白を設定する
- xxx-top, xxx-right, xxx-bottom, xxx-leftのように一方向だけを指定して設定することもできる
- padding: 10px 20px 20px 30px;のように、まとめて指定することもできる。tp, ri, bt, leの順。(上から時計回り)
- padding: 20px 10px; のように2つの値を設定した場合、tpとbtが20pxになり、riとle　が10pxになる。
- 上下だけ設定しておきたい場合は、padding 10px 0;などとする。

padding: 余白。pxで指定する。
margin: borderの内側の余白。
border: 枠線。太さ(px)、種類(solidなど)、色の順に指定する。

align

テキストやボタンなどのinlineやinline-blockはtext-alignで指定し、広い範囲を覆うようなblockの場合は、marginを用いる。

margin: 中央寄せするには、marginの左右にautoを設定する。
- margin: 0 auto;とする。
- autoを指定する場合は、必ずwidthを指定する。
text-align: 配置をleft, center, rightで指定する。

margin: 0 auto;, width: 300pxとしたときの構造は以下の通り。

display: 要素の種類（block、inline、inline-block）を指定する。

	`block`	`inline-block`	`inline`
`width`, `height`	指定できる	指定できる	指定できない
`margin` , `padding`	指定できる	指定できる	指定できない
配置	縦並び（前後に改行が入る）	横並び	横並び

hover: カーソルが乗った状態であるhoverのCSSを指定する。書き方に注意（下記）

div:hover {
  background-color: red;
}

border-radius: 要素の角をpxで指定して丸める。

アイコンを使う

Font AwesomeのCSSファイルを読み込む
表示させたいところに<span>タグを埋め込み、fa fa-{アイコン名}クラスを指定する

<head>
  <link rel="stylesheet" href="">
</head>
<!-- 省略 -->
<body>
  <span class="fa fa-facebook"></span>

JavaScript

`console.lo

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