「CSS」に関連する技術ブログ

企業やコミュニティが発信する「CSS」に関連する技術ブログの一覧です。

FE的観点からのデザインシステム事始め

■ はじめに こんにちは。株式会社ペライチ のフロントエンドエンジニア藤田です。 デザイナーやサーバーサイドのエンジニアと連携を取り、アプリケーション内におけるユーザーと関わる部分の機能開発や改善が普段の主な業務内容です。 現在開発に携わっているプロジェクトにおいて、CSS 周りの負債を返済する一環として実験的にデザインシステム的な概念を導入

巨大なプルリクエストのコードレビューを乗り越える

こんにちは。駅奪取エンジニアの id:dorapon2000 です。 コード差分の大きなプルリクエスト(以下、プルリク)をコードレビューした経験は多くの方があると思います。 プルリクは小さく・単位ごとに、とは頭でわかっていても、実装している内に想定よりも大きくなってしまったり、1つのプルリクにまとめなければコンテキストが伝わらなかったり、どうしてもというこ
CSS

Atomic Designを導入してフロントを構成してみよう!

はじめに KINTOテクノロジーズでKINTO ONE新車サブスクリプションシステムのフロント開発を担当しているカンと申します。 現在担当している、プロジェクトから簡単にご紹介させていただきます。 KINTO ONE新車サブスクリプションシステムは新アーキテクチャの適用を順次取り込んでいます。 フロントチームはNext.jsとTypeScript、デザインパータンとしてAtomic Designを採用して

ノンデザイナー必見!Notionでマニュアルをぐっと読みやすくする14選

こんにちは! 株式会社サイバーエージェント2012年入社。AI事業本部のグンタ・ブルンナーと申します ...

テックブログのデザイン刷新(実装編)

みなさん、こんにちは! 今回の記事は珍しく(?)以下のメンバーによる共同執筆となります。 金融ソリューション事業部 市場系ソリューション 1 部 寺山 X イノベーション 本部 AI トランスフォーメーションセンター 山田 さて、以前よりアクセスしていただいている方はお気づきかと期待していますが、10 月末に当ブログのデザイン( はてブ ロのテーマ)を刷

ミイダスのフロントエンドをNext.jsに移行した背景と課題

ミイダスのフロントエンド開発では、これまでReactとReduxを中心に、プロダクトや開発組織フェーズとその変化に対応するため技術選定を進めてきました。 そして2021年からスタートしたNext.jsへの移行計画「ミイダス2.0」プロジェクトの全貌について、フロントエンド開発を担当した後藤と松村、李に話を聞きました。 移行した背景や課題、今後の展望についてご紹介しま

Google Meetで誰がいないかをすぐに見つけだす拡張機能を作成した

はじめに こんにちは。入会システムチーム高畑と申します。 ニフティでは打ち合わせ等にGoogle Meetを使用しています。Google Meetで打ち合わせ開始時に誰がいて誰がいないのか、全員参加しているかを確認する時間が発生してしまうため、今回は予め作成したリストからMeet画面に出席していない人を表示するChrome拡張機能を作成しました。 Google Meetでは 出席機能 が提供さ

pure selectors must contain at least one local class or id

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

社内の非エンジニア向けに競プロ勉強会を主催した話

こんにちは!株式会社ペライチ のサーバーサイドエンジニアの福原です! つい先日、社内にて非エンジニアの社員に向けて競プロに挑戦してみる勉強会を主催しました。 本記事では勉強会開催の経緯や内容についてとその結果私が得られたものや提供できたものについてまとめます。 また非エンジニア向けの勉強会の中身について触れることで、弊社の開発チーム以外

Prettier の代替として Rome 触ってみた

Prettier の代替として Rome 触ってみた はじめに こんにちは、旅行 PF 部エンジニアの奥田です。 この記事では、Prettier の 10 倍速いと言われるRomeを触っていきます。 ここまで圧倒的な速度を喧伝されては気になるのは人の性…さっそく触っていきます! Rome とは フロントエンド開発のツールチェインを 1 つに統一することを目指しているプロジェクトです。 Babel,ESLint,webpack

【Yew】Rustでフロントエンド開発 - Rustのマクロを紐解く -

こんにちは、 電通国際情報サービス (ISID) 金融ソリューション事業部の大場です。 今回は、Rustでフロントエンドの実装ができるYewというライブラリを使って Markdown エディタを作った話をします。本記事は、Yewの内部実装に触れながらYewやRustのマクロの動作について理解を深めることを目的としています。これらについて詳しく知りたい方はぜひ本記事を参考にしていた

Vue Fes Japan Online 2022 に BASE から2名のエンジニアが登壇及び協賛します

2022/10/16(日)に開催される Vue Fes Japan Online 2022 で BASE に所属する2名のエンジニアが登壇します。 vuefes.jp BASE では 2018年頃から Vue.js を使ったプロダクト開発を行ってきており、これまでいくつか Vue.js に関連するテックブログ記事やイベントへの参加を行ってきました。 そして今回は Vue Fes Japan Online 2022 のスポンサーとなり、またひとつ Vue.js コミュニティへの貢献がで

より綺麗な CSS を書くためには

今回は、チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。 !important を使わない 余分な div は書かない CSS セレクタを深くしない HTML に style を直接指定しない 自分より外のコンポーネントに margin の情報を持たせない まとめ !important を使わない 例えば、以下のようなHTMLがあったとします。 < style > p { color : red !i

アクセシビリティ推進組織立ち上げ後半年間の動き

こんにちは。エンジニアの中島です。 2022年 4月からアクセシビリティ推進グループ(以下推進グループ)に在籍しています。 この組織は新設されたばかりで、まだ出来て半年の組織になります。 そのため、部署の目指すべきゴールイメージや、それを図るための指標といったものを作るところから始めることになりました。 本記事はそういったところについて共有させ

CakePHP2からCakePHP4へのバージョンアップ 〜其の2 Cake2とCake4の共存環境編〜

はじめに こんにちは。株式会社ペライチ のエンジニアリングマネージャーの三井と申します。 ペライチではオフショア開発の立ち上げからオフショアでの開発プロジェクト推進をしています。オフショアの概要につきましては以下に簡単な紹介記事がございますので合わせてお読みいただけますと幸いです。 https://qiita.com/mitsui_peraichi/items/a13bee395da3281c8622 ペライチでは保
技術ブログを絞り込む

TECH PLAY でイベントをはじめよう

グループを作れば、無料で誰でもイベントページが作成できます。情報発信や交流のためのイベントをTECH PLAY で公開してみませんか?