みなさん、こんにちは！　今回の記事は珍しく（？）以下のメンバーによる共同執筆となります。 金融ソリューション事業部　市場系ソリューション 1 部　寺山 X イノベーション 本部　AI トランスフォーメーションセンター　山田 さて、以前よりアクセスしていただいている方はお気づきかと期待していますが、10 月末に当ブログのデザイン（ はてブ ロのテーマ）を刷新しました！ ※PC 版のみ適用しています。 変更前 変更後 トップページ 記事ページ 今回はデザインの実装における工夫等を紹介させていただきます！ デザ

みなさん、こんにちは！　今回の記事は珍しく（？）以下のメンバーによる共同執筆となります。 金融ソリューション事業部　市場系ソリューション 1 部　寺山 X イノベーション 本部　AI トランスフォーメーションセンター　山田 さて、以前よりアクセスしていただいている方はお気づきかと期待していますが、10 月末に当ブログのデザイン（ はてブ ロのテーマ）を刷新しました！ ※PC 版のみ適用しています。 変更前 変更後 トップページ 記事ページ 今回はデザインの実装における工夫等を紹介させていただきます！ デザ

経緯 css modules ファイル内に、html セレクタを直接記述したらエラーに遭遇したので、原因と解説、解決方法を簡単にまとめました。 やったこと css modules ファイル内で、 <h1> タグ内の文字色を 黄色 にするクラス指定を追記。 import styles from '../styles/xxx.module.scss' export default function Home() { return ( <div className={sty

はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（ @hiro0218 ）です。 現在、 ZOZOTOWN ではWebフロントエンド技術のリプレイスプロジェクトが進行しています 1 。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課題についてご紹介します。 既存技術スタックの課題 リプレイス以前の環境は、Classic ASPのテンプレートエンジンに依存したUI実装が多く存在しており、新規開発や変更のタイミングで実装をReact + CSS M

はじめに こんにちは、インターン生の手塚です。 今回はGROWIにおけるwebpackの設定について、調べてみたので記事にします。この記事はGROWIにおけるwebpackの設定に着目しているのでwebpackの基礎知識や、使い方の詳細は説明していません。webpackについてある程度の知識がある人に、プロジェクトへの活用例として参考にしてもらえればなと思っております。 webpackは設定が複雑で、そのため「webpack職人」と呼ばれる人たちが存在します。本当は、誰もが簡単に設定できるのが理想であり、

こんにちは。 今年４月より22卒エンジニアとして、スマートキャンプに入社したピーターこと佐々木です。 本記事では、入社エントリと題しまして、スマートキャンプへの入社理由と、実際に入社してみてどうだったかについて書きたいと思います。 自己紹介 なぜエンジニアになったのか エンジニアに興味を持ったきっかけ 原点は AI創薬とGoogleForm ひたすらに興味の幅をひろげる やりたいことなんてなくていい 私が大事にしていること 密な連携と高い生産性 密さとは 連携とは 生産性とは 広い視野をもつ 経験からしか

この記事は BASE アドベントカレンダー 13 日目の記事です。 はじめに こんにちは。 BASE BANK 株式会社 Dev Division にて Software Developer をしている永野( @glassmonekey )です。 普段はバックエンドエンジニアとして、Go/Python/PHP を主に書いてたりします。 最近はチームの分析基盤づくりとかもやってたりします。 そのことについて先日書いたりもしたので、もし良かったらご確認ください。 devblog.thebase.in 私達のチ

注意 カスケードレイヤーは正式実装の機能ではないため、これから仕様変更の可能性があります。 目次 注意 目次 はじめに カスケードについて Origin and Importance Context Specificity Order of Appearance カスケードレイヤーについて The Style Attribute Layers 従来のCSS カスケードレイヤーの記述方法について 複数レイヤー 使用例（リファクタリング） 修正前のコード リファクタリングの準備 FLOCSS化 リファクタリン

こんにちは。カケハシの主力プロダクトである「Musubi（電子薬歴 ムスビ）」開発チームでUI/UXデザインを担当している木村です。 この記事は カケハシアドベントカレンダー2021 の7日目の記事になります。 Musubiは、カケハシ創業以降、薬局の基幹システムとして成長してきたプロダクトです。 特に機能面では日々追加開発が行われ、便利になってきています。もちろんまだ十分ではない部分はありますが、とにかく絶え間なく成長を続けています。 一方、デザインの面では、機能開発の成長スピードに追いついていない状態

こんにちは、株式会社カケハシで おくすり連絡帳 Pocket Musubi の開発を担当している渡辺です。 カケハシのエンジニアはフロントエンドもバックエンドのAPIサーバーも開発を担当しています。どちらかといえばフロントエンドの方が知識・経験ともに自信があるという背景から、今回はカケハシのフロントエンドエンジニアについて書きます。 カケハシでのフロントエンドエンジニア カケハシであまりフロントエンドエンジニアという表現は用いず、アプリケーションエンジニアという表現を用いています。 アプリケーションとして

フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレス

はじめまして、2021年度新卒の木村です。 フロントエンドエンジニアとして テクノロジーセンター5G に所属しています。 今回は、Nuxt.js ならびに TypeScript を利用して、簡単な抽選ツールを作成してみた内容についてご紹介します。 Nuxt.js と TypeScript Nuxt.js は、Vue.js ベースの JavaScript のフレームワークです。Webページ構築に有用な UI 以外の機能（ Ajax やサーバーサイドレンダリングなど）をまとめて利用できる環境を提供してくれます

こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課の @t_okkan です。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在 ラク スでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕組みや利点を中心に紹介するため、実践的な話の紹介は少ないです。PostCSSの実践的な話はまた別の記事で紹介できればと思います。 なお、別

はじめに こんにちは、フロントエンドチームのta_kameです。 私がSassを使い始めた頃、Sassに種類があるなんてことは全く知らず、その上多くの人に使われているはずのLibSassが非推奨になるなんて思ってもみませんでした。私自身知らずのうちに使っていて、結構最近になってから Dart Sassを覚えたのですが、今回はそのことについてまとめてみようと思います。同様にLibSassを扱っている方も含めて、今回はSassについて知っている人も知らない人も、少しでも参考になれば幸いです。 目次 はじめに

目次 はじめに スキルマップ HTML CSS JavaScript SPA（Single Page Application） JavaScriptフレームワーク パッケージ管理 TypeScript Git Linux Web知識 テスト ブラウザ コーディングルール Docker（必須ではないが知っておくと良い） 情報収集に使えるWebサイト（おまけ） まとめ おわりに はじめに こんにちは、フロントエンドチームの北嶋です。 弊社でフロントエンドチームを立ち上げてから1年以上が経ち、少しずつメンバーも