Creators MeetUp #44 で登壇しました「フリーランスミートアップを開催してきた」

第44回 Creators MeetUpの登壇資料です!
フリーランスミートアップというイベントを主催したので、その中の気付きや学び。
そして、イベント主催をもっと気軽に色んな人にやってもらいたい!っていう話です。

続きを読む

みんな大好きリキッドレイアウト 〜固定幅 + リキッドレイアウトの実装〜

こんにちは、武井です。
最近リキッドレイアウト(可変レイアウトの一種)の案件が増えてきました。
リキッドレイアウトと言えば5年ほど前に流行ったような気がしますが、ブラウザ幅100%で展開するサイトはビジュアル的にもインパクトがあり、昨今でも可変レイアウトの需要は高いようです。

リキッドレイアウトは可変レイアウトの一種で、相対値(%)で幅を指定します。
閲覧環境に合わせた幅に可変できるのがメリットですが、「ナビゲーションの幅が可変すると使いづらい」など一部 固定幅にしたい時があります。
今回はそんな 「固定幅 + リキッドレイアウト」の実装方法ついてご紹介。

実装サンプル

サンプルのHTMLとCSSはこちら

続きを読む

比率がバラバラな画像の高さを固定して、余った横を見切れさせつつセンタリング

こんにちは、武井です。
何らかの記事一覧ページなどで、バラバラのサイズの画像を特定の統一サイズで並べたい時があります。
縦横比率が統一されてるなら単純に縮小すればよいのですが、縦長の画像も横長もあるときは一手間必要です。
縦のサイズを固定して、余った横は見切れさせつつセンタリングする実装のメモ (横が足りないときは横があいたままセンタリング)。

実装サンプル

デモはこちら

続きを読む

モバイルコーディングで便利な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);
}

続きを読む

フリーランスミートアップを主催しました

こんにちは、武井です。
フリーランスミートアップ」というイベントを主催してきたレポートです。

フリーランスならではでしょうか、参加者の皆さんがとても人当たりがよく積極的な方々という印象でした。
おかげさまで、大変盛り上がり良いイベントになったと思います。
ご参加された皆さんありがとうございました。

オープニング

「フリーランスの今とこれからの働き方を考える交流会」
このイベントではフリーランスの方を集めて、日頃の悩みや理想の働き方、夢などを語り合い、今後の働き方について新たな発見・気付きを得ることを目的としています。

以前から、人との繋がりから学ぶことが多く、自分も人を繋げる場作りをしたいという想いがありました。
特にフリーランスをやっていると孤独というか一人で立ち向かう感がしんどい時があるので、同じフリーランス同士でもっと同僚のような親しい存在になれたら、と思い企画しました。

イラストは、専門学校の後輩で今回スタッフで参加してくれた
「吉村玲二さん – http://yokowakemura.com/」に書いてもらいました。
めちゃくちゃ素敵なイラストに感謝です!

続きを読む