【学習】HTMLとCSSの基本のき

Posted at 2025-01-22

HTMLとCSSの基本のきを復習

便利なものを使っているとふと「あれ？これってなんだっけ」と思うことが増えてきました。
これはいけない。
基本のきをまとめてみたいと思います。

HTML

# 見出し<h1>から<h6>まである
<h1>Hello</h1>

# 段落
<p>段落はparagraphのp</p>

# コメント
<!-- これでブラウザに表示されない -->

# リンク作成
<a>リンクが作成。下線表示される</a>

# リンクのとび先を指定する
# Hypertext Referenceの略。
<a href = "https://hogehoge">クリックするとリンク先へとぶ</a>

# 画像表示
<img src = "https://hogehoge...jpg">

# リスト作成
<li>リスト作成される</li>

# <ul>要素と<ol>要素
<ul>
  <li>黒点リスト</li>
</ul>

<ol>
  <li>数字リスト</li>
</ol>

CSSの基本のき

色、大きさ、配置等。ページのデザイン。
HTMLだけでは羅列されるだけ。

# CSSのプロパティの末尾にはコロン（:）、行末には セミコロン（;） をつける
h1 {
  color:#ff0000;
}


# /* */で囲んだ行がコメント
/* コメント表示 */


# 文字の大きさ。「font-size」「px」ピクセルという単位。
# 文字の種類。「font-family」
# 背景色。「background-color」
# 横幅と高さ「width」「height」
h1 {
  color:#ff0000;
  font-size: 10px;
  font-family: "Avenir Next";
  background-color: #dddddd;
  width: 500px;
  height: 80px;
}

特定の要素にCSSを適用する

<ul>
  <li class = "selected">特定リスト適用</li>
</ul>

# classの場合はドットが必要で、タグの場合は必要ない
.selected {
  color: red;
}

全体のレイアウト

要素の中に要素と要素が必要要素にはWebページの設定に関する情報 1.「meta」文字コードの指定➡文字化けを防ぐことができる。「UTF-8」はHTMLで推奨されている文字コード 2.「title」ページのタイトルの設定。ここで指定されたタイトルはブラウザタブ上に現れる 3.「link rel」CSSの読み込みなど。「rel="hogehoge"」でCSSファイル読み込む宣言。「href="hogehoge.css"」ここで読み込むCSSのファイル名要素には実際に表示したい内容の部分はDOCTYPE宣言と呼ばれるもの

HTMLのバージョンを宣言するためのもの。必ず記述するもの！！

➡レイアウトはdiv要素で構成。「division」の略

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <link rel="hogehoge" href="hogehoge.css">
  </head>
  <body>
    <div class="header">
    </div>
    <div class="main">
    </div>
    <div class="footer">
    </div>
  </body>
</html>

セレクタとプロパティ

CSSでデザインを指定する際、要素を選択するために「セレクタ」を使用します。主なセレクタは以下の通りです。

css
コピーする編集する
/* タグセレクタ */
h1 {
  color: blue;
}

/* クラスセレクタ */
.selected {
  color: green;
}

/* IDセレクタ */
#unique {
  font-size: 20px;
}

/* 子孫セレクタ */
div p {
  color: gray;
}

セレクタの優先順位

インラインスタイル（HTMLタグ内で指定されたスタイル）
IDセレクタ
クラスセレクタ、属性セレクタ
タグセレクタ

優先順位が高いものほど適用されます。

レスポンシブデザイン

異なるデバイスサイズに対応するために、以下の方法を利用します。

メディアクエリ
デバイスの幅に応じたスタイルを指定します。
```
@media (max-width: 600px) {
  body {
    font-size: 12px;
  }
}
```

フレックスボックス
アイテムを並べたり配置したりするのに便利です。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

グリッドレイアウト
レイアウト全体をデザインする際に便利です。

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

まとめ

HTMLとCSSはWebページを作る基本のツールです。それぞれの役割を理解し、組み合わせることでより魅力的なデザインを作成できます。

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