monyurinのブックマーク / 2017年11月16日

monyurin id:monyurin

2017年11月16日のブックマーク (2件)

[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある
Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する神話は崩された Fri
monyurin 2017/11/16
flexbox

grid

CSS3
リンク
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-it emsなど）を指定している場合があります。それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。表示確認のデモはPCでの閲覧推奨です。要素を両端に寄せる特にヘッダーやフッターで利用
monyurin 2017/11/16
flexbox
リンク
- 2017年11月17日
- 2017年11月16日
- 2017年11月15日