TAGWEB

HTMLの基本

① HTMLの基本の形

<!DOCTYPE html>：HTML5の宣言
<head>：メタ情報（文字コード、タイトルなど）
<body>：画面に表示される中身

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめてのHTML</title>
</head>
<body>
  <h1>こんにちは、HTML！</h1>
</body>
</html>

実装画面











② HTML：基本的な書き方





    

  • タグで囲む（例：<p>文章</p>）
    • 




  • 開始タグ <h1> と終了タグ </h1> が対になっている
    • 






<h1>見出し</h1>
<p>これは段落です。</p>
















③ HTML：親子・兄弟関係





<ul>
  <li>りんご</li>   <!-- 子要素 -->
  <li>みかん</li>   <!-- 子要素 -->
</ul>  
<!-- ul が親、li 同士は兄弟 -->










④ VSCode：Live Serverの使い方





    

  1. 拡張機能から「Live Server」をインストール
    2. 




  2. HTMLファイルを右クリック →「Open with Live Server」
    3. 




  3. 自動でブラウザが立ち上がり、更新もリアルタイム
    4. 





















⑤ CSS：基本的な書き方










<style>
  p {
    color: blue;
    font-size: 16px;
  }
</style>










⑥CSS：class属性とid属性










<p class="message">こんにちは</p>
<p id="main">メインの段落</p>

<style>
  .message {
    color: green;
  }

  #main {
    font-weight: bold;
  }
</style>










⑦CSS：優先順位と継承





    

  • 優先順位：id > class > タグ
    • 




  • 継承：フォントなどは親から子へ引き継がれる
    • 






<div class="box">
  <p>文字色は親から継承されます</p>
</div>

<style>
  .box {
    color: red;
  }
</style>
















⑧ CSS：外部ファイルで読み込む





    

  1. style.css を作成
    2. 




  2. HTMLの <head> 内で読み込む
    3. 






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
















⑨相対パスの書き方





<!-- 同じ階層 -->
<img src="img/photo.jpg">

<!-- 1つ上の階層へ -->
<img src="../img/photo.jpg">

<!-- サブフォルダ -->
<a href="pages/about.html">About</a>
















⑩HTML：ブロック要素とインライン要素





    

  • ブロック要素：<div>, <p>, <h1> → 改行される
    • 




  • インライン要素：<span>, <a>, <strong> → 改行されない
    • 






<p>これは<span>強調</span>された文字です。</p>
















⑪HTML：ブロック要素のセンタリング





<div class="center-box">中央揃え</div>

<style>
  .center-box {
    width: 300px;
    margin: 0 auto;
    text-align: center;
    border: 1px solid #000;
  }
</style>
















⑫ CSS：ショートハンド記法





/* 通常 */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 15px;

/* ショートハンド */
margin: 10px 15px;










    

  • margin: 上 右 下 左;
    • 




  • 2つなら 上下 左右 の順
    •