サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
Webで
遊ぼ!
OPEN

Blog List

これまでのブログ記事を新しい順にまとめています

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

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

gridレイアウト記事のサムネイル

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

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

flex-wrap記事のサムネイル

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

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

flexプロパティ記事のサムネイル

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

*positionの使い方*

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

要素の細かい位置指定(position)解説記事のサムネイル