実は私...35歳で大胆なキャリアチェンジをしました。リベンリ自己紹介(CPO:柳瀬) | 株式会社リベンリ
リベンリCPOの柳瀬です。私は現在45歳になります。生まれは埼玉県入間市。小学校1年生で所沢市に引っ越して、それ以来20歳まで所沢に住んでいました。 20歳の頃の私(もちろん右)若ぁ...以前こ...
https://www.wantedly.com/companies/company_2332367/post_articles/461206
こんにちは!
リベンリの柳瀬です!
私がIT業界に入った時最初に従事した仕事が、クライアントのページをひたすらCSSで再レイアウトする!
というものでした。
キャリアチェンジの詳細はこちら↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
おそらく数百、数千ページはCSSでレイアウトしたと思います...。
そこでCSSとHTML構造をみっちり学んだお陰で今があるわけですが、
最近はそこまでガッツリCSS書いてないので、たまにネットで情報を検索すると
たくさん新しいCSSや使ったことがないCSSが登場してて、
ってなるんですよね!
そんなCSSのうち、最近よく使うもの(使ってみたいもの)を3つほど紹介しようかなと思います!
display: flex;を使うと、justify-content: center;とalign-items: center;の2行を追加しないとセンタリングできないものが、display: grid;の書き方だと2行でいいので、使いやすいですね。
display: flex;は案外取り回しが微妙で、ちょうどいいところに配置するのが難しかったりするので、
display: grid;のチョイスっていうのも頭にあると、レイアウト調整が楽になりそうですね。
少し前はページの一部を追従しようと思うとjs(java script)一択だったんですが、最近はCSSでも実現可能で嬉しい限りですね。
position: sticky; と top: 0;を記述すると、例えばヘッダーメニューなんかがスクロールに合わせて追従できたりします。
記述も簡単だし扱いが楽なので、使い勝手が良いと思います。
これ実はまだ使ったことがないんですが(おい)、display: flex;やdisplay: grid;でコンテナを配置したあと、例えばgap: 50px 100px;と記述すると、コンテナの余白を下に50px、横に100px取ることができます。
こちらもdisplay: flex;などで余白扱いに困ったときに便利に使えそうなCSSだと思います。
diplay: flex;は便利だけど結構融通が利かないヤツなので、手綱を引く手段として色々テクニックを知っておいた方が良さそうだなと思っております。
ということで、そんなCSSを含めて技術を身につけたい方は、ぜひリベンリの募集ページを覗いていただければと思います!