1
/
5

魅力的なCSSたち

柳瀬 正登さんのプロフィール
柳瀬 正登
CPO
on 2023/06/27

Photo by Michael Dziedzic on Unsplash

こんにちは！

リベンリの柳瀬です！

私がIT業界に入った時最初に従事した仕事が、クライアントのページをひたすらCSSで再レイアウトする！

というものでした。

キャリアチェンジの詳細はこちら↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

実は私...35歳で大胆なキャリアチェンジをしました。リベンリ自己紹介（CPO：柳瀬） | 株式会社リベンリ
リベンリCPOの柳瀬です。私は現在45歳になります。生まれは埼玉県入間市。小学校1年生で所沢市に引っ越して、それ以来20歳まで所沢に住んでいました。 20歳の頃の私（もちろん右）若ぁ...以前こ...
https://www.wantedly.com/companies/company_2332367/post_articles/461206
総合職（営業）
幅広いビジネスフィールドの中での活躍する将来の幹部候補を募集します！
私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に自社開発の「Litera App（リテラアップ）」と、システムの受託開発事業を展開しています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 「Litera App」は、既に大手企業での導入が進んでおり、今後も新機能の開発を進めていく予定です。 また、受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ

おそらく数百、数千ページはCSSでレイアウトしたと思います...。

そこでCSSとHTML構造をみっちり学んだお陰で今があるわけですが、

最近はそこまでガッツリCSS書いてないので、たまにネットで情報を検索すると

たくさん新しいCSSや使ったことがないCSSが登場してて、

おおっ！

ってなるんですよね！

そんなCSSのうち、最近よく使うもの（使ってみたいもの）を3つほど紹介しようかなと思います！

法人営業
湘南のIT企業リベンリで、営業や営業企画目指しませんか？
私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に自社開発の「Litera App（リテラアップ）」と、システムの受託開発事業を展開しています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 「Litera App」は、既に大手企業での導入が進んでおり、今後も新機能の開発を進めていく予定です。 また、受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ

１．display: grid; & place-items: center;

display: flex;を使うと、justify-content: center;とalign-items: center;の２行を追加しないとセンタリングできないものが、display: grid;の書き方だと２行でいいので、使いやすいですね。

display: flex;は案外取り回しが微妙で、ちょうどいいところに配置するのが難しかったりするので、

display: grid;のチョイスっていうのも頭にあると、レイアウト調整が楽になりそうですね。


Webエンジニア
秋田県でゼロから、エンジニア目指しませんか？
私たち　株式会社リベンリの現地会社として、秋田県仙北市に設立された、「株式会社リベンリ秋田」です。 主に、システムの受託開発事業を展開しています。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために、より良いシステムを世の中に構築する受託開発で会社規模拡大を図っていきます。 新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ 受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ

２．position: sticky;

少し前はページの一部を追従しようと思うとjs(java script)一択だったんですが、最近はCSSでも実現可能で嬉しい限りですね。

position: sticky; と top: 0;を記述すると、例えばヘッダーメニューなんかがスクロールに合わせて追従できたりします。

記述も簡単だし扱いが楽なので、使い勝手が良いと思います。


Webエンジニア
湘南でゼロからエンジニアを目指してみませんか？
私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に自社開発の「Litera App（リテラアップ）」と、システムの受託開発事業を展開しています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 「Litera App」は、既に大手企業での導入が進んでおり、今後も新機能の開発を進めていく予定です。 また、受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ

３．gap

これ実はまだ使ったことがないんですが（おい）、display: flex;やdisplay: grid;でコンテナを配置したあと、例えばgap: 50px 100px;と記述すると、コンテナの余白を下に50px、横に100px取ることができます。

こちらもdisplay: flex;などで余白扱いに困ったときに便利に使えそうなCSSだと思います。

diplay: flex;は便利だけど結構融通が利かないヤツなので、手綱を引く手段として色々テクニックを知っておいた方が良さそうだなと思っております。

ということで、そんなCSSを含めて技術を身につけたい方は、ぜひリベンリの募集ページを覗いていただければと思います！


Webエンジニア
裁量をもって働きたい！自由な発想で世の中に便利なものを届けるエンジニア募集
私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に自社開発の「Litera App（リテラアップ）」と、システムの受託開発事業を展開しています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 「Litera App」は、既に大手企業での導入が進んでおり、今後も新機能の開発を進めていく予定です。 また、受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ
Webエンジニア
秋田県にAターンしたい！裁量をもって働きたいエンジニア募集！
私たち　株式会社リベンリの現地会社として、秋田県仙北市に設立された、「株式会社リベンリ秋田」です。 主に、システムの受託開発事業を展開しています。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために、より良いシステムを世の中に構築する受託開発で会社規模拡大を図っていきます。 新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ 受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ
SES営業・受託開発営業
SES営業・受託開発営業の新部門立ち上げます！社員第一号になりませんか？
私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に、システムの受託開発事業と、自社開発の「Litera App（リテラアップ）」を展開しています。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。
株式会社リベンリ
株式会社リベンリでは一緒に働く仲間を募集しています
CSS エンジニア 技術 テクニック
1 いいね！
1 いいね！
株式会社リベンリの会社情報

株式会社リベンリ

私たち株式会社リベンリは、湘南を拠点に活動するソフトウェア開発会社です。 主に自社開発の「Litera App（リテラアップ）」と、システムの受託開発事業を展開しています。 ■Litera App■ 「Litera App」は、ユーザーのPC操作に合わせて、より効率的な操作方法や覚えるべき機能を、自動で教えてくれるWindowsソフトです。 いつも通り作業するだけで、必要な操作方法だけをその場でアドバイスしてくれるので、効率よくスキルを習得できます。業務傾向のレポートを活用すれば、さらなる業務効率化と経費削減を見込めます。 ■受託開発■ 不動産、金融、製造、サービス業など、様々な業界のクライアントから依頼を受けて開発をしています。 これまでの経験を生かして、企画立案からお手伝いするケースもあります。 ユーザー目線に立って、どのようなUI/UXを構築するか、クライアントやサービスの利用ユーザーの意見を汲み取り、構築していきます。開発段階におけるメンバーからの意見も大切にしています。 ▍今後の展望 日本の生産性を高めるために「Litera App」の開発を進めるとともに、より良いシステムを世の中に構築する受託開発の両軸で拡大を図っていきます。 「Litera App」は、既に大手企業での導入が進んでおり、今後も新機能の開発を進めていく予定です。 また、受託開発においては、開発メンバーが様々なシステムに触れて成長することで、 自社のノウハウを高め、新しいサービスに、どんどんチャレンジしていける開発会社になることを目標にしています。 ■人の生活を便利にするものをつくり続ける■ Litera Appや受託開発事業で、その業界特有の課題やユーザーのニーズを知ることが出来ます。 そこに、リベンリが大切にする、「自由な発想とアクション」を掛け合わせて、 世の中の生活をより便利にするものをつくっていきたいと考えています。

もっと見る
同じタグの記事
#エンジニア
もっと見る
今週のランキング
ランキングをみる