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
84
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
470
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
520
Other Decks in Programming
See All in Programming
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
4.7k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
490
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
CDK引数設計道場100本ノック
badmintoncryer
2
600
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.6k
GPUを計算資源として使おう!
primenumber
1
300
構文解析器入門
ydah
7
1.9k
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
230
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Documentation Writing (for coders)
carmenintech
72
4.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
BBQ
matthewcrist
89
9.8k
Thoughts on Productivity
jonyablonski
69
4.8k
RailsConf 2023
tenderlove
30
1.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Adaptive Systems
keathley
43
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Raft: Consensus for Rubyists
vanstee
140
7k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました