TAGWEB

課題の進め方

ファイルをダウンロード

①ファイルをダウンロードしたら圧縮ファイルになっているため【右クリック】を押して【すべて展開】を選び圧縮ファイルを解凍する。

ヴィジュアルスタジオコード（VSC）を立ち上げる

①VSCを立ち上げたらファイルを、midashiファイルの中のmidashiファイルをVSCの中に入れる。
※圧縮ファイルを解凍すると更にファイルが生成されてしまうため中のファイルを使用して下さい。

⓶入れるとファイルが表示される。※表示されない場合はexplorerを押すと表示される。

③左クリックを押したまま【index.html】を左側、【midashi.scss】を右側になるように、表示させる。

GoLiveを立ち上げる

①配置が完了したら右下の【GoLive】をクリックすると、仮想ページが立ち上がる。

⓶cssやhtmlの数値を変え、【ctrl+s】で保存するとリアルタイムで変わりますので、色々と変えて動きを学んでください。

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つなら 上下 左右 の順
    •