日: 2025年9月26日

学科 HTML/CSS基礎⑥

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・学科 HTML/CSS基礎⑤で学んだ内容を実践します。

本日のテーマ

CSSの記述をしましょう

セレクタの得点について

セレクタには優先順位があり点数計算をして高得点のものが採用されます。同じ得点の場合は後ろに書いてあるものが採用されます。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがありますので意図したスタイルにならない時は点数を確認してください。

CSS：マージン系プロパティ【復習】

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）

CSS：パディング系プロパティ【復習】

  • padding-top/-bottom/-left/-right プロパティ（パディング上下左右）
  • padding プロパティ（パディング一括指定）

CSS：バックグランド系プロパティ【復習】

  • background-color プロパティ（背景色）

CSS：レイアウト系プロパティ【復習】

  • width プロパティ（内容の幅）
  • height プロパティ（内容の高さ）

Webページ制作実践③

マージン、パディング、バックグランド、レイアウト系のそれぞれのプロパティを使い、レイアウトを調整しながらhtmlの親と子（入れ子）の関係を理解しましょう。

①htmlとcssファイルの準備

<!doctype html>
<html>
    <head>
　　　　　<meta>〜〜〜
　　　　　<meta>〜〜〜
　　　　　<title>〜〜〜</title>
　　　　　<link href="reset.css" rel="stylesheet">
　　　　　<link href="style.css" rel="stylesheet">
    </head>
    <body>
　　　　<div class="oya_a">
　　　　　　<div class="kodomo_a1"></div>
          <div class="kodomo_a2"></div>
　　　　</div>
　　　　<div class="oya_b">
　　　　　　<div class="kodomo_b"></div>
　　　　</div>
　　　　<div class="oya_c">
　　　　　　<div class="kodomo_c"></div>
　　　　</div>
    </body>
</html>

②親子（入れ子）の関係をブラウザで確認する

.oya_a {
    width: 800px;
    height: 800px;
    background: red;
}

.kodomo_a1 {
    width: 300px;
    height: 300px;
    background: blue;
}

.kodomo_a2 {
    width: 400px;
    height: 400px;
    background: green;
}

このようにbackgroundプロパティで背景に仮色を入れると、ブラウザでhtmlを表示した時にレイアウトが確認しやすいです。

③マージンとパディングを使ってレイアウトの位置を調整してみましょう

.oya_a {
    width: 800px;
    height: 800px;
    background: red;
　　　padding: 0 0 0 150px;
}

.kodomo_a1 {
    width: 300px;
    height: 300px;
    background: blue;
    margin: 0 auto;
}

.kodomo_a2 {
    width: 400px;
    height: 400px;
    background: green;
    margin: 50px 0 0 0;
}

④マイナスマージンと、ボックスの右端配置について

トレーニング-３

実際のWebページを作成しましょう。

トレーニング用ファイルのダウンロードおよび解凍を行ってトレーニングを実施してください。トレーニングの実施方法は、解凍したフォルダに格納されている「readme.pdf」を参照してください。

カリキュラム資料 ダウンロード用サイト
https://samplesdl-web.com/doc/

下記のファイルをダウンロードしましょう。
「training-3.zip」　

本日の課題

Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）