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
86
VSCodeの拡張機能開発で Tailwind CSSを使う
ebarakazuhiro
2
480
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
1.1k
VSCode上からSlackにメッセージを送る拡張機能を作っている話
ebarakazuhiro
0
520
Other Decks in Programming
See All in Programming
生成AI、実際どう? - ニーリーの場合
nealle
0
110
JetBrainsのAI機能の紹介 #jjug
yusuke
0
200
コンテキストエンジニアリングで変わるAI活用 リファクタリングワークフローの実践から学んだ形式知
leveragestech
0
100
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
170
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
240
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
370
What's new in Adaptive Android development
fornewid
0
140
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.1k
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
280
Introduction to Git & GitHub
latte72
0
110
画像コンペでのベースラインモデルの育て方
tattaka
3
1.7k
バイブコーディング × 設計思考
nogu66
0
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Applications with DynamoDB
mza
96
6.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Scaling GitHub
holman
462
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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書ける)に修正点を上げても らい、レビュー書いを行う
ご静聴ありがとうございました