CSS のフレックス(display: flex) でサイトをレイアウトするトレーニング
2024.03.10 20:02 (8ヶ月前) 投稿者: カテゴリ: HTML
当社TORICO の社内勉強会で CSS のフレックス( `display: flex` ) の演習を行いました。 この記事は、その勉強会で行ったフレックスの演習の内容を公開するものです。 CSS の書かれていない HTML に CSS を書いていき、目標画像と同じ見た目になるようにします。
当社TORICO の社内勉強会で CSS のフレックス( `display: flex` ) の演習を行いました。 この記事は、その勉強会で行ったフレックスの演習の内容を公開するものです。 CSS の書かれていない HTML に CSS を書いていき、目標画像と同じ見た目になるようにします。
4/1から新卒で入社した高津です。
就社してからは初めてのブログ投稿となります。
TORICOでは、ウェブサービスのCSSフレームワークとしてBootstrap4を多く採用しています。 ユーティリティクラス(margin,padding,文字サイズなど)、プリセットデザイン(card,buttonなど)、グリッドレイアウトが必要十分なだけ収まっており、容量と使う機能のバランスがちょうどよいためです。 漫画全巻ドットコムなどのサービスの特集ページもBootstrap4が適用されており、 非デザイナーでも十分な自由度を保ったレイアウトを少ないコード量で書くことができます。 今回は、非デザイナー向けに、簡単にBootstrapの使い方を教えます。