December 8, 2016

2016年「今年お世話になったCSS」5選

cording.jpg

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

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

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

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

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

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

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

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

続きを読む

October 20, 2016

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

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

実装サンプル

デモはこちら

liquid-column-px-demo.jpg

続きを読む

October 5, 2016

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

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

全体の感想

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

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

N-Workerとは

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

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

続きを読む

September 29, 2016

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

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

続きを読む

September 26, 2016

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

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

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

実装サンプル

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

liquid_sample.jpg

続きを読む

September 22, 2016

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

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

実装サンプル

デモはこちら

実装サンプルキャプチャ

続きを読む

September 10, 2016

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

September 4, 2016

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

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

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

オープニング

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

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

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

続きを読む

July 20, 2016

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

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

イベント概要・趣旨

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

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

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

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

続きを読む

June 30, 2016

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

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

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

続きを読む

May 30, 2016

フロントエンドエンジニア 心の武器@CMU#40 ✕ HTML5minutes#11

CMU#40 ✕ HTML5minutes#11の登壇資料です!
・豆腐メンタルを脱却できるオススメ心理学について
・マーケティングに役立つ心理学
のお話です。

フロントエンド関係ないじゃん!って話なのですが(笑)
スライド冒頭でふれてるように、ネガティブな考えとかをなくして建設的な思考でモノづくりがしたいなーという思いで心理学を学び始めました。
今回紹介したのはやる気や感情のコントロールというものですが、心理学はディレクションやマーケティングで使えるテクニックが満載なので、最近は仕事に活かせる方向で勉強中です。

フリーランスになってからは、Web関連だけではない広いジャンルの本を読むようになりました。
関係のなさそうな知識からも、日々の仕事にも繋がることが多くあり楽しいです。

March 16, 2016

開業 1周年

3月16日が開業日でして、開業から1周年となりました。
お世話になっている皆さん、本当にいつもありがとうございます。

やっぱり事業を始めるときには、色々な不安もありましたが、やってみると多くの繋がり・暖かさに助けられ、危なげなく一年を終えることができました。

常に自分の仕事は「人」が大事だと思っています。
クライアントさん、一緒に制作をするチームメンバー、サイトを使ってもらうユーザー、
躓いたり苦しい時にも、自分の仕事に関わる「人」を思いやることを忘れずに、これからも頑張ります!

次の一年も新しいことにチャレンジして、できることを増やして、
色んな種類のお仕事、色んな方とのお仕事ができればいいなー!と思います。

今後ともよろしくお願いいたします。
お仕事のご相談はこちらまで
erina@skyguild.jp

January 26, 2016

Google アナリティクスのスパムには、フィルタとセグメントの合わせ技で立ち向かえ

Googleアナリティクスの『スパム』が昨年ごろから流行しているのをご存知でしょうか?
参照元やキーワードなどに様々なデータを残し、不審なサイトへのアクセスを誘導する迷惑行為です。
多くのサイトでフィルタによる除外が紹介されていますが、フィルタの課題点に触れつつ、セグメントを組み合わせた対処法をご紹介していきます。

続きを読む

January 24, 2016

Git初心者・中級者へ捧げるGitを学ぶためのまとめ

私がGitと出会ったのはまだ専門学生の頃でした(2010年ごろ)。
「バージョン管理システム」って言葉すら知らなかった状態でGitから手を出したのですが、当時思ったのは「いくら調べても初心者が学べるGitの情報が少ない」ということです。
しかし、最近は随分Gitが人気になって情報も増えてきたように感じます。それでいてまだまだ需要の多いGitですので、勉強サイトやツール等をまとめてみたいと思います。

続きを読む

January 16, 2016

ディレクタ兼エンジニアの仕事@Creators MeetUp #36

第36回 Creators MeetUpの登壇資料です!
・エンジニアがディレクタを兼務すればプロジェクトはスムーズになるのか?
・それぞれの立場の人が、お互いのプロセスに理解を示せば、世界は優しくなれる
というお話です。

デザイナーさんにお願いするときにも、「実現したいこと」ベースになるように気をつけてます。
結局大事なポイントは、どの職種でも似てるのかもしれませんね。今度続編やろうと思います。

January 10, 2016

渋谷もくもく会 - 多業種 交流会 -

隔月くらいの頻度で渋谷もくもく会というのをやっています。
渋谷もくもく会
https://www.facebook.com/groups/1567847940098157/

渋谷もくもく会は、いろんな職種の人がただ渋谷に集まって、自分の作業したり、一緒に何か作ったり、交流を楽しんだりする会です。
普段出会わないような異業界・異業種の人との一期一会で何か素敵な化学反応が起きればいいなという想いでやっています。

勉強会・交流会というとちょっと敷居が高いと感じてる方にも、この集まりはとにかく気負わず気軽にゆるーく参加してもらいたいです。少しでも新しい発見や感動があるように、交流しやすい工夫など毎回検討してます。

ぜひ、Facebookグループへご参加くださいませ
渋谷もくもく会
https://www.facebook.com/groups/1567847940098157/

June 20, 2015

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

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

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

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

April 18, 2015

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

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

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

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

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

February 21, 2015

オープンソースプロジェクトのはじめかた@Creators MeetUp #25

第25回 Creators MeetUpの登壇資料です!
私が運営するSetucoCMSというオープンソースCMSのプロジェクトを例に、「オープンソース」の思想で「クリエイティブ」を楽しもう!
というお話です。

オープンソースってエンジニアには馴染み深い言葉ですが、世界中で情報を共有しあって高め合っていこう!みたいな思想は全てのクリエイティブでも取り入れられる考え方だなーと思うんです。

SetucoCMSのプロジェクトでは、グッズのデザインや設計資料などから、メールのやり取りも全て公開しています。
その方が色んな方との繋がりが増えたり、フィードバックがもらえたり、自分の軌跡を残しやすかったり色々楽しいよ!ということが言いたかったんです。はい。

January 29, 2015

SKYGUILDについて

はじめまして、武井絵利菜@skyguildと申します!

Web制作会社2社で5年間、Web制作・ディレクションに携わってきました。
2015年4月よりフリーランスとして開業しました。どうぞよろしくお願いします。

業務内容

フロントエンド実装では、単体のランディングページから大規模サイトまでお受けします。
CMS構築を得意としており、MovableType、WordPress、Tumblrなどご要望に応じて対応します!

その他、企画提案・アクセス解析・仕様設計・ドキュメント制作からバックエンドの実装まで広く扱ってます。
コーディングガイドライン、仕様書、マニュアルなど各種ドキュメント制作もご相談くださいませ。

プロフィール

フロントエンドエンジニアを主軸に、プログラマー、Webディレクターを兼務。
「プロジェクトの隙間を埋める」をモットーに、担当範囲を細かく制限するのではなく、プロジェクトの条件や状況に応じて柔軟に幅広く立ち回ります。
CMS構築が好きで、自作のSetucoCMSというオープンソースCMSを公開し、開発プロジェクトを運営していました。

お問い合わせ

価格や制作実績などお気軽にお問い合わせください。
erina@skyguild.jp