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
250
リニューアルを行う際に やったcssのルール作り@megurocss
Kazuhiro Ebara
March 06, 2019
Tweet
Share
More Decks by Kazuhiro Ebara
See All by Kazuhiro Ebara
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
300
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
180
Other Decks in Programming
See All in Programming
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
Designing for tomorrow's programming workflows
honnibal
PRO
2
130
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
670
ゆるい個人開発のススメ
kuroppe1819
10
990
データアナリストが行うDatabricksを活用したETLの自動化事例
shinoa
0
260
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Elm Form Validation
bkuhlmann
0
510
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
ScalarDBを用いたマイクロサービスにおけるデータ管理 (Database Engineering Meetup #2)
scalar
0
110
Milestoner
bkuhlmann
1
410
What We Can Learn From OSS
inouehi
0
420
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
290
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
44
9.7k
RailsConf 2023
tenderlove
4
540
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
260
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
For a Future-Friendly Web
brad_frost
172
9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
KATA
mclloyd
15
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Web Components: a chance to create the future
zenorocha
305
41k
The Invisible Customer
myddelton
114
12k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました