HTML/CSS/レスポンシブWebデザイン/学習記録

学習記録20250507

Posted on by shimura akikazu / 0件のコメント

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

講師：湊　有加里

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

レスポンシブ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 要素（フィールドセット／レジェンド）
ポートフォリオ/学習記録

学習記録20250506

Posted on by shimura akikazu / 0件のコメント

学科 ポートフォリオ作成基礎③【オンライン】

講師：椋本聡子

-本日のアジェンダ-

1限目
学科 ポートフォリオ作成基礎③
ポートフォリオ「応募編」について

2限目
学科 ポートフォリオ作成基礎③
ポートフォリオ作成の進め方について

3限目
学科 ポートフォリオ作成基礎③
構成のまとめ方について

4限目
学科 ポートフォリオ作成基礎③
本日のまとめ

5限目
学科 ポートフォリオ作成基礎③
本日のまとめ

本日のポイント

ここからは応募する企業を意識してとにかく作りましょう！

資料】

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

下記のファイルをダウンロードしましょう。
「ポートフォリオ「応募編」について.pdf」　

【動画】

HTML/CSS/学習記録

学習記録20250502

Posted on by shimura akikazu / 0件のコメント

学科 HTML/CSS基礎⑧

講師：大浜信彦

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

Webページ制作実践④

実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。

  • レイアウト系プロパティ
  • ボーダー系プロパティ
  • その他のプロパティ
  • 擬似クラス系セレクタ
  • 擬似要素系セレクタ

【資料】

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

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

  1. Webページ完成

本日の課題

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

HTML/CSS/学習記録

学習記録20250501

Posted on by shimura akikazu / 0件のコメント

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

講師：大浜信彦

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて

2限目
学科 HTML/CSS基礎⑦
CSSのプロパティについて

3限目
学科 HTML/CSS基礎⑦
CSSのプロパティと値を考える

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

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

本日のテーマ

レイアウト系プロパティを理解しましょう

CSS：レイアウト系プロパティ

  • position/top/left/bottom/right プロパティ（要素の配置方法）
  • z-index プロパティ（重なりの順序方法）

CSS：ボーダー系プロパティ

  • border-style プロパティ（ボーダースタイル）
  • border-color プロパティ（ボーダー色）
  • border-width プロパティ（ボーダー幅）
  • border プロパティ（ボーダー一括指定）
  • border-top/-bottom/-left/-right プロパティ（ボーダー上下左右一括指定）

CSS：その他のプロパティ

  • border-radius プロパティ（ボーダーの丸み）
  • box-shadow プロパティ（ボックスの影）
  • box-sizing プロパティ（ボックスサイズ計算）
  • content プロパティ（挿入コンテンツ）
  • object-fit プロパティ（画像トリミング）
  • object-position プロパティ（画像の配置位置指定）

CSS：擬似クラス系セレクタ

  • link 擬似クラス（未訪問リンクスタイル）
  • visited 擬似クラス（訪問済リンクスタイル）
  • hover 擬似クラス（オンカーソルスタイル）
  • active 擬似クラス（アクティブスタイル）
  • first-child/last-child 擬似クラス（先頭・最終の子要素指定）
  • nth-child 擬似クラス（n 番目の子要素指定）
  • nth-of-type 擬似クラス（同一のセレクタを持つ n 番目の子要素指定）
  • not 擬似クラス（指定値以外の要素指定）

CSS：擬似要素系セレクタ

  • first-letter 擬似要素（要素の 1 文字目を指定）
  • first-line 擬似要素（要素の 1 行目を指定）
  • before/after 擬似要素（要素の直前・直後にコンテンツの挿入）
HTML/CSS/学習記録

学習記録20250429

Posted on by shimura akikazu / 0件のコメント

学科 HTML/CSS基礎⑥

講師：小谷祥吾

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

CSSの記述をしましょう

セレクタの得点について

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

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

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

Webページ制作実践③

実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。

  • バックグランド系プロパティ
  • テキスト系プロパティ
  • フォント系プロパティ
  • リスト系プロパティ
  • レイアウト系プロパティ
  • パディング系プロパティ
  • マージン系プロパティ

【資料】

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

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

  1. CSSファイル（style.css）にセレクタの書出し
  2. 文字の大きさや色の設定
  3. header部分のレイアウト作成

本日の課題

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

HTML/CSS/学習記録

学習記録20250428

Posted on by shimura akikazu / 0件のコメント

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

講師：小谷祥吾

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎⑤
CSSの記述・検証ツールの活用

2限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

3限目
学科 HTML/CSS基礎⑤
CSSのプロパティについて

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

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

本日のテーマ

CSSのプロパティを理解しましょう

CSSの記述・検証ツールの活用

【まとめサイト】

【動画】

セレクタの得点について

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

Chrome検証ツールについて

ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効です。また、スマートフォンやタブレットでの表示型式を確認することもできます。

CSS：バックグランド系プロパティ

  • background-color プロパティ（背景色）
  • background-attachment プロパティ（背景画像の位置）
  • background-image プロパティ（背景画像のファイル）
  • background-repeat プロパティ（背景画像の繰り返し）
  • background プロパティ（背景の一括指定）
  • background-size プロパティ（背景画像のサイズ）
  • background-position プロパティ（背景画像の表示開始位置）

CSS：テキスト系プロパティ

  • color プロパティ（文字の色）
  • opacityプロパティ（透明度）
  • text-align プロパティ（文字の配置）
  • text-decoration-color プロパティ（文字飾りの色）
  • text-decoration-style プロパティ（文字飾りの線種）
  • text-decoration-thickness プロパティ（文字飾りの線の太さ）
  • text-decoration プロパティ（文字の飾りの一括指定）
  • text-shadow プロパティ（文字の影）

CSS：フォント系プロパティ

  • font-family プロパティ（フォントの種類）
  • font-size プロパティ（フォントのサイズ）
  • font-weight プロパティ（フォントの太さ）
  • font-style プロパティ（フォントのスタイル）
  • line-height プロパティ（行の高さ）
  • font プロパティ（フォント一括指定）
  • white-space プロパティ（空白・改行の表示方法）
  • word-wrap プロパティ（単語の途中での改行方法）
  • word-break プロパティ（テキストや単語の改行方法）
  • tab-size プロパティ（タブ文字の表示幅指定）

CSS：リスト系プロパティ

  • list-style-type プロパティ（リストマーカーの種類）
  • list-style-image プロパティ（リストマーカーの画像）
  • list-style-position プロパティ（リストマーカーの位置）
  • list-style プロパティ（リストマーカーの一括指定）

CSS：レイアウト系プロパティ

  • width プロパティ（内容の幅）
  • max-width プロパティ（幅の最大値）
  • min-width プロパティ（幅の最小値）
  • height プロパティ（内容の高さ）
  • max-height プロパティ（高さの最大値）
  • min-heightプロパティ（高さの最小値）
  • float プロパティ（回り込み）
  • clear プロパティ（回り込みを解除）
  • display プロパティ（要素の表示方法）
  • overflow プロパティ（ボックスからあふれた内容の処理方法）

CSS：パディング系プロパティ

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

CSS：マージン系プロパティ

  • margin-top/-bottom/-left/-right プロパティ（マージン上下左右）
  • margin プロパティ（マージン一括措定）
  • マージンの相殺
  • マイナスマージン
  • ボックスの中央配置
  • ボックスの右端配置
HTML/CSS/学習記録

学習記録20250425

Posted on by shimura akikazu / 0件のコメント

学科 HTML/CSS基礎④

講師：大浜信彦

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

CSSの記述を始めましょう

画像の取り扱いについて【復習】

<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

特殊文字について【復習】

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

CSSの基本構造について【復習】

  • HTML ファイルとは別に記述する場合
  • HTML ファイル内に記述する場合
  • HTML タグにインラインで記述する場合

リセットCSSついて

ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。

リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。

Webページ制作実践②

実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。

  • テキスト分類タグについて
  • コンテンツ埋め込みタグについて
  • CSSとの紐付けについて
  • セレクタの記載方法

【資料】

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

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

  1. 要素（タグ）の記述追加
  2. CSSファイル（style.css）の作成
  3. HTMLとCSSの紐付け
  4. リセットCSSの導入

本日の課題

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