ヒトミコ@デイトラweb制作コース受講中

3月で公務員を退職予定🕊️ 退職後にフリーランスになることを目指し、デイトラweb制作コースを受講中です💪🏻 学習の記録を書いています🌱 デイトラ学習中の方、卒業されてお仕事をされている方の投稿を励みにさせていただいています🐩💫 2025/9/6~学習start #デイトラ #デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY29~31：中級編艘復習　Newsまで
学習194日目(64−66)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
難しく考えすぎてborderで作れるところを擬似要素で作ろうとしていた😅頭柔らかくしろ〜🐶

🌱今日の学び🌱
━━━━━━━━━━━━━━
カードの下線はborder-bottom+gap+padding-bottomで作れる

カード全体をリンクに入れるには、各カードをaタグで作る

ニュース記事であることがわかるようにarticleタグを使用する

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY29~31：中級編復習 Aboutセクション
学習193日目(64−66)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
imgタグで作ろうとしたら、スタイルがあてられなくなって詰んだ😱 重なりも意識してHTMLを組まないといけないんだなあ…🧩💭

🌱今日の学び🌱
━━━━━━━━━��━━━━
3層以上ある＋SPとPCで画像を切り替える時は、CSSのbackgroundを作る

画像に重なる薄い膜を作るには擬似要素（after）で作る

<imgタグではダメな理由>
img は前面に出やすく、オーバーレイを重ねるのが難しい
高さが可変でテキストがはみ出しやすい
SP/PC の画像切り替えが面倒
背景として扱う方がレイアウトが安定する

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY29~31：中級編復習 fv~Concept
学習184日目(64~66)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
中央寄せのやり方が無限に出てきて大混乱😵‍💫
今日は初めてデイトラコミュニティの自習室のチャット歓迎テーブルに入っ���みました🎀めっちゃ緊張した笑
入ってしまえば、何を躊躇していたのかわからないくらい居心地がよかったです🫶🏻

🌱今日の学び🌱
━━━━━━━━━━━━━━
PCとSPでの画像の切り替えにはpictureタグを使用する。

右に配置するには、margin-left:auto;で左から右に押し出す

position: absolute の要素はmargin: auto だけでは中央寄せにできない。inset-block: 0;とmargin-block: auto;で上下中央に寄せる。

inline=要素の左右
block=要素の上下

セクション間の余白はメインタグで指定

写真はjpegでインポート（基礎的なところ忘れてた💦）

flex-shrink: 0 により 画像は親の幅が狭くなっても縮まないようにして、
flex-grow:1によりテキストで残りの余白を使うように設定

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY29〜31：中級編総復習 ドロワーメニュー１JQuery１まで
学習181日目(64~66)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
JQueryは理解が深いみたいでサクサク進められる✨
楽しい☺️それでも理解が足りないところがあったので復習できてよかったです📚
このペースだと何日かかるんだ〜😌💭

🌱今日の学び🌱
━━━━━━━━━━━━━━
右からスライドするアニメーションをつける時は、display:none;で指定するのではなく、tansration(X)で指定する

1本目と2本目のtopを同じ位置にする→45度回転させる

アニメーションはiconではなくて、��際に動くbarにつける

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY29~31：中級編総復習 headerPCのCSSまで
学習179日目(64〜66)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
しっかり理解したぞ！と思っていたハズが、初歩的なところからめっちゃ忘れていました💦
やっぱりCSSがとても苦手で、どこに何を当てるのが正解かがよくわかっていません💦 一回戻ってやり直す方がいいのかな〜😢💭

🌱今���の学び🌱
━━━━━━━━━━━━━━
cssやjsなど各ファイルを作成したら、ちゃんと動いているかを確認する

ファビコンはキャッシュを削除して再読み込みで表示される

breakpointのsassを別ファイルで作った時は、呼び出しにページ名をつけるか、@ use "breakpoint" as *;を使う

PCのインナーは、コンテンツ幅が広くなりすぎないようにmax-widthで指定する（スマホとは考え方が全然違う）

