grid

こんにちは、Y氏です。

モンハン4Gは400時間を突破しました。
ず──っとソロで頑張っていたのですが、最近酔っぱらった勢いにまかせオンラインで複数プレイをやってみたところ、今までの苦労が嘘のように勝てる!早い!すごいよ! というわけで、もうソロとかかったるくてやってられなくなりそうですね。。あんなに苦戦したG級ティガ希少種が5分針とは…

衝撃を受けたsass“mixin”の数々 PART1

さて今回から本格的にwebの記事を書いていきます。

今までcssは普通に手書きだったんですが、半年ほど前からアミテンさんに手ほどきいただきsassで書くようになったらもうね、今までの苦労が嘘のように劇的に便利!早い!すごいよ! というわけで、何回かに分けてsassのことを書こうと思います。

導入手順や記述方法は色んな先達が書いておりますので割愛し、ぶん殴られるくらいの衝撃を受けた便利mixinを紹介していきます!

サヨナラfloat。「grid.scss」

ボックスを横並びさせるときに超絶便利なmixinです。

まずは以下のサイトから一式ダウンロードします。
http://semantic.gs/

公式サイトですが、基本lessでの説明になってますので、こちらの解説は割愛。

解凍したファイルの「stylesheets/scss」ディレクトリ内「grid.scss」を使用します(他は今回は使いません)。
この「grid.scss」に超素敵mixinが書かれているわけですね。

「grid.scss」を任意のディレクトリに保存し、早速ボックスを横並びさせてみます!

と、その前に「grid.scss」を読み込ませて

 

試しに、3つのボックスを均等なwidthで横並びさせます。

はい、これで終わりです。

簡単に原理を説明しますと、

  • 親ボックス(ul) → 横幅を設定もしくは取得し(今回は取得)、それを何分割するか指定する(rowの値。今回は12)
  • 子ボックス(li) → 親ボックスの横幅分割数に対していくつ専有するかを指定する(columnの値。今回は4つ専有させたので、12割る4で3つのボックスが並ぶ)
  • 子ボックス間のマージン → デフォルトでは’20px’(変更可能)

レスポンシブ時はこんな感じで、ブラウザ幅が小さい場合はボックスを2カラムにしたり。

はい、こんな感じでいとも簡単にレスポンシブ対応の横並びボックス群が完成するわけです。
ボックス感の左右マージンも(親ボックスの横幅がきちんとpx指定されてて割り切れる数字なら)デフォルトの20px固定となります。

これって万能なの?

正直な話、万能ではないです。
レスポンシブ前提かつ、1pxを気にするようなデザインカンプを基にコーディングする場合は全く使えないです。

なぜかというとですね、内部的な話なんですがこのmixin、親ボックスの横幅がpx指定されていない場合は、ブラウザ上で見えている親ボックスの横幅pxをパーセントに変換してるみたいなのです。
前述したボックス間のデフォルトマージン’20px’もパーセントに変換されるため、1px単位での細かいデザインの表現は不可能となります。

アミテンさんと僕の共通の考え方として、レスポンシブが当たり前になっている現在、1pxにこだわることに意味あんの?というのがありますので別に気にしておりませんが、1pxのズレが気になる方※1(クライアントさんが気になる方)は使用を控えた方がいいかもしれませんね。

※1:1pxのズレについて → 場合によりますよ、もちろん。


grid.scssいかがですか?
僕はもうこれなしでは横並びしないなんて言わないよ絶対。というくらい衝撃的に便利だと思いました。

次回は、超絶便利なメディアクエリのmixin(とモンハン4Gにおける片手剣サポ)について書こうと思います!

Y氏でした!

page
1 / 1