フロントエンド– category –

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

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

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

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

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

こんにちは！今回は「テキストとアイコンを横並びにしたらバランスがおかしくなってしまった！」という方のためのに対処法をお伝えしていきます。 まずはHTMLとCSSの中身を見ていきましょう。 親要素に display: flex; でテキストとアイコンを横並びにして...

こんにちは★初心者の私がコーディングする際に、画像の上に見出しを載せたい時や要素を重ねて表示したい時に使うプロパティ　position　について学習してみようと思います。 まずはHTMLに親要素と子要素を準備します。 CSSには親要素と子要素に分かりやす...

初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^ 参考にしたのはこちら  作って学ぶコーディング学習サイト とっても見やすく学習しやすいように初級、中級、上級編と分かれていて、完成イメージやヒント、デモ、ソースコード、画像...

初心者向け模写を最近やっています^^ そこで初心者の私がよくやってしまうミスをご紹介します！ 皆さんの参考になればなぁーと思いつつもほぼ私の備忘録でございます  参考にした模写はこちら  作って学ぶコーディング学習サイト　https://code-jump.com/c...

初心者の私がよくやってしまうミスを備忘録としてお届けしていきます^^ 前回と同様、参考にしたのはこちら  作って学ぶコーディング学習サイト　https://code-jump.com/coding-recommend/ 見た目がシンプルで綺麗めのデザインなので初心者にはコーディング...