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
260
リニューアルを行う際に やったcssのルール作り@megurocss
Kazuhiro Ebara
March 06, 2019
Tweet
Share
More Decks by Kazuhiro Ebara
See All by Kazuhiro Ebara
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
180
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
880
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
190
Other Decks in Programming
See All in Programming
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
300
Enjoy Creative Coding with Ruby (RubyKaigi2024)
chobishiba
0
1k
Slackワークフローで感謝を伝える機能/WiFi 自動接続/Figma to React Component/障害レポート君 Team3@NOT A HOTEL
nakaohiroshi
0
220
教えて!スクラムコーチ品質とスピードのバランスはどうすりゃいいの?
pinboro
0
160
The World is a Network (and We Are Just Nodes)
whatyouhide
0
100
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
520
酒飲んでたらテックリードになった話
spbaya0141
0
210
FoodGram
iseruuuuu
0
230
Exploring Type-Informed Lint Rules in Rust based TypeScript Linters
unvalley
3
650
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
1
130
TypeScript Custom GitHub Action Development Tips
peaceiris
5
860
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Scaling GitHub
holman
457
140k
Web development in the modern age
philhawksworth
203
10k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
22
1.6k
Ruby is Unlike a Banana
tanoku
96
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
The Brand Is Dead. Long Live the Brand.
mthomps
49
31k
How to name files
jennybc
65
94k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
How STYLIGHT went responsive
nonsquared
92
4.9k
4 Signs Your Business is Dying
shpigford
176
21k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました