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

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

ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話

こんにちは。ZOZOTOWN部フロントエンドチームの菊地( @hiro0218 )です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で

CSS(スタイルシート)の書き方【初心者向け】

はじめに 技術広報の yayawowo です。 今回は、 CSS について初心者向けに基本的な 書き方 を解説します。 CSS を書く上で覚えておくべきことや、基本的な書き方をまとめております。 また、直ぐに実践できるようにサンプルコードを交えながら進めていきますので是非ご活用ください。 HTMLの基本的な説明は「 HTMLで改行【brタグ・pタグ・preタグ】 」もご確認ください。 は

プロダクト開発で大事にしていること

こんにちは。宿泊事業本部 プロダクト開発部 UI/UXチーム の 岡崎です。 今回は、「個人的」に「 プロダクト開発で大事にしていること 」をテーマに話を進めます。 概要 なぜ大事にしているのか? 「ユーザーファースト」を大事にする 軽く機能を作成してフィードバックを得る 最終的なUI/UXの決定を長けている人に任せる CVRを確認する 「チームワーク」を大事にする

Core Web Vitals 改善のお話

Core Web Vitals 改善のお話 はじめに まずは計測してみる 弱点を特定する LCP の改善 無駄なリソースの読み込みを除去 http2 への切り替え 画像を適切なサイズで配信 改善したものの数値に影響がなかったもの 巨人の肩に乗る(大切) CLS の改善 CLS の算出アルゴリズムが変わったことで CLS が向上 スコアロジックにも変更あり 改善の結果 まとめ Core Web Vitals 改善のお話 はじめ

PostCSSは開発標準ツールになるのか検証しました

こんにちは、株式会社 ラク スで先行技術検証を行っている技術推進課の @t_okkan です。 技術推進課では、新サービス立ち上げ時の開発速度アップを目的に、現在 ラク スでは採用されていない新しい技術の検証を行う、技術推進プロジェクトがあります。 今回はその技術推進プロジェクトで、PostCSSについて検証を行いましたので、その結果の報告を行います。PostCSSの仕

若手エンジニアの俺がフロントエンドのビルドを早くしてReactも導入しちゃった話

またオレ何かやっちゃいました? こんにちは!!!スマートキャンプでエンジニアをしている吉永です! 自己紹介記事はこちら 前回の記事はこちら 弊社の主力サービスであるBOXILはリリースから時間が経っていることもあり、バックエンド・フロントエンドともに様々な技術的負債となる部分を抱えています。 また、その負債の中には普段の業務時間では手をつけにく

Sassの記法と種類について

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

HTMLで改行【brタグ・pタグ・preタグ】

はじめに 技術広報のyayawowoです。 Webサイトを作成する上で欠かせないのがHTMLのスキルです。 エンジニアの皆様にとっては、必ずと言っていいほど学習はされてきた方が多いのではないのでしょうか? 今回以下の方向けに、HTMLの基本からHTMLで改行する方法をご紹介したく、ブログにまとめさせていただきました。 ◆ HTMLを初めて触る方 ◆ HTMLにこれからチャレンジした

エッジコンピューティングでアクセス集中、パーソナライズ、プライバシー保護の課題を解決

エンジニアの木村です。最近は負荷対策のための リファクタリング やリアーキテクティングのリードや、データ基盤・ML・検索基盤を担当するチームのマネージャーとしてデータ関連の案件に携わっております。 先週、webinar 形式で行われた Akamai TechWeek 2021 Japan にて、6/16 に「EdgeWorkersの導入について」というテーマで、昨年末にバイマに導入したEdgeWorkersという Akamai の

React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化

はじめに 2020年新卒入社で、現在ZOZOWEB部所属の 武井 です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度は スタッフインタビュー記事 の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っ

開発者のためのプレゼンスライド OSS「Slidev」を使ってみた&中身を読んでみた

こんにちは!スマートキャンプで Web アプリケーションエンジニアとして働いている中川です。 突然ですが、みなさんは普段スライドを作っていますか? 私はそこまで頻度高くはないものの、全社イベントでプレゼンするためであったり、他部署交流のための自己紹介、あとは LT 会などのためにスライドを作ることがあります。 Twitter で見かけたこちらのツイートから、

z-index:0とz-index:100はどちらが上にくる?

はじめに 1. position: static の要素ではz-indexは効かない 2. 基本的にはHTMLの記述順に重なる 3. z-indexを指定した場合は数値の大きいものが上に重なる 4. 親子関係がある要素ではz-indexの数値に関係なく親の上に子が重なる 5. 親階層のz-indexの比較が優先して評価される おわりに はじめに こんにちは、フロントエンドチームの北嶋です。 今回は CSS 初学者がつまずきがちな、 z-in

駆け出しフロントエンドエンジニアは何を学ぶべきか

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

M1 Macを買ったのでParallels DesktopでWindowsの仮想環境を構築した話

こんにちは!!! スマートキャンプでエンジニアをしている吉永です! 得意領域はフロントエンドで、スマートキャンプではBOXILというプロダクトに主に関わってます。 自己紹介記事はこちら 早速ですが、皆さんはIEでの表示崩れ対応をしたことがありますか? フロントエンド開発をしていると同じCSSが当たっているのにChromeとSafari、IEでレンダリングされるものが変わ

デザイナーチームで1DAYスキルアップワークやってみた

ウエディングパークでデザイナーをしています。内田( @PANbooooo )です。 先月、デザイナーチームで最新のデザイン技術を学び、スキルアップや事業価値向上に向けてのフックにする「1DAYスキルアップワーク」を行いました。 今回はその内容について紹介したいと思います。 目次 1DAYスキルアップワークの内容 発表タイム 振り返り まとめ 1DAYスキルアップワークの内容
技術ブログを絞り込む

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

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