display: flex;＋flex-direction: column;スマホで縦並びにしたメニューは、position:sutatic;で横並びに直す

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY28：
学習179日目(63)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
納品前の最終確認大事！✨ これだけ拡張ツールが重質していたらチェックも効率よくできそう🔍💡
私は出来上がったら満足してチェックが適当になるクセがあるから、特に気をつけようと思います😅📝
チェクリスト化するのに何かいいツールあるか��？

🌱今日の学び🌱
━━━━━━━━━━━━━━
チェック項目を１つずる丁寧に確認する

iframeなど埋め込んだタグにエラーが出ているときは、直してもいいが、そのままでもOK

ファビコンやOGPが指定されていない時は、クライアントにどうするか確認する

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY 27：スクロールに応じて要素を「フワッ」と登場させる
学習178日目(62)

🌼今日のひとこと🌼
��━━━━━━━━━━━━━
一回聞いただけでは全く理解できませんでした😂
AIに一行づつ解説してもらって、なんとかなんとなく仕組みが理解できたかな😱ひえ〜

🌱今日の学び🌱
━━━━━━━━━━━━━━
IntersectionObserver は、スクロールを検知してアニメーションが実行できるようになる
「要素が画面に入ったか・出たかを自動で教えてくれる仕組み」

監視する仕組み（ルール）を作る
↓
監視する対象を指定する

「画面に入ったらどうする？出たらどうする？」というルールを作って、スクロールや画面サイズ変更が起きるたびに、 ブラウザが「入ったよ！」「出たよ！」と entries に情報を入れて呼び出してくれる

使われるシーン
・スクロールアニメーション（フェードイン・スライドイン）
・画像の遅延読み込み（Lazy Loading）
・無限スクロール
・広告の表示判定
・セクションが画面に入ったらメニュ���をハイライト

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY26 スムーススクロールとフローティングアイテム
学習178日目(61)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
むっずかし〜　理解するのにすごい時間がかかってしまいました💦if文はなぜか理解しやすい💡
難しいけど一度理解できると、いろんなことに応用できそうです✨

🌱今日の学び🌱
━━━━━━━━━━━━━━
a[href^="#"]の意味
・aタグのhref属性が#から始まるものに対して
・^= は 「〜で始まる」という意味
・a[href="#"] と違い、^="#"] は #about や #merit など全部まとめて取れる

"#" == id ? "html" : idの意味
・条件 ? 真の場合 : 偽の場合
・id が "#" なら → "html"
・id が "#" でなければ → id（そのまま）

CSSでも実装できるが、スクロールの速さなど細かい設定ができない＋ページの全てのリンクに設定されてしまう。

フローティングアイテムは初期状態では非表示にしておいて、JQueryでクラスをつけ外しする。

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY 25：モーダル
学習177日目(60)

🌼今日のひとこと🌼
━━━━━━━━━━━━━━
拡大モーダルを作った時とやり方が違った😂
無限大に記載方法がありそ〜
PCのキーボードを変えたら微妙に配置が変わって��ちにくい😵‍💫モーダルにもキーボードにも早く慣れたい！

🌱今日の学び🌱
━━━━━━━━━━━━━━
モーダルを作る時はHTMLのdialogタグを使う

position: fixed; + inset: 0; + margin: auto; で中央揃えになる

position: sticky; + top: 0; で上に張り付く

スクロール連鎖(モーダルをスクロールすると背景もスクロールされる)を止めるには、overscroll-behavior-y: none;を指定する

