CSS - UPTECH DESIGN（アップテックデザイン）

position: stickyが効かない！原因の見つけ方と解決方法を初心者向けに徹底解説

「position: stickyを指定したのに、ヘッダーがスクロールに追従しない…」「サイドバーを固定したいのに、普通にスクロールされてしまう…」 CSS学習中のあなたは、こんな悩みを抱えていませんか？実はpositi […]

「メディアクエリのブレークポイントって、どこに設定すればいいの?」「min-widthとmax-widthの違いがよくわからない…」そんな悩みを抱えていませんか? レスポンシブデザインの実装で最初につまずくの […]

「スマホで見たらフォントが小さすぎる…」「タブレットだとレイアウトが崩れる…」そんな経験、ありませんか? レスポンシブデザインの実装で、メディアクエリを何個も書いて疲れていませんか? 実は、CSSのclamp()関数を使 […]

Flexboxの概要と基本原則 Flexboxは、Webデザインにおけるレイアウトの柔軟性を向上させるための強力なツールです。このセクションでは、Flexboxの基本的な概要と原則について解説します。 Flexboxは、 […]

Flexboxの基本概念の紹介 Flexboxは、CSSのレイアウトモデルの1つであり、柔軟なコンテナ内での要素の配置と整列を行うための強力なツールです。従来のCSSのレイアウト手法では、要素を配置するために複雑なプロパ […]

Flexbox概要 Flexboxは、CSSのレイアウトモジュールで、要素の柔軟な配置を実現します。 Flexコンテナ内のアイテムをメイン軸とクロス軸に沿って配置し、スペースの分配やサイズの制御ができます。 justif […]

CSS学習を始めたばかりの頃、コード例に書かれている「1.5em」や「1rem」といった単位表記を見て、「これは何?」と疑問に思ったことはありませんか?フォントサイズの指定は「px」しか使ったことがなく、相対単位の意味や […]

読み込めなくて困っているんだから早く教えて！という人はこちらから今回はWEB制作学習を始めるほとんどの人がぶつかるであろう「パス」について解説します。今回の記事のポイントは以下の4点。 POINT パスには「絶対パス […]

CSSのプロパティで「before」と「after」というものがあります。これらは疑似要素と言われ、CSS側で疑似的に要素を追加するというものです。必ず使わなくてはいけないわけでないですが、このbeforeやafte […]

CSSの記述は「セレクタ」「プロパティ」「値」の3つで記述されています。この3つを用いて記述することがCSSの基本文法です。 CSSはHTML内に記述することもできますが、推奨されておらず、一般的にはCSSファイルを別 […]

早速ですがmargin:0 auto;が効かない時は以下のことを確認してみてください。 displayの値が「inline」「inline-block」以外になっているか widthを指定しているか positionやf […]

「マージンやパディングが効かないんだけど！！」 WEB制作を学び始めたばかりの時、自分もありました。結論から言うと、「インライン要素にかけていませんか？」ということ。要するに、マージンやパディングをかけている要素が […]