Labo 228: チャット型のデザイン ②
Labo 228: チャット型のデザイン ②
① につづき、会話形式のテキストを表示するモジュールを作成する
チャット型デザインの 2行目を追加する
ボックスのサイズを調整すると同時に、2行目は写真とテキストの並び順の入れ替える
並び順の入れ換えは、HTML を書き換えずにフレックスボックスオン機能を使う
フレックスボックスでは、横一列に並ぶボックスのサイズを調整することができ、並ぶ順序を入れ替えることもできる
HTML の基本的な構造は変えないが、チャット型デザインの 2行目は、親要素のクラス名を chat-2nd にする
flex-direction: row-reverse;
子要素を伸長する設定にしたり、子要素のベース幅を指定できる
写真のボックス幅を 70px に固定して、テキストのボックスを親要素の幅に合わせて伸縮させる
ボックスの幅や伸縮方法を設定するのが、それぞれの子要素に適用する flex プロパティ
flex: ① 伸長比 ② 縮小比 ③ ベース幅;
この設定にすると、親要素の幅にかかわらず、子要素の幅が ③ ベース幅の値に固定される
ボックスの幅を固定したいときに使う
この設定にすると、親要素の幅に合わせてボックスが伸縮する
固定幅のボックスと伸縮するボックスを橫に並べたい時に使う
レスポンシブデザインには良くあるパターン
子要素に flex プロパティを適用しなければ初期設定値が割り当てられる
チャット型のデザイン ① の解説にどおりの動作をする
flex: 0 1 auto;
親要素が狭いときは子要素も縮小し、親要素が広くてもベース幅を維持したまま伸長しない
実際の Web デザインでは、親要素の幅にある程度の余裕があっても子要素を伸長させたくないときに、flex プロパティを使わない選択をする
ナビゲーションメニューやパンくずリストを作る際に使われる
レスポンシブでアインに対応するためのスタイルが適用されていれば、画像はもとの縦横比を維持したまま拡大/縮小する
ベース幅を設定することによって幅を固定して表示できる
オリジナル画像の縦横比が維持される
フレックスボックスは橫に並ぶボックスの高さが揃うので、画像のボックスが小さくなれば、テキストのボックスも小さくなる
flex-direction プロパティは、子要素のボックスが並ぶ方向と、その順序を設定する
フレックスボックスの親要素に適用する
flex-drection: キーワード
レスポンシブデザインでは、画面サイズが広いときにはボックスを横方向に、狭いときは縦方向に並べたい
要素を並べ替える手段のひとつとして、flex-direction はよく使われるプロパティのひとつ