第44回 Creators MeetUpの登壇資料です!
フリーランスミートアップというイベントを主催したので、その中の気付きや学び。
そして、イベント主催をもっと気軽に色んな人にやってもらいたい!っていう話です。
第44回 Creators MeetUpの登壇資料です!
フリーランスミートアップというイベントを主催したので、その中の気付きや学び。
そして、イベント主催をもっと気軽に色んな人にやってもらいたい!っていう話です。
こんにちは、武井です。
最近リキッドレイアウト(可変レイアウトの一種)の案件が増えてきました。
リキッドレイアウトと言えば5年ほど前に流行ったような気がしますが、ブラウザ幅100%で展開するサイトはビジュアル的にもインパクトがあり、昨今でも可変レイアウトの需要は高いようです。
リキッドレイアウトは可変レイアウトの一種で、相対値(%)で幅を指定します。
閲覧環境に合わせた幅に可変できるのがメリットですが、「ナビゲーションの幅が可変すると使いづらい」など一部 固定幅にしたい時があります。
今回はそんな 「固定幅 + リキッドレイアウト」の実装方法ついてご紹介。
モバイルのコーディングは、横の余白や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);
}
こんにちは、武井です。
「フリーランスミートアップ」というイベントを主催してきたレポートです。
フリーランスならではでしょうか、参加者の皆さんがとても人当たりがよく積極的な方々という印象でした。
おかげさまで、大変盛り上がり良いイベントになったと思います。
ご参加された皆さんありがとうございました。
「フリーランスの今とこれからの働き方を考える交流会」
このイベントではフリーランスの方を集めて、日頃の悩みや理想の働き方、夢などを語り合い、今後の働き方について新たな発見・気付きを得ることを目的としています。
以前から、人との繋がりから学ぶことが多く、自分も人を繋げる場作りをしたいという想いがありました。
特にフリーランスをやっていると孤独というか一人で立ち向かう感がしんどい時があるので、同じフリーランス同士でもっと同僚のような親しい存在になれたら、と思い企画しました。
イラストは、専門学校の後輩で今回スタッフで参加してくれた
「吉村玲二さん – http://yokowakemura.com/」に書いてもらいました。
めちゃくちゃ素敵なイラストに感謝です!