レイアウトこんにちは。スタメンでデザイナー兼フロントエンドエンジニアをしているナガキです。(オプションで)ビジネスチャット機能があります。App版チャットPC版チャットご覧のように、スマホアプリ版は非常にシンプルな画面構成ですが、PC版はひとつの画面内に様々な情報を表示する必要があり、どうしても複雑になりがちです。利用してレイアウトしています。便利な使い方をご紹介します。呼ばれる子要素を使って、柔軟なレイアウトが実現できます。docs仕様が何度も変わったり、ブラウザが対応していないなどの問題もありましたが、現在ではほとんどすべてのモダンブラウザで安心して利用することができます。1次元、つまり横か縦、どちらか一方向だけのレイアウト(並びや余白)を定義します。うまく活用することで、その名のとおりフレキシブルなレイアウトが実現できます。利用しているか説明していきましょう。なしとなっており、左右のカラムが固定幅、中央のメッセージ一覧部分だけがウィンドウ幅にあわせて変わります。実装しようとすると以下のようになります。flex-shrink)や基準幅(flex-basis)をまとめて設定しています。拡縮しない要素とすることで、中央のカラム幅だけがウィンドウ幅に応じて変わるようになります。利用することで、複数カラムのレイアウトが簡単に実現できました。横方向だけでなく、縦方向にも利用できます。あれば簡単に実装できます。縦方向に並べることができます。コンテンツに応じた幅}縦方向に並べる場合に気をつけなければならないのは、ウィンドウの高さとコンテンツ量の関係です。コンテンツ量がそれほど多くなく、ウィンドウ内に収まる場合は問題ありませんが、ウィンドウの高さを超える量のコンテンツがある場合は注意が必要です。auto;}を指定することで、状況に応じてリスト部分だけをスクロールさせています。サンプルのウィンドウサイズを変えたり、リストアイテムの数を増減させたりして挙動を確認してみてください。利用して、思い通りのレイアウトを実現する右カラムにはチャットルームの様々な情報が表示されています。各コンテンツには、指定幅のヘッダ(タイトル)と実コンテンツが含まれます)チャットルーム一覧とは下寄せで配置されるコンポーネントがある大きさの違う複数個のコンポーネントが混在するという違いがあります。プロパティを利用してカラム位置をコントロールするコンポーネントの下寄せ配置は、拡縮可能なコンテンツを利用することで実現します。auto;}により、中央のメンバー一覧部分がウィンドウ領域を埋めるように拡縮するため、ファイル一覧が最低限の高さを確保した状態で、最下部に押しやられます。利用する方法もあります。利用することで、下寄せ配置が実現できます。ネストすることでスクロールをコントロールする「TUNAG」PC版チャットでは、コンテンツの高さがウィンドウの高さを超えた場合にメンバー一覧だけをスクロールさせる必要がありました。配置(寄せ)などを自由自在に組み合わせることができます。サンプルでは、メンバー一覧のリスト部分だけを拡縮・スクロール可能な要素とすることで、1画面に収めつつ、状況に応じてスクロールバーを表示しています。あれば、ピクセルや割り合いを事前に定義することはもちろん、コンテンツに応じた大きさにもできます。それらを柔軟に組み合わせることができるため、非常に自由度が高いレイアウトが実現できます。react-content-loader...2022-08-16共通UIコンポーネントで速くクオリティの高いプロダクトを開発をしたい。株式会社スタメンでは、エンジニア採用を強化しています。ご興味のある方はぜひエンジニア採用情報をご覧ください。引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。