サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

WEB

グリッドレイアウトの配置調整

今回はグリッドレイアウトにしたものを中央に配置したり、右端に配置したりしたい場合のテクニックを紹介します、。フレックスボックスの場合と比べて、仕様や注意する点が異なる部分もあるので、しっかり確認していきましょう! &#8 […]

グリッドアイテムの自動折り返し(auto-fill,auto-fit)

グリッドレイアウトのレスポンシブでは、ブレークポイントでカラム数を切り替えるCSSを入れても良いのですが、違う方法もあります。カラム数を何列と指定せずに、画面幅に合わせて自動で折り返されるようにする方法です。今回はその方 […]

グリッドアイテム間の余白調整(gap)

グリッドレイアウトでグリッド状に配置したアイテムは、何も設定しなければ余白がゼロでアイテム同士がくっついた状態になってしまいます。そこで今回は、グリッドアイテム間の余白を一括で設定できるCSSプロパティを紹介します! & […]

要素のグリッド配置 ※基礎編

例えばフォトギャラリーなど、縦にも横にも規則正しく写真を並べたい場合、要素をグリッド(格子状)のように配置する必要があります。このようなケースでは、フレックスボックスよりもグリッドレイアウトの方が適しているので、今回はそ […]

フレックスアイテムの折り返しと配置方向
(flex-wrap,flex-direction)

display: flex;ではフレックスアイテムを横並びにすることができますが、フレックスアイテムの数が多くてボックス内に納まりきらないこともあり得ます。また、フレックスアイテムを手前ではなく奥から詰めていきたいという […]

フレックスアイテムの伸び縮み(flex)

今回はちょっと応用です!display: flex; で横並びにしたフレックスアイテムは何も設定していない場合、画面や親要素の幅に合わせて縮小はしますが、拡大はしません(フレックスアイテムのwidthを%で指定していたら […]

要素の細かい位置調整(position)

*positionの使い方*

要素を移動させたり要素同士を重ねたり。またスクロールに追従するように要素を配置する方法など、positionについて詳しくご紹介!