株式会社まめぞうデザイン

ドウゾノセイヤ

ドウゾノセイヤ

愛おしいほどに
CSS/Sassの設計のお話

2017.03.26

CSS / Sass / コーディング

複数のデバイスがあるってこと

そうなんです。
困ったことなのか、ええことなのか。
世の中が便利になったことによってWEBを閲覧したり、Excelを触ったり、メールを送ったりするのにいろんなデバイスで更新することができるようになりました。

・パソコン
・タブレット
・スマートフォン
・プレステ
・Wii
・DS


などなど。

そもそも、WEBサイトというのはHTMLという文書構造をCSSという言語で装飾することによって作られます。
それ以外にもいろんな言語が混ざりあっていろんな動きや動的なアクションを起こすことによって閲覧することができます。

HTMLとはハイパー・テキスト・マークアップ・ランゲージと言いまして、説明すると

H→ものっすごい
T→文章を
M→記述する
L→言語

で、その頭文字でHTMLです。

CSSとはカスケーディング・スタイル・シートと言いまして、説明すると

C→階段状に連続する滝の
S→やり方の
S→シート

です。
なんのこっちゃですが、まぁものっすごい文書の記述を装飾するんですよ。

そんな中で書く人それぞれいろんなクセやいろんな設計で効率よく記述しています。

そう。僕も書けるんです

ええ。
僕は、デザイナーでもありフロントエンドエンジニアとしてもやっております。

そもそも両方できないとWEBサイトというのは完成しません。
WEBデザインだけできてもコードがわからないと構築することはできません。
逆に、コードだけがわかってても、デザインをどうすればいいのかわからないのです。

友だちのいない僕は、頼める人がいなかったので自ずと両方できるようになりました。

やかましわっ(⌒▽⌒)

さて、話を進めますと
サイトの装飾、CSSは基本的に決まったルールはあるのですがその書き方は人それぞれクセがあったりします。
また、効率よく書く方法も人それぞれです。

僕は人のサイトを参考にしたり情報を参考に勉強しています。
が、日々効率よく書く方法やもっとこうなるんじゃないかなども模索しています。

その中でもCSSをもっと簡単に書く方法としてSassというのがあります。

細かいことは、省きますがCSSをもっと効率よく書くための他の言語って感じです。
Sassについては、どっかで調べてください。

僕的最近の流行りの効率よく書く方法

root
index.html
  /css
    styles.scss
    reset.css
    /sass
      _mixin.scss
      _common.scss
      _header.scss
      _index.scss
      _footer.scss

最近は、この構造で作ってます。

styles.scss内では、こんな感じでimport

styles.scss
@charset "utf-8";
@import "reset.css";
@import "sass/_mixin";
@import "sass/_common";
@import "sass/_header";
@import "sass/_index";
@import "sass/_footer";
_header.scss
// main: ../styles.scss
@import "_mixin";
header{
   h1{
     width: 100%;
   }
}

親ファイルのみのコンパイルはATOMのパッケージでサクッと

HTMLでフルスクラッチで記述するときはgulpを使うことが多いですが、gulpを用意するのがめんどうなときやWordPress内で構築する際は僕はそのままATOM内でコンパイルさせます。

Sass Autocompileのパッケージを使うことで親のsassファイルのみをコンパイルすることができます。

_header.scss
// main: ../styles.scss

ここがstyle.scssの親ファイルです。

_header.scss
@import "_mixin";

mixinは極力複雑にはしない

このような形でmixin系をまとめてます。
ちなみに、僕のmixinはそこまでちゃんと作ってないです。
理由は、複雑にしないことで社内共有の工数を下げるためです。

_mixin.scss
$sp: "only screen and (max-width:640px)";
$tb: "only screen and (min-width:641px) and (max-width:779px)";
$pc: "only screen and (min-width:780px)";

@mixin opacity($opacity){
  opacity: $opacity;
  $opacityIE: $opacity * 100;
  filter: alpha(opacity=$opacityIE);
}
@mixin transition{
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

@mixin translate{
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

@mixin smoothing{
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
}

サイト内で1回くらいしか使わないものに対しては、mixinはしないです。

メディア切り替えのmixinでこりゃ楽やってやつは

サクッとレスポンシブでmediaを切り替えるのにクソ楽やなと思ったのはこれですね。

_mixin.scss
$sp: "only screen and (max-width:640px)";
$tb: "only screen and (min-width:641px) and (max-width:779px)";
$pc: "only screen and (min-width:780px)";
_header.scss
header{
  @media #{$pc}{
    h1{
      width: 100%;
    }
  }
  @media #{$tb}{
    h1{
      width: 80%;
    }
  }
  @media #{$sp}{
    h1{
      width: 50%;
    }
  }
}

まとめ

最後までお読みいただき、ありがとうございました。
まぁ備忘録みたいな、自分的まとめにはなってますがもっと楽な方法はあると思います。

日々、精進。
大名行列連ねてかっこよくなりたいですね。

以上、ドウゾノセイヤでしたー。

あんにゅい♡

RELATED