Zenn
📦

📦 FlexboxとParcel入門まとめ

に公開
CSS
web制作
Flexbox
parcel
tech

📌 フレックスボックス（Flexbox）とは？

要素を横または縦に整列させたり、
スペースを均等に分けて配置するためのCSSツールです。

📦📦📦📦 ← このように整列、間隔、方向の指定が簡単に設定できます。

Flexboxは、要素を横・縦に配置・整列するための仕組みです！

  • 元々、divやimgなどのブロック要素は縦に積み重なります
  • display: flexを使うと、横並びになります
  • だから、外側の枠（div）を作ってそこに整列のルールを指定することで、
    内部のアイテムたちが整列されるのです

📜 使用スクリプト

コマンド 説明
npm run dev 開発サーバーを起動（parcel index.html）
npm run build プロジェクトをビルド（parcel index.html）

🧰 開発依存パッケージ

パッケージ名 バージョン 説明
@parcel/transformer-sass ^2.15.2 SCSSファイルをParcelで変換するためのトランスフォーマー

🔧 追加インストールが必要です: SCSSのコンパイルにはsassパッケージのインストールも必要です。

npm install -D sass

🎞️ Transition（トランジション）

CSSプロパティの値が変化するときに、
アニメーションのように滑らかに変化させるためのプロパティ

🎯 Transform（トランスフォーム）

HTML要素を
回転、移動、拡大縮小、傾けるなどの変形を行うためのCSSプロパティ

  • 2Dおよび3Dの変形が可能です

Discussion