年別アーカイブ：2021年

疑似クラスの nth-of-type と nth-child。 「n 番目の要素だけスタイルを設定したい」場面で良く使用しますが、きちんと理解せずに使用していると、スタイルが正しく適用されてなくてハマ ...

CSS初心者のころは疑似要素のbeforeやafterを使用した時に、表示されなくてハマってしまった方は多いのでは無いでしょうか？ そんな方に、疑似要素が表示されない時の解決方法について解説します。 ...

beforeやafterで知られる擬似要素ですが、初心者の方はなんとなく使う場合が多いのではないでしょうか？ 記述方法や使用場面をしっかりと理解した上で使用できているでしょうか？ なぜ疑似要素を使うの ...

CSS学習し始めの頃、レスポンシブ対応でウィンドウサイズを変えた際にアスペクト比（縦横比）が崩れ、正しいレイアウトが出来ずにハマった方は多いのではないでしょうか？ この記事では、レスポンシブ対応で必要 ...

HTML/CSS の模写コーディングやデザインカンプからのコーディング練習を行っていると、たまに以下のようなレイアウトが出てきます。 上記図のような、２段組みレイアウトで段違いになっている場合でも F ...

Flexboxを勉強し始めると、flexプロパティを使用して「flex: 1;」と書かれている物をよく見かけると思います。 CSS初心者のころは、良く分からずなんとなく使っている方も多いのではないでし ...

「display: inline-block;」でブロック要素を横並びにできますが、それよりも簡単に横並びにできるFlexbox。 この記事では、Flexboxの基本的な使い方とよく使われているプロパ ...

HTML、CSS を学習していると「ブロック要素でも横並びにするにはどうするればいい？」「インライン要素の幅と高さを指定したいけど、どうやる？」などといった疑問がでてくると思います。 今回の記事は、そ ...

Webサイトを作るために必ず理解しないといけないブロック要素、インライン要素。その違いを正しく理解していないと、Webサイト作成時に幅や高さ、余白指定がうまくいかないときがあります。 今回は、その２つ ...

WEB ページ上に余白を作る「padding」と「margin」。 それぞれの違いや、どちらを使えば良いか分からず、なんとなく使っている方も多いのではないでしょうか？また、理解しているつもりでも、実際 ...