jQuery で開く → show() / showModal()
show：背景も触れる
showModal：背景は触れない＋::backdrop で背景色を設定
→&::backdrop { opacity: .2; background: #000; }

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY24：Swiper 自由課題
学習165日目(59)

🌼今日のひとこと
━━━━━━━━━━━━━━
Swiper奥が深すぎて悪戦苦闘😵‍💫
1行ずつ AI に解説してもらいながら、コツコツ噛み砕きました💦
自動再生のSwiperがあると、プロっぽいH Pになりそうでワクワクします！

🌱今日の学び
━━━━━━━━━━━━━━
🎯 centeredSlides: true
アクティブな��ライドを中央に配置できる

📐 Swiper と他の要素を横並びにするとき
親要素に display: flex 各アイテムに width を指定してレイアウトを安定させる

↔️ 左右どちらかだけ画面いっぱいに広げたいとき
「画面幅の半分動かして → インナー幅の半分戻す」 という計算で実現できる

🌀 滑らかに流れ続けるスライダー swiper-wrapper に
style="transition-timing-function: linear" を追加すると実現できる

🧭 Swiper の外側にナビやページネーションを置くとき
id を使って紐づけると安定する

#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY24：スライダー自由課題3つ目まで

🧱 デフォルトのHTML構造は崩さない
.swiper → .swiper-wrapper → .swiper-slide は鉄則

🎛 Swiper本体の調整はCSSではなくJSで
余白・動き・表示枚数はパラメータで設定する

📦 位置や外側の余白は“親要素”で調整
Swiper本体に直接marginを当てない

📚 まずは公式ドキュメントを見る
それでもダメならブログやQiitaで補強

🌀 複数Swiperを置くときはクラス名を分ける
.js-swiper-main とか .js-swiper-loop とか

⚠️ Width + Loop は相性が悪い
固定幅スライドでループさせたいときは → スライドを2倍用意 → バーチャルスライドで「後ろに5枚ぶん生成」して無限に見せる

Swiperはとにかく多機能で奥が深い🐱
調べるのは大変だけど、触ってると“あ、これもできるのか”と少しワクワクします😊

学習164日目(58)
#デイトラ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編 DAY24：スライダー　Perfect Pixelまで

margin-left: -5px; と margin-right: -5px;
→ padding の効果を保ったまま、位置をずらさないための調整。
スライダーの JS はデフォルト名のまま使わず、
ID 名などに変更して他の Swiper と干渉しないようにする 💡

Swiper のどこにスタイルを当てればいいのか���からなくなる…😫
これは 書いて慣れるしかなさそう
次の自由課題でしっかり練習していく ✨

学習150日目
#デイトラ
#デイトラコミュニティ

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

おはようございます☺️
いつも投稿拝見してます！

スライダー理解するのがかなり時間かかります🫠頭がパンクしそうです...
同じように感じている方がいてよかったです！

たかさんは余裕のある人向けと課題までされていて、本当に凄いです👏🏻✨

��れからも励みにさせていただきます！
がんばりましょう🐩

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

今日はどうしても行き詰まってしまい、メンターさんに質問させていただきました。
的確なヒントをもらって無事に解決できました ✨

原因はたった一つの記載ミス。
小さなミスひとつでこんなに動かなくなるなんて…と驚きました 😳
でも、確認方法がわかったので、このミスから��っかり学びを得ました 💡

メンターさんに聞くのは毎回ドキドキしてしまいますが、
質問を考えること自体も勉強になるので、
行き詰まっていつまでも立ち止まらず、勇気を持って質問していこうと思います 💪🌱

#デイトラ
#デイトラWEB制作コース

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編 DAY24　スライダ��（スマホCSSまで）📱✨

Swiper には元々スタイルが当たっている。
まずは DevTools の Styles パネルでデフォルトのスタイルを確認しながら カスタマイズしていく 🔍

!important を付けると 詳細度が上がり、Swiper のデフォルトスタイルを上書きできる。
普段は推奨されないけれど、外部ライブラリをカスタマイズするときは有効 💡

overflow: hidden; を打ち消して 下にはみ出させたい場合は、padding-bottom を追加してスペースを作る 📐

Swiperは慣れるまで手順が複雑で大変だ〜😵‍💫

学習147日目(58)
#デイトラ
#デイトラWEB制作コース

[ヒトミコ@デイトラweb制作コース受講中 @hitomi_uc]

中級編DAY24 スライダー　HTMLまで

Swioer の導入方法は、CDN とダウンロードの 2 通り📦 CSS と JavaScript をダウンロード、HTML は貼り付け

swiper-slide の中に画像やテキストを入れていく🖼️✏️

手順が多くて、次やる時絶対忘れそう…😇
なので、ハードコピーしながら Notion にまとめてたら、めちゃくちゃ時間かかりました😭

でもこれは 未来の自分への���資✨
次回はきっとスムーズにできるはず。

学習146日目(58)
#デイトラ