HTML&CSS

FlexBoxの使い方(6)〜flexプロパティの練習

flexプロパティの練習用サンプルを作成しました。 flex-grow、flex-shrink,flex-basisの値を入れてレイアウトを確認するものです。 値は数字の0以上の整数を入れてください。 数値入力後に「CSS設定する」ボタンをクリックするとピンクの背景部分のレイアウトが変わります。 f  >>続きを読む

FlexBoxの使い方(5)〜flexプロパティについて

flexプロパティについて解説します。 display:flexを指定したときflexコンテナはblockの性格を持ち、親要素の幅いっぱいに広がります。flexコンテナでflexアイテムをきれいに囲むためにはflexアイテムの幅をそれぞれ計算してflexコンテナの幅を決めなければいけません。つまり、  >>続きを読む

FlexBoxの使い方(4)〜display:inline-flexについて

「inline-flex」を簡単に説明すると「inline-block」の拡張版と言えます。 「inline-block」の性格を持ちながら、尚且つ「flex」の性格を持ちます。結構万能に使えますので有効に活用しましょう。 メリット flexコンテナに「display:inline-flex」を設定  >>続きを読む

FlexBoxの使い方(1)〜display:flexについて

通常フローしたブロック要素を横並びにするにはこれまでfloatプロパティを使用していましたが、その挙動は難しくて入門者を困らせる関門でした。CSS3で定義されたFlexBoxの仕組みを使うと簡単に横並びのレイアウトが出来上がります。また、今までできなかったこともうまく解決できるようになりました。まず  >>続きを読む

可変レイアウト(Fluid Layout)作成のポイント

DogRoboの一日は朝食で始まる。 ロボットの朝食なんてオイル臭い丸薬のようなものと思うだろうが、実際はトーストと目玉焼きにカフェオレとシャレている。特にカフェオレにはこだわりがある。牛乳とマンデリンコーヒーの割合は7:3に決めている。間違ってはいけない、牛乳が7割なのだ。そして極めつけは100g  >>続きを読む