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
170
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
880
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
190
Other Decks in Programming
See All in Programming
freeeのエンジニアが 就活で出そうな コーディングテストを 解説してみる
freee
1
170
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
140
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
74k
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
14
4.5k
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
120
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
110
Long journey of Ruby standard library RubyKaigi 2024
andpad
2
210
Sheets API使ってみた
toshi0383
2
180
An adventure of Happy Eyeballs
coe401_
1
140
How to improve maintainability and readability of your automated tests? ( #scrumniigata )
teyamagu
PRO
1
130
WinActorの勉強を継続する方法
tamai_63
0
130
スタックトレース始めてみた
kuro_kurorrr
4
1.1k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
165
13k
The Cost Of JavaScript in 2023
addyosmani
21
4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Gamification - CAS2011
davidbonilla
77
4.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Side Projects
sachag
451
41k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました