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
480
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
530
Other Decks in Programming
See All in Programming
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.2k
アセットのコンパイルについて
ojun9
0
120
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
140
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
280
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
100
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
110
時間軸から考えるTerraformを使う理由と留意点
fufuhu
15
4.6k
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
130
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
A designer walks into a library…
pauljervisheath
207
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Raft: Consensus for Rubyists
vanstee
140
7.1k
It's Worth the Effort
3n
187
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.2k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました