授業のきろく

授業のノート

1_20241205①WEB制作のスタートライン

2_20241205②見出しのhタグと段落のpタグ

3_20241205③画像挿入のimgタグ

4_20241205④-1リンクを貼るaタグ

5_20241205④-2リンクを貼るaタグ

6_20241206①箇条書きリストのulタグ＆liタグ

7_20241206②番号付きリストのolタグ＆liタグ

8_20241206③表の制作table、tr、th、tdタグ

9_20241206④フォーム制作に使うタグと属性たち

10_20241209①フォーム関連付け

11_20241209②WEBサイトの部位を区分けするタグ

12_20241209③装飾用のタグと連絡先のタグ

13_20241209④cssファイル制作と読み込み

14_20241210①Googleフォント

15_20241210②行間調整のプロパティ

16_20241210③文章の端を揃えるプロパティ

17_20241210④文字の中央揃え

18_20241210⑤背景色を指定するプロパティ

19_20241210⑥背景画像の繰り返し

20_20241210⑦背景画像の指定と調整

21_20241210⑧背景画像の位置調整

22_20241210⑨総合演習

23_20241211①ボックスレイアウト練習

24_20250131①-1復習

25_20250131①-2復習

26_20250204①演習_画像と文字の中央揃え

27_20250204②演習_ボックスレイアウト

28_20250204②演習_ボックスレイアウト-解答①

29_20250204②演習_ボックスレイアウト-解答②

30_20250204②演習_ボックスレイアウト-解答③

31_20250205①GoogleマップとYoutube動画の掲載

32_20250205②演習_ボックスレイアウト

33_20250205②演習_ボックスレイアウト-解答

34_20250207①要素の中身の整理(画像と文字の調整)

35_20250207②セレクタまとめ

36_20250207③疑似クラスまとめ

37_20250210①ホバー効果の使い方

38_20250210②Font_Awesomeの使い方

39_20250210③ファビコン設定

40_20250210④演習_ボックスレイアウト

41_20250210④演習_ボックスレイアウト-解答

42_20250212①演習_ボックスレイアウト(250210の復習)

43_20250212②flex-direction(子要素の横縦順序)

44_20250212③flex-wrap(子要素の折り返し)

45_20250213①justify-content(水平方向の並べ方)

46_20250213②align-items(垂直方向の並べ方)

47_20250213③justify-contentとalign-itemsの合わせ技

48_20250213④align-content(複数行ある場合の垂直方向の並び)

49_20250213⑤フォントをダウンロードして使う

50_20250213⑥要素を角丸にする

51_20250213⑦背景透過と要素の透明化

52_20250213⑧要素にグラデーションをかける

53_20250213⑨文字に影、要素に影

54_20250214①グリッド上に並べる

55_20250214②display-grid(グリッドレイアウト)

56_20250214③gapプロパティの応用

57_20250214④フォーム関連付け-CSS

58_20250217①floatで横並び

59_20250218①html＆css応用制作課題-1

60_20250218①html＆css応用制作課題-1-解答

61_20250219①疑似要素

62_20250219②positionプロパティで要素を重ね合わせる

63_20250219③練習_3つの要素を重ね合わせる

64_20250219③練習_3つの要素を重ね合わせる-解答

65_20250220①position-fixed(要素の固定化)

66_20250220②実体参照-コピーライトのマーク

67_20250220③WCBcafeトップページ制作練習

68_20250303①overflowプロパティ(表示領域を制御)

69_20250303②要素を消す、または非表示にする

70_20250303③position-stickyプロパティ(要素の固定化をバトンタッチ)

71_20250303④background-attachment(背景画像の固定化)

72_20250303⑤filterプロパティ(画像に色調補正をかける)

73_20250303⑥2カラムコーディング練習(参考書p222)

74_20250303⑥2カラムコーディング練習(参考書p222)-解答

75_20250304①文章中に使うタグたち

76_20250304②クリックしたら文章が出てくるdetailsタグ

77_20250304③作品画像を掲載するfigureタグ

78_20250304④動画再生のvideoタグと音声再生のaudioタグ

79_20250310①レスポンシブ対応記述

80_20250310②レスポンシブ対応練習-PC表示

81_20250310②レスポンシブ対応練習-タブレット表示

82_20250310②レスポンシブ対応練習-スマホ表示

83_20250317①imgを切り替えるpictureタグ

84_20250317②縦書きwriting-mode

85_20250317③要素を好きな形にするclip-path

86_20250317④変形のプロパティ

87_20250317⑤ホバー時に画像拡大

88_20250317⑥キーフレームアニメーション

89_20250327①カーソルを変更するcursorプロパティ

90_20250327②要素が重なったときの色変更mix-blend-mode

91_20250327③スクロールしたらスナップするscroll-snap-aline

92_20250327④scroll-snap-alineをサイト内に入れてみる

93_20250402①一文字ずつの間隔調整letter-spacing

94_20250402②スクロールをスムーズにするscroll-behavior

95_20250402③プルダウンメニュー_Ver.[display-none]

96_20250402④プルダウンメニュー_Ver.[heightアニメーション]

97_20250402⑤プルダウンメニュー_Ver.[overflow]

98_20250402⑥メールアドレス宛て・電話番号のリンク

99_20250402⑦SNS掲載

100_20250404①jQueryでスライドショー(Slick)

101_20250404②jQueryでハンバーガーメニュー

102_20250408①slideshow参考資料

103_20250408②jQueryクリックイベント

104_20250408③クリックしたら画像がアップで表示されるLightbox(jQueryライブラリ)

105_20250408④swiperというスライドショーのJavaScript

106_20250409①jqueryスクロールイベント要素をふわっと出す

107_20250409②配布用jqueryスムーススクロール

108_20250411①配布用CSSで★ローディングアニメ