フロントエンド– category –

【図解あり】CSSのmargin相殺とは？仕組みと防ぐ方法を初心者にもわかりやすく解説 「marginを指定したのに余白が思った通りにならない…」そんな経験はありませんか？実はその原因、多くの場合はmarginの相殺（margin collapse）です。この仕組みを理解し...

【初心者向け】CSSのmarginとは？使い方・指定方法・paddingとの違いを徹底解説 CSSでレイアウトを整えるときに欠かせないのが「margin（マージン）」です。しかし、「paddingとの違いがよく分からない」「marginの値をうまく設定できない」と悩む初心者も...

【CSS初心者向け】transformの使い方を徹底解説｜画像や文字を動かす・回す・拡大する基本まとめ CSSのtransform（トランスフォーム）は、要素を動かしたり、回転させたり、拡大・縮小したりするためのプロパティです。アニメーションやデザイン演出でもよ...

【初心者向け】ハンバーガーメニューの「ボタンは動くのにメニューが表示されない」原因と対処法 スマホサイトやレスポンシブサイトでよく使うハンバーガーメニュー。「ボタンを押すと（アニメーションは動く）でもメニューリストが表示されない！」という...

【CSS初心者向け】パララックス効果の作り方を丁寧に解説｜background-attachment・translateZで奥行きを演出 「スクロールすると背景がゆっくり動くおしゃれなサイトを作りたい」そんなときに使えるのが パララックス効果（Parallax Effect） です。 この...

【初心者向け】テキストとアイコンがズレる原因と解決方法｜align-itemsで簡単に水平揃えにする方法 「テキストとアイコンを横並びにしたら、なぜかアイコンだけ下にズレてしまう…」こんな経験はありませんか？ 特に、display: flex; を使って横並びにした...

【初心者向け】画像の上に文字を重ねる方法｜positionをやさしく解説します Webサイトを作っていると「画像の上に見出しを乗せたい！」「ボタンを少しだけズラしたい！」「要素を重ねてオシャレにしたい！」という場面がよくあります。 そんな時に必ず使う...

【初心者の備忘録】模写コーディングでつまずいたポイント｜max-widthを最初に設定しよう コーディング学習を進める中で、初心者の私がよくやってしまうミスを備忘録としてまとめていきます^^同じようなところで詰まっている方の参考になれば嬉しいです！ ...

【初心者向け】display:none; が効かない時の対処法｜レスポンシブ模写でよくあるミスと直し方 初心者向け模写を最近やっています^^ そこで初心者の私がよくやってしまうミスをご紹介します！ 皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でござ...

【初心者向け】ナビゲーションバーの上に隙間ができる原因と対処法｜margin・paddingの基本を解説2025 初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^ 前回と同様、参考にしたのはこちら  作って学ぶコーディング学習サイト　https:...