tatunoko@WEB制作学習中

2025.06からWEB制作学習開始/小3👦小1👧のパパです/夫婦でWEB制作をできるようなるのが目標です。

[tatunoko@WEB制作学習中 @tatunoko_js]

4/17(210日目） 復習中級day5 1.0h（359.5h)
✅ コーディング前の準備
忘れている箇所を確認しつつ復習！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

2/27(209日目） 中級day21 1.0h（358.5h)
✅ スマホ時のドロワーメニューを作る
z-index は 要素の重なり順（前後関係）
transform: rotate(30deg);要素を 30度 回転させる
rotate() = 回転させる
30deg = 30度（degree の略）

#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

2/26(208日目） 中級day21 1.0h（358.5h)
✅ボタンを自在に作れるように
🫡横並び中央
.button10_wrap {
display: flex;
justify-content: center; /* ← 横方向中央 */
gap: 10px; /* ← ボタン間の余白 */
}
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

2/25(207日目） 中級day21 1.0h（358.5h)
✅ボタン、見出しを自在に作れるようになろう
白枠の右中央から少しだけ横線を出したい場合は、
疑似要素 ::after を使う
::after は position: absolute; なので
親要素（position付き）が必要
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

2/13(206日目） 中級day21 1.5h（357.5h)
✅ボタン、見出しを自在に作れるようになろう
🫡左右の背景の調整、親要素にinnerを入れたので画面いっっぱいに広がらない💦
HTMLの構造をを変更して対応！

#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

2/19(205日目） 中級day21 1.5h（356.0h)
✅ボタン、見出しを自在に作れるようになろう
😅体調を崩してしまい、今日から復活！コツコツ頑張っていく！！
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
右向きの三角形（▶ のような形）
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/30(204日目） 中級day21（復習編） 1.5h（354.5h)
✅ボタン、見出しを自在に作れるようになろう
justify-content: center;主軸
align-items: center;交差軸

flex-grow: 1; 余白を1の比率で伸びる
flex-grow: 2; 2倍の割合で伸びる

#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/29(203日目） 中級day21（復習編） 1.5h（353.0h)
✅ボタン、見出しを自在に作れるようになろう
🫡全部おぼえなくてもいい！（全部おぼえようとしちゃダメ！）雰囲気、流れをつかめればいい！
Notionに記入して先に進もう！！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/28(202日目） 中級day21（復習編） 1.5h（351.5h)
✅ボタン、見出し
🫡clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
要素を三角形の形に表示する
clip-path は,要素の表示領域を指定した形状で切り抜く
polygon() は,座標を指定する関数

#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/27(201日目） 中級day19（復習編） 2.5h（358.5h)
✅ボタン、見出しを自在に作れるようになろう
🫡マーカー風線
text-decoration: underline solid #ffdd73 10px;
text-underline-offset: 0;
text-decoration-skip-ink: none;
＃デイトラ　#デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/25(200日目） 中級day19（復習編） 2.5h（358.5h) ✅ボタン、見出しを自在に作れるようになろう
🔸環境構築～
いざ、最初から始めてみると忘れてることが多い💦サクサクとコードが書ける日が来るのだろうかと心配になる😅
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/22(199日目） 中級day19（復習編） 1.5h（356.0h)
✅マウスホバー時
🫡transition-timing-function
ease-in・最初はゆっくり、最後に向けてだんだん早く
ease-out・最初は早く、最後に向けてだんだん遅く
⬆️朝活継続！
#デイトラ 　＃デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/21(198日目） 中級day19（復習編） 2.0h（354.5h) ✅フッターとCTAのコーデイング
🫡関数
「min()」最大サイズを決めることができる
「max()」最小サイズを決めることができる
「clamp()」「最小〜最大の範囲で自動調整」

⬆️朝活継続！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/20(197日目） 中級day17～（復習編） 2.0h（352.5h)
✅CONTACTセクション
🫡flexの子要素
🔸flex-shrinkを0にすると「この要素は縮めないでください」
🔸flex-growを1にすると「余った分だけ伸ばしてください」
⬆️朝活継続！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/18(196日目） 中級day17～（復習編） 1.5h（350.5h)
✅CONTACTセクション
🫡入力欄のパーツ化
各フォームのパーツ化の整理が頭の中で整理ができない💦繰り返し復習ですな💪
⬆��朝活継続！
＃デイトラ　#デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/17(195日目） 中級day17～（復習編） 2.0h（349.0h) ✅CONTACTセクション
🫡appearance: none;
ブラウザ標準デザインを無効化
主にフォーム部品のカスタマイズに使う
見た目が消えるので 必ず自前でデザインする
select / checkbox / radio で特によく使う
#デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/16(194日目） 中級day17～（復習編） 1.5h（347.0h)
✅CONTACTセクションのコーディング
🫡 clip: rect(0, 0, 0, 0);
🔸要素を完全に切り抜いて見えなくする
🔸position: absolute が必須
🔸display: none; との違いの確認
⬆️朝活継続！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/15(193日目） 中級day17～（復習編） 2.0h（345.5h)
✅CONTACTセクションのコーディング
🫡ラジ��ボタン
各々が独立した状態で選択ができない⇒name="your-name"(同じ値を指定する）
テキストを選択したときにチェックされない⇒for=""を外す
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/14(193日目） 中級day17～（復習編） 2.0h（343.5h) ✅CONTACTセクションのコーディング
🫡<input type="text">
🔸[type="text"] は 1行入力のテキストボックス
🔸CSSでは text入力だけを狙って装飾できる
🔸短い文字入力に最適
⬆️朝活継続！
#デイトラ #デイトラWEB制作

[tatunoko@WEB制作学習中 @tatunoko_js]

1/13(192日目） 中級day16～（復習編） 1.5h（341.5h) ✅テーブルのコーディング
🫡table-layout: fixed
🔸列幅は最初に決まる
🔸中身が多くても列幅は変わらない
🔸表示が速い
⇔autoとの違いに注意！
⬆️朝活継続！
#デイトラ #デイトラWEB制作