サイトデザインの調整を効率的におこなう一つの答え

WEBサイトを作っていく上でそんなこと言ってはダメなのでしょうが
私はデザインが苦手です。

個人的な好みでの、サイトの見た目が「好き」「嫌い」は判断できますが
デザインが「良い」「悪い」はよくわかりません。

なので、日々デザイナーに指摘されながら調整をしております。

でも、スタイルシートを作り込んだ後に、

「あと、少し右に。」
「このページの見出しは上にアキを広く。」

などと指摘されると、調整がめんどくさいこともあるのです。

そんなめんどくさい状態が続いたときにたどり着いたある一つの答え。

「marginとpaddingを上書きすればいいだけやん。」
「コンポーネント単位でクラスを作ろうなんて単なるエゴじゃないか。」
「ソースなんて私しか興味ないはずだ…」
「100pxぐらいまで1pxずつ調整できるmarginとpaddingのクラスを作るんだ！」

神が降りてきました。

 

ということで調整用のスタイルシートを書いてみました。

CSSで書くと無駄に800行（「上下左右」×「margin、padding」×100）になるんでCSSプリプロセッサを使ってSCSSで記述してみました。

書き出すとこんな感じ

 

使い方：

Xを指定したい数値に置き換えます。

これで、「右にもっとアキを」と言われれば

「上に余白を」と言われれば

で調整可能になりました。楽ちん！

 

言い訳としてIT技術を語ります。

IT技術ってやっぱり、
めんどくさいことをどうやって簡単で便利にしていくかというのが
目的の一つなんだろうと榊原は考えています。