タグ

Flexboxに関するsatopianのブックマーク (2)

  • 独学の人でも大丈夫!CSS Flexboxの使い方を基礎から学べるチュートリアル

    CSS Flexboxの基礎となる考え方や構造、各プロパティの使い方を一通り学べるチュートリアルを紹介します。チュートリアルはステップ形式で、簡単なものから始まるので独学の人、そして初心者にもオススメです! 30日分のチュートリアルですが、1日分は3分くらいなので、正味1,2時間でCSS Flexboxをマスターできると思います。 Flexbox30 -GitHub by Samantha Ming 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1日目: Flexboxとは Flexboxの前は、レイアウトをするためにfloatを主に使用していました。CSSのデベロッパーは、floatは古い方法で限界があり、フラストレーションが貯まることをよく知っています。 しかし、現在は違います! レスポンシブ対応の柔軟なレイアウトはもちろ

    独学の人でも大丈夫!CSS Flexboxの使い方を基礎から学べるチュートリアル
  • もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends

    CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。 慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。 そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版:Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え

    もう迷わない!CSS Flexboxの使い方を徹底解説 | Web Design Trends
  • 1