2016年「今年お世話になったCSS」5選 〜 transition、calc()関数、:nth-childセレクタ など〜

今年お世話になったCSS Advent Calendar 2016 – Adventar」の記事です。
残念ながら前3日開いてしまってるので、5記事目になります。
後ろも空いてるので、誰か今からでもぜひ登録してください!

今年お世話になったCSSは・・・

最近のバージョンのIEで使えるようになったやつ

もちろんIE以外にも各主要ブラウザ(基本 最新版)で使えることが前提ですが、やはり影響が大きいのはIEの対応状況です。

フリーランスで受託のコーディングをしているのですが、
今年はほとんどが「IE10以上の対応」でした。
去年は「IE9以上」が多く、「IE8」の対応もありました。
ここ半年は「IE11以上」の案件もちらほらあるので、来年はもう「IE11、Microsoft Edge対応」だけになるのではないかと(密かに願ってます)

※当然、案件の事情によって様々かと思います。あくまで私が対応した中での実感です。

リキッド対応・CSSアニメーションで役立つやつ

レスポンシブの案件は去年から多かったのですが、今年はPCでもサイズ別にレイアウトを変えるようなリキッドレイアウトの対応が多かったです。
また、CSSアニメーションでアイコンやパネルの形を変化させるような、やや複雑なアニメーションの機会が増えました。

続きを読む

リキッドレイアウトでカラム間の余白だけ固定pxにする方法

リキッドレイアウト小ネタです。
サイト上で必ず出てくる横並びのレイアウトですが、ブラウザ幅に合わせて伸縮させつつも、カラム間の余白は大きくなりすぎると困る!ということで固定pxで指定したいことがあります。
横幅を%指定しつつ、余白をpx指定するサンプルです。border-boxとpaddingを使うのがポイントです。

実装サンプル

デモはこちら

続きを読む

番組収録×イベント!新しいフリーランス「N-Worker」の働き方 に参加しました

番組収録×イベント!新しいフリーランス「N-Worker」の働き方というイベントに参加してきました。
ところどころ箇条書きながらレポートを書きます。

全体の感想

笑いある明るく楽しい雰囲気の会でした。
参加者は、フリーランスの方が半分・フリーランスになりたい方が半分という感じみたいです。女性が多かったです(珍しい)

「フリーランスという生き方を広げていくためのコミュニティを作っていきたい」
という趣旨とのことで、すごく自分のやっていきたいことと近いところがあり、興味深かったです。

N-Workerとは

自分で新しい事業を作ったり、これまでのフリーランスとは違う感じの人に名称をつけようと思い、その特徴を表す以下の頭文字から命名したそうです。

・Natural(自然体:仕事と人生を分けない)
 → 余裕を持って仕事をしている 等
・Neutral(中立的:組織に属さない)
 → フラットな関係で仕事をしている(上下関係がない 等
・Nomadic(遊牧的:時間と場所に縛られない)
・Newtype(新型の:次世代型フリーランス)
 → 新しい価値観を提供
 → 自分だけの肩書を持っている

続きを読む

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/」に書いてもらいました。
めちゃくちゃ素敵なイラストに感謝です!

続きを読む

9/3(土)フリーランスミートアップ を主催します

こんにちは、武井です。
この度2016年9月3日(土)に「フリーランスミートアップ」というイベントを主催します。

イベント概要・趣旨

「フリーランスの今とこれからの働き方を考える交流会」

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

フリーランスとして働く中で、問題に直面した時、
お互いに得意・不得意を埋めあって助け合う
同僚のような存在になれたら、そんな繋がりを広げていけたら、
皆さんの仕事の可能性がもっと広がるのではないかと考え、
このイベントを企画しました。

交流がメインの緩やかな会なので、お気軽にご参加下さい♪
「フリーランスミートアップ」
http://connpass.com/event/34460/

続きを読む

【ヒカ☆ラボ】JavaScriptの情報交換LT会 に参加しました

こんにちは、武井です。久しぶりにイベントレポです。
【ヒカ☆ラボ】JavaScriptの情報交換LT会~React/Redux,Node.js,アニメーション,Processing等々~
に参加してきました。

テーマがテーマなだけに、フロントエンド界隈でよくお見かけする方々が多くいらっしゃいました。
全体を通して、LT大会と思えないほど濃くて充実した内容でした。
メモや気になったことなど。

続きを読む