モバイルコーディングで便利なpxを%に計算するSass関数作った

モバイルのコーディングは、横の余白やwidthは%で指定する仕様の場合が多いです。
しかし、デザイン上で%を指定してもらえることはほとんどないので、pxサイズを元に計算することになります。

逐一計算するのも面倒なので、こんな関数にしました(SCCS)。

※ご使用は自己責任でお願いします。2016/09/09現在の内容です。

関数


// px to percent
@function px-to-per($px, $parent_width:750){
@return decimal-round( ( $px / $parent_width * 100% ) , 2);
}
// math function
//  _decimal.scss | MIT License | gist.github.com/terkel/4373420
@function decimal-round ($number, $digits: 0, $mode: round) {
$n: 1;
// $number must be a number
@if type-of($number) != number {
@warn '#{ $number } is not a number.';
@return $number;
}
// $digits must be a unitless number
@if type-of($digits) != number {
@warn '#{ $digits } is not a number.';
@return $number;
} @else if not unitless($digits) {
@warn '#{ $digits } has a unit.';
@return $number;
}
@for $i from 1 through $digits {
$n: $n * 10;
}
@if $mode == round {
@return round($number * $n) / $n;
} @else if $mode == ceil {
@return ceil($number * $n) / $n;
} @else if $mode == floor {
@return floor($number * $n) / $n;
} @else {
@warn '#{ $mode } is undefined keyword.';
@return $number;
}
}

使うとき

例) .content というdivの左右に58px相当のpaddingをつける


.content{
padding: 0 px-to-per(58);
}

続きを読む

GUIツールで送る快適な Gitライフ@Creators MeetUp #29

第29回 Creators MeetUpの登壇資料です!
・最近非エンジニアさんもGitを使うことが多くなってきた
・ネットの情報も増えてきたけど、コマンドベースだからGUI情報が少ない
・GUIで非エンジニアさんも、もっと気軽にGitに触れてほしい!
というお話です。

似たスライドですが、GitとGitHubの違いとか、鍵作成とcloneの仕方などから説明しているのもありますので合わせて参考いただければです。
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜

私はエンジニアですが、cherry-pickとかrevertとかってコマンドでやるとややこしいので、GUIツールの方が楽ちんだなーと思うので逆にコマンド使いの方にもオススメです。

Tumblrのカスタマイズで作るWebサイト〜苦戦したポイントTOP5〜@Creators MeetUp #27

第27回 Creators MeetUpの登壇資料です!
Tumblrを頑張ってカスタマイズして、SNSっぽさをなくしてWebサイトとしての使い方をしてみたよ!っていうお話。

以前、お仕事で制作させていただいた[g]ift ギフトというサイトの事例です。

Tumblrは各種CMSと違って本当にシンプルな機能しか用意されていないので、Webサイトとして使うのは大変でした。
まず投稿もシンプルなタイプしか用意されてなくてブログ記事っぽく書けなかったり、カテゴリ・サブカテゴリという概念がなくて全てタグでまかわなくてはいけなかったり。

その分、Web制作に馴染みのないお客様には、SNS投稿の感覚でサイト更新ができるのはとてもいい提案だな、と思いました。