カテゴリー: 学科 HTML/CSS基礎

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

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑩
練習問題について

2限目
学科 HTML/CSS基礎⑩
練習問題

3限目
学科 HTML/CSS基礎⑩
練習問題

4限目
学科 HTML/CSS基礎⑩
練習問題

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：これまでの復習内容
内容2：成績考査について
内容3：
課題：なし
【注記】
・新カリキュラム用に修正（2024/10/25：大浜）
・次の成績考査は、作成したWebページをポートフォリオに掲載する練習です。
・Webページ（Flower Days）制作が終わっていない人は、そちらを進めてください。

本日のテーマ

練習問題を解いてみましょう

練習問題について

以下の練習問題は、実際のWebページ制作を対象とした練習問題になっています。各問題の進め方を動画で説明していますので各自で実施してみてください。

練習問題①：マークアップの練習

【資料】

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

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題①.zip」　

【動画】

練習問題②：CSSのプロパティと値を考える

【資料】

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

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題②.zip」　

【動画】

練習問題③：レイアウトを定義するCSS

【資料】

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

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題③.zip」　

【動画】

練習問題④：Webページ運用・作成の困った問題

【資料】

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

下記のファイルをダウンロードしましょう。
「レイアウトデザイン 練習問題④.zip」　

【動画】

本日の課題

練習問題を通して学んだことを整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。

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

-本日のアジェンダ-

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

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

3限目
学科 HTML/CSS基礎⑨
テーブルタグについて

4限目
学科 HTML/CSS基礎⑨
フォームタグについて

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

【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・新カリキュラム用に修正（2024/10/25：大浜）
・座学の後は、Webページ（Flower Days）制作の時間にあててください。

本日のテーマ

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

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

【資料】

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

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

【動画】

RWD 対応のサイトについて

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

テーブルタグについて

<table>
　　<caption>キャプション</caption>
　　<tr><th>見出し</th><th>見出し</th></tr>
　　<tr><td>データ</td><td>データ</td></tr>
　　<tr><td>データ</td><td>データ</td></tr>
</table>

  • table要素（テーブルの範囲）
  • caption要素（表のキャプション）
  • tr要素（1行の範囲）
  • th要素（タグ見出し）
  • td要素（データ項目）

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

  • form 要素（フォーム）
  • label 要素（ラベル）
  • input 要素（インプット）
  • textarea 要素（テキストエリア）
  • select/option 要素（セレクト／オプション）
  • button 要素（ボタン）
  • fieldset/legend 要素（フィールドセット／レジェンド）

本日の課題

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