月: 2025年11月

学科 HTML/CSS基礎⑨【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて

2限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて

3限目
学科 HTML/CSS基礎⑨
レスポンシブWebデザインについて

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

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・RWDの実施方法を具体的に説明します。
・わかりにくいので具体的な例を示して説明してください。

本日のテーマ

レスポンシブWebデザインを理解しましょう

レスポンシブWebデザインについて

【資料】

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

下記のファイルをダウンロードしましょう。
「マルチデバイス対応の教科書①.pdf」　

【動画】

レスポンシブWebでデザイン（RWD） 対応のサイトについて

レスポンシブWebデザイン（RWD）を理解して画面サイズの異なる複数のデバイスでも快適に閲覧できるWebサイト（ページ）を作成しましょう。

  • レスポンシブWebでデザイン（RWD）の考え方
  • 幅広デザインでの Web ページ作成
  • viewport 定義の指定
  • 横幅変動時のコンテンツ幅を設定
  • Media Querie でデザインを整える
  • 画面サイズに合わせた表示部品の導入

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。

学科 HTML/CSS基礎⑧

-本日のアジェンダ-

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

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

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

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

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

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

本日のテーマ

Webページを完成させましょう

Webページ制作実践④

横並びのレイアウトを組んでみる


htmlは基本的に縦にレイアウトが積まれていきますが、cssのプロパティを使って横並びにする事ができます。参考元
今回はcssのflexboxを使って、横並びのレイアウトを作ってみましょう

<!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">
           <div class="kodomo_a"></div>
           <div class="kodomo_b"></div>
           <div class="kodomo_c"></div>
        </div>
    </body>
</html>
.oya {
    display: flex;
}

.kodomo_a{
  width: 200px;
  height: 200px;
  background: red;
}

.kodomo_b{
  width: 200px;
  height: 200px;
  background: blue;
}

.kodomo_c{
  width: 200px;
  height: 200px;
  background: green;
}

横積みのレイアウトを組むことが出来れば、ワイヤーフレームをhtmlとcssで作成する事ができます。

参考サイト

htmlで表を作る

時刻表やメニュー表、カレンダー等はtableタグを使ってレイアウトを組むことが多いです。参考元

htmlでフォームを作る

WEBサイトに設置されているお問い合わせページなどをフォームと呼びます。htmlでフォームを作る際、html単体でフォームは動きません。（別途phpなどでプログラムを組む必要があります）今回は、htmlで擬似お問い合わせフォームを作成してみましょう。

トレーニング-４

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

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

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

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

本日の課題

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