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
87
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
490
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
530
Other Decks in Programming
See All in Programming
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
Kiroで始めるAI-DLC
kaonash
2
630
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
アセットのコンパイルについて
ojun9
0
130
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
130
Reading Rails 1.0 Source Code
okuramasafumi
0
260
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
320
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
Deep Dive into Kotlin Flow
jmatsu
1
380
Updates on MLS on Ruby (and maybe more)
sylph01
1
190
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Code Review Best Practice
trishagee
71
19k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Bash Introduction
62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Rails Girls Zürich Keynote
gr2m
95
14k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました