frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

nodeをアップデートしたらgulpが動かない時の対処法

nodeをアップデートしたらgulpが強制終了するようになりました。
意外と忘れそうなので備忘録用にメモします。

node-sassを使用しているのですが、node-sassはバージョンごとにインストールが必要なのでコマンドプロンプトにて下記を実行しました。


npm install gulp-sass --save-dev

こちらのみで動きました。

これで動かないときはこちらを試してみると良いそうです。

npm cache clean && node ./node_modules/node-sass/scripts/install.js

参考:https://qiita.com/rinoside/items/d9c911cc8d0c5db114c9

css3でコイントスのように水平に回転するアニメーション

読み込み時にコイントスのように水平に回転するアニメーションのcss3です。

マウスオーバー時も回転します。

<div class="coin-wrap">
 <div class="coin">
  <div class="front"><h2>コイン:表</h2></div>
  <div class="back"><h2>コイン:裏</h2></div>
 </div>
</div>
.coin-wrap .coin {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transition: all 3s ease;
}
.coin-wrap .coin div
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    backface-visibility: hidden;
}
.coin-wrap .coin .front {
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;
}
.coin-wrap .coin .back
{
    color:#000;
    background-image: linear-gradient(to top left, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03);
    border: 5px solid #EDAC06;
    border-radius: 50%;

}
.coin-wrap .coin {
    transform: rotateY( 720deg );
    animation: coin 3.5s;
    transition-timing-function: cubic-bezier(.01, -.105, .43, 1.59);
}
.coin-wrap .coin .back {
    transform: rotateY( 180deg );
}
@keyframes coin {
    0% {
        transform: rotateY( 0deg ) ;
    }
    100% {
        transform: rotateY( 1440deg ) ;
    }
}
.coin-wrap .coin:hover {
    transform: rotateY( 1440deg );
}

See the Pen QqPpBW by funclur (@funclur) on CodePen.

flexで簡単!画像を中央揃えにして横並びにする方法(キャプションあり)

画像を中央揃えにして横並びにする方法

<ul class="img-col2">
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
<li class="image">
<figure><img src="https://dummyimage.com/300x300/000/fff" alt="">
<figcaption>キャプションが入ります</figcaption></figure>
</li>
</ul>
.img-col2 {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 35px 0 -20px -20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.img-col2 figcaption {
  margin-top: 5px;
  text-align: center;
}
.img-col2 figure > img {
    width: 100%;
}

.img-col2 > li {
    width: calc(50% - 20px);
    margin: 0 0 20px 20px;
}

.img-col2 > li:nth-child(2n + 1) figure {
    display: table;
    margin: 0 0 0 auto;
}

.img-col2 > li:nth-child(2n) figure {
    display: table;
    margin: 0 auto 0 0;
}
.img-col2._left {
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.img-col2._right {
    -ms-flex-pack: end;
    justify-content: flex-end;
}
.img-col2._left > li, .img-col1-01._col2._right > li {
    width: auto;
}


原理としては、display:flexで横並びにしそれぞれをwidth:50%にしたあと左の要素にmargin-left:auto、右の要素にmargin-right:autoにして中央揃えにしています。


See the Pen GMmZWL by funclur (@funclur) on CodePen.


画像を左揃えor右揃えにして横並びにする方法

先ほどのコードに._left._rightを付与することで実現できます。

左揃え

<ul class="img-col2 _left">

右揃え

<ul class="img-col2 _right">

プライベート関数をグローバル領域から呼び出し

プライベート関数をグローバル領域から呼び出すためには、関数内でメソッドを作りオブジェクトを返せば関数を呼び出すことができます。

See the Pen OjrjVE by funclur (@funclur) on CodePen.

var func = (function(){
  function private(){
    alert()
  }
  return {
    privateFunc: private
  }
})();
func.privateFunc();

Webデザイナーのための就職・転職情報とサイトまとめ

27歳で営業からWebデザイナー→フロントエンドになり5年(2017年)が経ちました。
この記事では、Web業界に身を置いた自分が伝えられるWebデザイナーのための就職・転職情報とサイトをまとめてみました。

未経験からWebデザイナーになるためには

未経験からWebデザイナーになる人は比較的新しい職種なのでとても多いです。
自分もそうですが、周りのWebデザイナー、フロントエンジニアを見ても20代後半の年齢からWebデザイナーを始める人が多いように感じます。
そういった意味では未経験者にも門の広い業界です。
また、学歴も必要としないため求められるのは広い意味でやる気のみです。

未経験からWebデザイナーになるためには、職業訓練校や専門学校、通信教育などを受ける、または独学で学びサイト制作の実績を企業にアピールすることが必要です。

またこれも自分の経験になりますが、お近くに職業訓練校のWebデザイナーコースがあればそちらがおすすめです。

理由
  • お金がかからない(逆にもらえる)
  • 同じ境遇の仲間ができる
  • 分からないことを直接質問ができる

現在ネットにはWebデザイナーになるための技術情報が溢れかえるほどあり一人でも学べる環境は整いやすいです。
しかし、躓いた時など一人で解決するには遠回りになってしまうことも多いと思います。
独学でできる人は独学、少し自信がないけどやってみたい人は職業訓電できっかけをつかむとよいですね。

また中途で未経験だとアルバイトから始まるのが普通です。
周りの友人と比べてしまうとどうしても劣等感を感じてしまいますが、気にせず半年、1年と上司や人事や代表にアピールして社員になるために頑張りましょう。

Webデザイナーに向いてる人とは

Web業界は、慢性的に人不足が叫ばれています。ということは、需要もあるので就職しやすいですが、一人にかかる負担が大きいということです。
自分は、残業時間も多くなり大変な時もありましたが、それがスキルアップに直接繋がっていたので苦ではありませんでした。
もちろん現在働き方改革が進められ労働環境も改善され、全てのIT企業が残業が多いとは思いません。
逆に少ないことをアピールしたりそれで成り立っている企業も多いです。

ただその分勉強していかないと、ライバル、先輩、後輩に絶対負けてしまいます。
そういう意味で、公務員のような公私とも安定した生活を望んでいる人には向かないと思います。
逆にWebが好きで日々学ぶ精神があれば誰でもできるんじゃないかと思います。

職種・働き方

一口にWebといってもこの業界は、多くの肩書、職種があり混乱される方も多いと思います。
しっかり定義されているわけではないですが自分の認識としては以下です。

職種 やること
Webデザイナー デザイン、コーディング兼業もしはデザインのみ
コーダー コーディングのみ
マークアップエンジニア コーディングのみ(狭義ではhtmlのみ)
フロントエンドエンジニア コーディング、JS
プログラマー PHP、pythonなど

ここらへんは企業や人によって若干認識の違うことがあります。
自分自身何をやりたいか広く学んでから考えると良いと思います。

働き方は、企業に就職する正社員、派遣会社に登録し企業に斡旋する派遣社員、独立してフリーランスになるなど様々な形があるのも特徴の一つです。
自分に合った働き方ができるというのは大きなメリットですね。

Webデザイナーの残業は?

自分自身の経験では2社経験がありますが、多いときは100時間越え、少ないときは20時間という感じでしょうか。
前述したとおり、働き方改革によって多くの企業が残業時間を意識するようになりました。
また、小規模の企業か大手かでも変わってきます。ベンチャーなどの小規模企業は、収入が不安定な為、残業は多くなりがちです。
Web制作会社で300人を超えていたら大手と言ってよいと思いますが、そういった面では長く働けるかもしれません。

大手制作会社かベンチャー中小か

大手の就職かベンチャーの就職かは迷うところです。

大手の良い所
  • 人の流れが早いので、いろんな人と出会える
  • 教育の風土も整っている
  • 安定している
大手の悪い所
  • 年収が上がりづらい
  • 評価されづらい
  • 責任のある仕事を任せられない
ベンチャーの良い所
  • 収入が突然上がる可能性がある
  • 評価されやすい
  • やりがいのある仕事ができる
ベンチャーの悪い所
  • 収入が突然下がる可能性がある
  • 教育方針にムラがある
  • 人の出入りが少ないので人間関係の悪化

もちろん上記は、どちらも経験した自分の思うことでありその逆も往々にしてありうるので、あくまで参考にしていただければと思います。

Webデザイナーの年収は?

転職サイトでは月収や年収が載ってるサイトも多いですが大体300~500万が相場のようです。
また入社時の給与も気になりますが、昇給や賞与も是非気にしましょう。
最初はこのくらいでいいかと思って入社してから昇給がしづらいことが分かるなどは多い話です。
技術力のある方の転職では入社時の給与交渉がとても大切です。

Webデザイナーのための就職・転職サイト

Web系ITの求人は年々需要が増しており、専門の転職サイトも数が大変多くなっています。
また、1つの転職サイトのみ登録するのではなく同時に3~4社登録しておくことで幅広い企業に出会うことができます。

Web系IT専門の転職サイトの中から自分や周りからの評価が高いサイトをまとめました。

Geekly

IT・Web・ゲーム業界を専門とした転職サイトです。
株式会社ギークリー

WORKPORT

実績が多く大手案件も豊富です。
未経験からの転職ならWORKPORT

Find Job!

未経験OKな企業を豊富に扱っています。
http://www.find-job.net/

Green

大手から新進気鋭なベンチャーまで。
[Webデザイナー]
https://www.green-japan.com/

moreworks

ハイレベルな人材を求む企業が多い。
https://www.moreworks.jp/

TechClipsエージェント

ITエンジニアのための転職エージェント
ITエンジニア専門の転職エージェント【TechClipsエージェント】

開発/運用エンジニア募集プログラム

A8.netが技術スタッフを募集中

iphoneX対応サイトの実装方法・注意点まとめ html・css

近く実装案件も出てくるであろうiPhone Xの実装方法、注意点の記事をまとめました。
主に表示領域に対して処理を加えなければいけなくなりそうです。

iPhone X の Safari における Web コンテンツの表示

medium.com

<meta name="viewport" content="viewport-fit=cover">

viewport にこの値を設定することで、Safari の表示領域をフルスクリーンに設定できるようになる

constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
safe-area-inset-*が示すとおり、上述のアプリのタッチイベントを認める領域である Safe Area が Safari の表示領域のどのくらい内側に存在するかを示す値です。

iPhone Xのモックアップ素材まとめ

www.nxworld.net

毎回新しいApple製品が発表された直後から様々なところでモックアップ素材を作成して配布しているのを見かけますが、先日発表されたiPhone Xも既に多数のモックアップ素材が配布されていたので、それらの中から目に付いたものをまとめました。

coliss.com

販売予約は、10月27日からでまだ少し先ですが、一足早く、iPhone XとiOS 11を楽しめるモックアップ素材とUIデザイン素材を紹介します。

iPhone X対応におけるデザイン上の注意ポイント

iPhone X対応におけるデザイン上の注意ポイント | fladdict

画面サイズ
サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。

機能的な対応そのものはautolayoutとかちゃんとやってれば動くだろうけど、UIとしての全体整合性がそろそろ。
どうするか悩ましいけど、市場規模が読めないので、総括としては各プレイヤー最低限の対応で逃げそう。このためiPhone Xのポテンシャルを発揮できるアプリは、体力のあるビッグプレイヤーに制限されそう。

Webサイトデザインを集めたサイト総まとめ 国内・海外・LP・スマートフォン・レスポンシブデザイン

国内Webサイト

Design-trigger

f:id:funclur:20170909131902p:plain
http://alan-trigger.info/

週刊ウェブデザイン

f:id:funclur:20170907233026p:plain
http://www.dailywebdesign.com/

現代デザイン

f:id:funclur:20170909132524p:plain
http://gendaidesign.com/

MUUUUU.ORG

f:id:funclur:20170907232129p:plain
http://muuuuu.org/

後発ならではの見やすさ、使いやすさ、載って嬉しいギャラリーサイトを目指して運営している、非営利目的のWEBデザインポータルサイトです。
情報設計の参考にしやすく、現場レベルでWEBデザイナーが参考にし易いであろう、縦に長くオーソドックスなレイアウトでかつ、非常にデザインが優れたサイトを厳選して掲載しております。

ズロック

f:id:funclur:20170907232651p:plain
http://www.zzrock.net/

遊びにきてくれてありがとう!!!ズロックは日々おもしろいなっと感じた世界中のWebサイトを管理人ゴトウがまとめたWebデザインのリンク集です。

イラストブックマーク

f:id:funclur:20170909134729p:plain
http://www.illustbookmark.info/

straightline bookmark

f:id:funclur:20170907232330p:plain
http://bm.straightline.jp/

WONDER BOOKMARKS

f:id:funclur:20170907232613p:plain
http://bm.wonderboxstudio.com/

優れたWebデザインをカテゴリー、サイトカラー、サイトタイプ別にブックマークしたWebデザイナーの為のWebデザイン・リンク集です。
Web制作を生業としています私自身が普段から様々なWebサイトを参考としており、自身の学習の意味も込めてこのサイトを立ち上げました。様々な方々のWeb制作にほんの少しでもお力添えができましたらとても嬉しく思います。

I/O 3000

f:id:funclur:20170909135826p:plain
http://io3000.com/

I/O 3000は、Webデザインに関わる人のための Webデザインギャラリーサイトです。
国内外を問わず、Web制作の参考となるサイトをセレクトしています。

bookma! v3

f:id:funclur:20170909001711p:plain
https://bookma.org/

81-web.com

f:id:funclur:20170909130822p:plain
http://81-web.com/

当サイトは、Webサイト制作に役立つ優れたデザインのサイトを集めたギャラリー&リンク集です。
サイトドメインの「81-web.com」は、日本の国際電話番号「81」に由来し、国内のサイトのみピックアップし、掲載しております

S5-Style

f:id:funclur:20170907232838p:plain
http://bm.s5-style.com/

カテゴリー、タグで絞り込み。AND検索とOR検索も可能なので目的のサイトをすばやく検索できます。
お気に入りのサイトを一時的に保存。保存したサイトリストはメーラーに貼付けることもできます。表示形式や背景色をカスタム可能。
視覚的に安定して探せるグレーや、サムネイルが引き締まるブラックなど好みに合わせて変更できます。

イイネ!WEBデザイン

f:id:funclur:20170909131944p:plain
http://www.ene-design.com/

Artnoc

f:id:funclur:20170909131705p:plain
http://art-noc.com/

ARTNOC.COMは、クリエイティブなWebデザインをサイトタイプ・業種タイプ・カラータイプ・レイアウトタイプ・視覚効果といった要素で分類し、データベース化した、Webデザインのギャラリーサイトです。
ARTNOC.COMでは有名・無名に関わらず、”クリエイティブでクオリティの高いWebデザインを紹介しています。

f:id:funclur:20170909131647p:plain
http://japan.2-wg.com/

web selection

f:id:funclur:20170909130712p:plain
http://web-selection.com/

ウェブセレクションではかっこいいサイト・きれいなサイト・使いやすいサイト等々、Webデザインの際に参考になるサイトを集めてます。ホームページ制作のお供にどうぞ。

WPデザインギャラリー

f:id:funclur:20170909130652p:plain
http://wpgallery.kachibito.net/

WebDesignClip

f:id:funclur:20170909130602p:plain
http://www.webdesignclip.com/

Web Design Clipは、WEBデザイン制作において、Webデザイナー・開発の方々などのインスピレーションを刺激するような日本国内の洗練されたWebサイトや、アイデア・技術に優れたサイトをクリップしています。

Good Design Web

f:id:funclur:20170909141545p:plain
http://gooddesignweb.com/

当サイトでは、デザインされたきれいなWEBサイトを紹介していきたいと思います。ただ、僕の主観でサイト選択しますので、ちょっと偏った選択になるかもしれませんが・・・
ちなみに、僕は素人ですので、素人目線でのサイト選択ということになります。掲載しなかったからといって、そのサイトのデザインがどうこう言う訳ではありません。あくまで、好みなので・・

バンドのWebデザインリンク集

f:id:funclur:20170909134815p:plain
http://banddbm.net/

イケサイ

f:id:funclur:20170909131031p:plain
https://www.ikesai.com/

ikesai.comはWEBデザインに役立つ、いけてるサイト、かっこいいサイト、おしゃれなサイト、クールなサイトなどを勝手にピックアップして掲載しているサイトです。

レスポンシブデザイン

Responsive Web Design JP

f:id:funclur:20170909134644p:plain
http://responsive-jp.com/

スマートフォン

Web Design Clip [S]

f:id:funclur:20170907233339p:plain
http://sp.webdesignclip.com/

iPhoneデザインボックス

f:id:funclur:20170909135046p:plain
http://design.web-hon.com/

LP

Web Design Clip [L]

f:id:funclur:20170907233306p:plain
http://lp.webdesignclip.com/

ランディングページ集めました。

f:id:funclur:20170909144844p:plain
http://lp-web.com/

ランディングページデザインリンク

f:id:funclur:20170909141948p:plain
http://www.landingpage-link.jp/

LANDINGPAGE_DESIGN BOOKMARK_SMARTPHONE

f:id:funclur:20170909145727p:plain
http://smartphone-landingpage.info/

バナー

バナーデザインまとめサイト

http://バナーデザインまとめサイト.jp/

バナーデザインアーカイブ

f:id:funclur:20170909134922p:plain
http://banner.keizine.net/

レトロバナー

f:id:funclur:20170909134842p:plain
https://retrobanner.net/

バナーデザイン・サンプルデータベース

f:id:funclur:20170909132030p:plain
http://aka-iro.jp/bd/

f:id:funclur:20170909132019p:plain
http://nonamedesign.info/banner/

バナーデザインまとめ。|Banner Matome

f:id:funclur:20170909132008p:plain
http://bannermatome.com/

パーツ

Webデザインの“ブブン”を集めたブブンデザインアーカイブ

f:id:funclur:20170909134955p:plain
http://bubundesignarchive.jp/

www.frontendmemo.xyz