skillup

技術ブログ

デザイン

実務でCSSを書く時のポイントについて

投稿日:2017年11月8日 更新日:

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。

いきなりかかずにまず共通部分をみつける

まあ、以前のまとめにも書いたんですが、あまり深く考えずにだーっと書いてしまうと、あとで手直しや出戻りがかなり多発します。

プログラムと同じように共通化する部分をまず見つけて、あとは呼び出すだけにしたほうがよさげ。

以前この記事で書いたんですけどね・・実務で納期が短くて焦ると忘れがち。

見た目の調整には紙に印刷して横においておく

モニタを占有するものが1つなくなるだけでだいぶ作業効率が変わります。またいちいちモニタで確認しないといけないとなると大変です。印刷しておけば他のウィンドウを起動せずにすぐに確認できます。

色や幅、フォントサイズ、頻出処理など共通化できるものは別管理する

プログラムでいうと定数や環境変数をまず設定ファイルで管理する考え方に近いです。また頻出処理に関してもまとめておきましょう。

こうするとページごとに見た目が違う・・ということを防げます。

できるだけクラスに対してCSSをつける

これも以前の記事で書いてましたが、焦るとhtml要素に書くことが多いんですよね。めんどいので。そうするとグローバルスコープになってしまって意図していないところに影響がでてしまうことが多いです。

idだと別の部分で使おうと思ったときに使えないです。

わかっていたけどいざ苦しまないと実感しないですね。

できるだけCSSをわける

これはあるHTMLに付与したい属性があったとして、1つのCSSで書くのではなく、共通化できそうなところやグループが違いそうなものはできるだけ分けたほうがよいということです。

無理やりわける必要はありませんが、だいたい複数の属性を付ける場合、複数のCSSに分けたほうが楽になります。

そのほうが保守性が向上しますし、あとあと変更が楽です。

1つのCSSの記述をなるべく減らす

これは新たな発見かも。複数の性質を付けたい場合はなるべく1つのcssを小さくして、1つのhtmlに対して複数のCSSを付けるようにすると、変更が楽です。

1つのCSSが巨大だと打消しが増えたり、融通が利かないことが非常に多いです。

1つのCSSはネストを深くしない

これも以前書いてましたが、3~4以上のネストされたCSSになると単純にみにくくなったり、他の部分でわからなくなることが頻発します。なるべく1つのクラスで済むようにしましょう。

見た目と構造はなるべくわける

ボタンとかは決まった構造のものがあると思いますが、色とかは当然バラバラかと思いますので、分けましょう。

幅は固定でいくのか、%でいくのか

スマホなら細かいところ以外はほぼ%で決定です。PCは幅固定のものがやはり多いでしょう。

頻出のCSSのパターンについて理解しておく

実際のCSS自体の理解に関してよくでるもの&個人的に理解が薄いとおもったものを。

  • displayの扱い。block,inline,inline-block,table(-cell)
  • 中央ぞろえ(左右と上下ともに)
  • 画像の扱い方(基本的にサイズが可変なものが多いので注意。比率は固定なのか、それとも領域いっぱいとるのか。どのように伸縮させるか。またbackgroundでの扱いなどcontainやcoverの違いなど)
  • ワンポイント画像(※リンク内でアクセント的につけるものや文字のすぐ後にくるもの)の使い方
  • 疑似要素:afterや:beforeの使い方に関して

個人的にはやりこめばやりこむほどプログラムとほぼ一緒だなと思いました。プログラマにはなれればやりやすいと思います。

 

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

スマホサイトの横ぐらつき ~border-size:border-boxigについて

スマホサイトをつくっていたところ、横幅がぐらつくというあり得ない事態に・・・ どうやら内部の幅が100%を超えるときにこの現象が起きてしまうようです。 Contents1 対策1 コンテンツの幅が10 …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …