Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リニューアルを行う際に やったcssのルール作り@megurocss
Search
Kazuhiro Ebara
March 06, 2019
Programming
1
300
リニューアルを行う際に やったcssのルール作り@megurocss
Kazuhiro Ebara
March 06, 2019
Tweet
Share
More Decks by Kazuhiro Ebara
See All by Kazuhiro Ebara
ドラゴンボールから学ぶ自己成長するための秘策
ebarakazuhiro
1
88
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
490
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
530
Other Decks in Programming
See All in Programming
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
チームの境界をブチ抜いていけ
tokai235
0
230
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
10
1.7k
AI Agent 時代的開發者生存指南
eddie
4
2.2k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
SODA - FACT BOOK(JP)
sodainc
1
8.9k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
950
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
120
Blazing Fast UI Development with Compose Hot Reload (Bangladesh KUG, October 2025)
zsmb
1
280
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
Developer Joy - The New Paradigm
hollycummins
1
370
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
75
5.1k
How to Ace a Technical Interview
jacobian
280
24k
How to train your dragon (web standard)
notwaldorf
97
6.3k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
Scaling GitHub
holman
463
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
It's Worth the Effort
3n
187
28k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Mobile First: as difficult as doing things right
swwweet
225
10k
Transcript
リニューアルを行う際に やったcssのルール作り
江原一博(@yakiniku040220) nana music株式会社(2017年5月入社) サーバーサイドエンジニアだけどフロント好き 最近はもっぱらフロント書いてます Vue.js core staff Vue.js/Nuxt.js/Django/Firebase
None
現在絶賛Webリニューアル中
Webリニューアルする理由
・現状のサイトがSEOにかなり弱い ・使っているPythonのサポートが今年終わる ・コードの改修が辛い
・現状のサイトがSEOにかなり弱い ・使っているPythonのサポートが今年終わる ・コードの改修が辛い
・HTML、CSSのコードが乱雑
例えばこのようなデザイン
None
赤枠は背景なので、cssでbackgroundを設定 青枠はflexboxなどで中央に配置する
でも実際は?
赤枠、青枠両方ともposition: absolute; を使っ て無理やり配置していた
まじか。。。 やべぇ。。。
・reset.cssが存在しない
そもそもreset.cssとは リセット CSS とは、 Google ChromeやSafariなど ブラウザ があらかじめ 持っているデフォルトの CSSを、リセットするための手法・設定です。
実際は?
ページごとのcssで同じような処理が書かれている ├── hoge.scss ├── hogehoge.scss ├── hogehogehoge.scss html { font-size:
16px; } body { font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', 'メイリ オ', 'MS Pゴシック', 'MS PGothic'; } .wrap { overflow: hidden; }
ほんとやべぇ。。。
なぜこのようなことが起 こっているのか?
僕が入社するまでフロント をちゃんと書ける人がいなかった。
実際にやったルール作り
・CSSのコーディングガイド作成 ・週1のレビュー会
・CSSのコーディングガイド作成 ・週1のレビュー会
Qiitaにある「CSSとSassのコーディングスタイルガ イドを作ってみた」の記事を参考に作成
・CSSのコーディングガイド作成 ・週1のレビュー会
週1でデザイナー(css書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました