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
ドラゴンボールから学ぶ自己成長するための秘策
ebarakazuhiro
1
20
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
260
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
970
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
260
Other Decks in Programming
See All in Programming
最近追加した型の紹介とその振り返り
aki19035vc
0
170
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Advanced App Shrinking Techniques
cbeyls
2
150
CSC307 Lecture 07
javiergs
PRO
0
220
CSC307 Lecture 10
javiergs
PRO
0
310
The rollercoaster of releasing an Android, iOS, and macOS app with Kotlin Multiplatform | droidcon Berlin
prof18
0
110
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
日付と正規化
megmogmog1965
0
140
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
307
41k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Rails Girls Zürich Keynote
gr2m
93
13k
Code Review Best Practice
trishagee
58
16k
Speed Design
sergeychernyshev
9
270
Clear Off the Table
cherdarchuk
89
320k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
[RailsConf 2023] Rails as a piece of cake
palkan
35
4.4k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
A better future with KSS
kneath
231
17k
Agile that works and the tools we love
rasmusluckow
325
20k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました