CSS基礎 横並びで使うflexについて学ぼう！ 2025 11/28 CSS基礎 </noscript><iframe data-src="https://player.vimeo.com/video/1141268481?h=8a968893da&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="16.横並びで使うflex①" class="lazyload" > </noscript><iframe data-src="https://player.vimeo.com/video/1141267255?h=97ac253e9b&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="17.横並びで使うflex②" class="lazyload" > </noscript><iframe data-src="https://player.vimeo.com/video/684565966?h=f2d0583ac6" width="100%" height="450" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > flexの参考資料https://file.notion.so/f/f/c0095266-997f-490f-ab93-582ec3b559c9/533900b3-80d6-4c4d-8159-1927f8d41924/flex%E3%81%AE%E8%AA%AC%E6%98%8E.pdf?table=block&id=928359d7-ca47-4b82-ba8d-793b307f6b61&spaceId=c0095266-997f-490f-ab93-582ec3b559c9&expirationTimestamp=1764316800000&signature=mlMTvL6J3q1e7F_maDcVgSmWwtE8fqW30FJFFVawud8&downloadName=flex%E3%81%AE%E8%AA%AC%E6%98%8E.pdf レイアウトの練習をしてみよう！ トリペン先生 コーディングの基本が徐々に理解できたら、簡単なレイアウトを作成してみましょう！今回の練習レイアウトは、よくある形なので覚えておくといいですよ。 赤色で指示があるので、それに従ってください。 ・幅：980px・各余白を指示通りに これまで学習したことで作れますので、思い出してコーディングしてみてください！ 参考コードと動画解説 はじめに答えを見ると身につかないので、一度ご自身でチャレンジしてから解説をみるようにしましょう！ </noscript><iframe width="100%" height="500" data-src="https://player.vimeo.com/video/547312841" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" class="lazyload" > 参考コード https://www.dropbox.com/sh/zaazs9mscymp395/AACl_Eb793VCq8s_qKbx46PPa?dl=0 講座を完了したらクリックしてね！ レッスン完了 次のページへ CSS基礎
