Title/URL2019年11月末、Bootstrapはv4.4へとアップデートし、いくつかの機能が追加された。decks.特にこの2つの登場によって、レスポンシブ対応用の記述がよりスマートになった。classes終わりに前提v4.4.0以降のBootstrapを読み込まないと使えない。containersgetbootstrap.com従来、固定幅の.containerと全体幅の.container-fluidという2種類のクラスしかなかったが、.container-smのようにbreakpointを指定すると、それ未満の時は全体幅、以上の時は固定幅で表示できるようになった。これにより、576px以上1200px未満のレイアウトについて、以前より柔軟になっただろう。(しかしあんまり目立つメリットが思いつかなかったので、何か良い表現があれば教えてほしい...。classesgetbootstrap.comレスポンシブ対応なカード型レイアウトが簡単に表現できるようになった。ブログ記事やスタッフ紹介などの一覧ページで便利だろう。「スマホで1列・タブレットで2列・それ以上の画面で3列なレイアウト」を表現するのに、これまでは次のような書き方をしていただろうか。</div></div>colの数だけbreakpointの記述を繰り返す必要があり、決してスマートな書き方ではなかった。それが次のように書き換えられるようになった。</div></div>だいぶ直感的になり、どういう意図のクラス指定なのかも読み取りやすくなった。ちなみに.col-sm-6のように個別で大きさを指定することもできる。最近追加されたBootstrap(v4.4)の.row-cols、むしろ前はどうだったんだっけ?って感じだったのでv4.3のドキュメントと見比べてやっと理解した。1枚目が従来の方法で、2枚目が新しく追加された方法。5にも引き継がれる予定なのですぐ使って良いとのこと。GitHubのissue群を覗く限り、近いうちにリリースされる動きはなさそうだが...。関連記事2019-12-08AdobeXDの新機能「ステート」をアセットの管理目的で導入する場合の注意点2019-03-10アイキャッチ画像を背景に敷くはてなブログテーマ「SquarePlates」を公開しました2018-12-17JavaScript全然わからないけどFramerXを使ってみたら楽しかった2016-11-12はてなブログテーマ「Tiles」を公開しました。Title/URLこの記事を書いた人ろくぜうどんid:rokuzeudonモノ・コトをより良くするWebデザイナーです。サービス開発におけるUIデザイン・LP制作・HTML/CSS実装・プロジェクトマネジメントなど幅広く立ち回っています。(3)このブログについて|プライバシーポリシースターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。