CSS/Sass

CSS/Sass

• 
  2023.12.07公開 / 2023.12.11更新 【CSS初心者の方向け】display:flex-フレックスボックスの使い方をまとめました！

  フレックスボックスの利用について生徒さんから「わかるようで、わからないようで」とよく相談されます。 そこで、絶対理解しておきたい使い方をまとめました。 最低限、これをおさえておけばOK！です。

• 
  2021.10.09公開 / 2022.02.21更新 【Sassの便利な使い方】フォントサイズをCSSのclamp()を使ってSassで便利に指定する！

  CSSのclamp()の使い方と便利な利用方法をまとめました。Sassと組み合わせることでフォントサイズの指定など簡単にできるようになります！

• 
  2021.08.22公開 / 2021.10.19更新 【CSSテクニック】画面の幅が縮まった時の改行の位置をwbrで指定する方法

  レスポンシブデザインをしているときに、スマフォサイズでは一行に収まらない文字を改行しないといけないけど、でもPCサイズの時は一行で表示したいからbr要素は使えない…といったときに使うテクニックです。

• 
  2021.08.19公開 / 2021.10.19更新 【CSSテクニック】height:100%を効かせる方法

  height:100%はある条件下でないと適用できません。どういったときに効くのか？を整理してみました。

• 
  2021.08.18公開 / 2021.10.19更新 【CSSテクニック】positionを使って画像を領域を伸ばし、画像を覆ってみよう

  画像の上に同じ大きさの要素を不透明にして重ねる、オーバーレイ表現をしたいときによく使うテクニックです。positionで領域を広げられることを知っていると、いろいろと応用できるので便利です！

• 
  2021.07.19公開 / 2021.10.19更新 【CSSテクニック】object-positionで表示位置を調整する

  background-posiionみたいな使い方ができるobject-positionですが、あまり使ったことがない、という方も多いようです。基本的な使い方をマスターしてみましょう！

• 
  2021.07.07公開 / 2022.02.21更新 【CSSテクニック】object-fit:coverとbackground-size:coverの違い

  object-fit:coverとbackground-size:coverの違いや、使用する際の注意点をまとめました。