こんにちは。sitoです。 10月15日に、Adobeの「Typekit」が「Adobe Fonts」に名称変更すると発表がありました。 それに伴い、複雑だったこれまでの利用制限が撤廃され、ライセンスも非常にシンプルになりました。 今回は、「Typekit」からの変更点を確認しつつ、新しくなった「Adobe Fonts」を使ってみようと思います。 変更点 フォントの同期制限の撤廃 ◆Typekit 同期できるフォント数に制限があり、その上限がプランによって異なる ↓ ◆Adobe Fonts すべてのCreative Cloudプランで、すべてのフォントが利用できる（Creative Cloudプランの料金にすべてが含まれるようになった） ※AdobeIDがあれば、フォントの基本セットは無償で利用可能。 Webフォントにおけるページビュー制限とドメイン制限の撤廃 ◆Typekit 月間ペー

こんにちは、ishidaです。 2年前に半年かけておとした体重が見事にもとに戻りました。 新陳代謝がきっとすげー落ちているんだよ。そうなんだよ。はい。 今回はnpmの紹介です。 開発時と本番時で処理を変更したくなったことはありませんか？ このパッケージではgulpにて開発時と本番時のタスクを簡単に切り分けられます。 本番時 本番時にJSファイルをminifyしてみましょう。 var gulp = require('gulp'); var mode = require('gulp-mode')({ modes: ["production", "development"], default: "development", verbose: false }); var uglify = require('gulp-uglify'); gulp.task('default', function()

ETCマイレージサービスで、ポイントの自動交換を設定していた・・・はずなのにできてなかった！！！と思ったら、カード情報を２年ほど更新し忘れていて、900ポイントほど失効させていた kouraku です。おはこんばんちは。 さてさて今回は、久しぶりに Vue.js を触ろうかと思います。 コーディングするとき、諸々作業しやすくするために、各ページのリンクを貼って対象ページへ簡単に飛べるよう、ファイルリストのHTMLを作っています。 一方、進捗管理・チェック用としてまた別に、Googleスプレッドシート（以下スプレッドシート）でもファイルリストを作ったりしています。 ん・・・？なんだかちょっと無駄があるような気がしませんか？ スプレッドシートでファイルリストを作って、 その内容をHTML側でも表示できるようになれば良いんじゃない？ それができれば、確実に同期できるし、修正もスプレッドシートのみ

酔っ払ってガチャを回すと当たることがよくあるgamiです。 さて、最近は写真や映像を大きく使ってるサイトをよく見かけますがイラストもいいぞ。というわけでイラストが楽しいサイトを厳選しました。チェケラ！ おかもと歯科 歯科に限らず医院系のサイトは清潔感のある院内写真や診察風景などを載せます。 このサイトではコーラルピンクを基調とした口のイラストのアニメーションで優しさ、親しみやすさが感じられます。ロゴがかわいい。 FESSIダンススクール ダンスの写真・映像は映えます。ドカンと乗せれば画面も持ちますしインパクトがあります。 しかし優しいイラストのアニメーションを用いることで暖かさが感じられとっつきやすさも出てくるのではないでしょうか？ もう片方もマウスオンで動きますのでぜひサイトにてチェックしてみてください。 イベントスタジオ イベントと一言いっても音楽フェスや展覧会、トークセッションなど幅

GW繋げた方も繋げてない方も年度末の疲れ、解消できたでしょうか？ yanagimachiは毎年恒例の地元の友人とその子供たちとのピクニックや大好きな蕎麦屋に行けて最高のGWでした。 さて、今回は「【MT東京−46】GDPR（EU一般データ保護規則）についてWeb制作会社の人が知っておくといいこと」に参加して、「これは対応はもとより基礎知識をつけねば！！」と思い立って、MT東京で紹介してもらった資料や自分で調べたものをもとに、GDPRについて我々制作会社がとりあえず知っておいたほうが良さそうなことをまとめてみました。 なお、まとめただけですので、詳しくは資料を確認したり、ヨーロッパに詳しい弁護士さんにご相談ください。 ちなみにクライアントに丸投げされたら？ 法律の専門家ではない制作会社がやれることは少ないので、ヨーロッパに詳しい弁護士さんなどをご紹介するのが関の山かと思います。 yanagi

こんにちは。 今更ながら、朝スムージー始めました。mackyです。どうせすりつぶされて少なくなるんだろうと思い、目分量でいろいろ突っ込んでみた結果、 5人前くらいできてしまいました。…野菜ってすごい。 さて今日は、気分転換もかねてcssだけでつくったアイコンがいろいろ紹介されているサイトを集めてみました。 One div - The single element HTML/CSS icon database One div - The single element HTML/CSS icon database アイコンの数はそこまで多くないですが、必要最低限の情報がシンプルに整理されているUIで使いやすいなと思います。 使いたいアイコンのソースコードをzipファイルでダウンロードできるのもうれしいです。 また、表示可能なブラウザをマウスオーバーで表示してくれるのも特徴。 CSS3 Mono

花粉症が今年はクッソ辛いyanagimachiです。 「スギ花粉症の根本治癒を目的とした次世代型ワクチン」が臨床試験に入るニュースを見たので、実用化されたらとりあえずスギの花粉症だけでも早めにどうにかしたいところです。 さて、先日PCでtableが横スクロールする案件がありました。 とはいえ、サイトの幅が広いとかモジュール化によって中身が足りないtableだってあるわけで、そういう時はなんかうまく幅の指定が動かない時があります。 今までスマホの時は幅が狭かったり、中身が多かったりで大丈夫だったのに、PCだとうまくいかない時のTIPをご紹介します。 HTMLは以下のようなものとします。 <div class="mod-tbl"> <table> //中身 </table> </div><!-- /.mod-tbl --> いままでの実装 tableを囲む.mod-tblに スクロールのove

痩せないとコートが入らないことに気づいたfukasawaです。こんにちは。 冬が来る前に痩せないと凍死してしまいます。 jQuery Migrate pluginは、jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。「jQueryのバージョンを上げたら動かなくなった…！」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。 個人的に使った事が無かったので、使い方について簡単に調べてみました。 jQuery Migrate できること ① 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する 開発版（Development version）のjQuery Migrateを使用する jQueryのversion 1.6.4以降を使用していること ② 廃止され

もうすぐハロウィン。アラフォーにもなって今週末にはじめて仮装してみることにしました ishida です。 はじめてのことで、何に仮装すれば迷いまくっています。 さて、今回は、テンプレートエンジン「Nunjucks」についてご紹介です。 Nunjucks とは FireFoxブラウザでおなじみmozilla謹製のJavaScriptテンプレートエンジンです。 Pythonテンプレートエンジン Jinja2 に影響を受けて、誕生しました。 githubでのstar数は、4660（2017/10/26現在）です。 Nunjucks 特徴 node.js で動作 マクロ定義 オートエスケープ リッチブロックの継承 extends によるテンプレート継承 block によるエリアの継承 include による外部ファイル読み込み などです。 記述サンプル 以下が、Nunjucksのコードサンプルです

引っ越ししたオフィスでは外食してランチを充実させよう！と決意したのに、暑いからとついつい一階のナチュラルローソンや最寄り駅との間にあるローソンに頼ってしまうyanagimachiです。関内のオススメランチの場所があったら教えてください！ さて、フロントエンドエンジニアの間でちょっとgridを使ってみよう、ということになったのですがIE（IE11とIE10）の対応やいつものgulpの環境だと色々大変だったので、メモしておこうと思います。 gridって何さ？ gridって何だろう？と調べてみたところ、MDNのグリッドレイアウトがわかりやすかったです。 行と列で要素を配置することのできるレイアウト配置ができるということで、テーブルレイアウトをHTML構造が正しい要素でできるようになったと考えればいいかと思います。gridという名前から、当初flexと変わらないのでは？と思ったのですが、縦も横も指

夏の暑さに負けてポケモンGOが滞っているyanagimachiです。 運動不足なので、毎日1匹孵化させるのを目標にがんばって歩こうと思います。 さてさて、正規表現といえばバックエンドの人たちがバリバリフォームとかで使っているイメージだと思います。 私も普段はバックエンドのfujiharaさんに書いてもらえばいいや・・・と思っています。 でもたまーに大量修正するの大変だからフロントエンドでも使いたいなという場面があると思います。 初回はbackground-size編です！ ショートハンドでbackground-sizeを書いちゃった でも、対象ブラウザにAndroid4系デフォルトブラウザが入っていたなんてときは、別々に記述する必要がありますよね。 正規表現で書き換えちゃいましょう！ 置換したいCSS background: url(/img/bg.png) 50% top /100px

皆さんこんにちはfujiharaです。 ナツいですね。庭の手入れのためにチェーンソーを買って作業をしたところ、 早くも夏バテをくらいました。 本日は読み込んだFacebookページプラグインの横幅を動的に切り替える方法を 紹介します。 Facebookページプラグイン Facebookページプラグインをページに読み込む場合には ページプラグイン ページに行き表示したい FacebookページのURLを入力しコードを取得するボタンを押すと取得できます。 仕様 コードを取得するボタンを押すとJavascript SDKとIFrame版のコードが取得できます。 2016年6月現在の仕様ですと表示できる横幅は最小で180、最大で500となっています。(デフォルト340) この横幅については初期表示時に値が決まるとその後は変更されることはありません。 なので、動的に切り替えたい場合は再度読み込むとい

もういくつ寝るとワールドカップですね。こんにちはLatinです。 さて、スマホサイト制作では CSS3プロパティが特に威力を発揮し、非常に便利ですよね。 そんな CSS3プロパティですが、今回は使った事のない「border-image」プロパティについて色々と調べてみました。 border-imageプロパティとは border-imageプロパティは、画像ボーダーについてまとめて指定する際に使用します。 border-imageプロパティでは、border-image-source、border-image-slice、border-image-width、border-image-outset、border-image-repeatの各プロパティの値を、まとめて指定することができます。省略された値はそれらの初期の値に設定されます。 画像は上下左右それぞれのボーダー用に４枚必要となるわけ

こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体

こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ

どうもfujiharaです。最近、掛け布団の量が難しい季節ですね。 皆さん体調管理には十分ご注意下さい。ちなみに私は風邪引きました。 先日、業務で先輩社員から以下のような依頼を受けました。 先輩 『アイコンを3つ並べてあるから、左から順番にクルッ、クルッ、クルッとJSで回して下さい。 rotate ってクラスを与えてあげて、animationend でイケるから～』。 私 『なるほど、画像のCSS animation 終了で次の画像にrotate クラスを与えてあげれば良いワケね』。 イメージとしては以下の画像になります。 まずはCSSを見ていきます。以下のように書かれています。 <style> .rotate { -webkit-animation: spin 0.4s ease-in-out 1; -moz-animation: spin 0.4s ease-in-out 1; ani

Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg

こんにちは、 連日の雨に身も心も萎え気味なmackyです。ビアガーデンで横浜の夜景を見ながらビールを飲むことを夢みてあと1か月はのりきろうと思う今日このごろ。 さて今日は、「レスポンシブウェブデザイン」のレイアウトの変化パターンをまとめてみました。 レスポンシブウェブデザインのレイアウトパターンまとめ。 この前、知ったのですが「レスポンシブデザイン」ではなく「レスポンシブウェブデザイン」もしくは「RWD」と略すのが正しいそうです。はい。「RWD」も口に出すと十分長いですけどね^^;私は「RWDで」といわれると、ついついMedia Queriesを思い浮かべてしまうんですが、RWDにもいくつかパターンがあるので今回調査＆まとめてみました。（ここでいうパターンとは最終的に１カラムになるまでの変化の仕方をいっています。） Column Drop Column Drop??って思う人もいるとおもう

ゴールデンウィーク中に5年ぶりにフットサルをしてまだ筋肉痛が癒えてないishidaです。社内でフットサル部を立ち上げてみましたが、参加人数が少ないので横浜近辺で一緒に球蹴りしてくれる人を募集中です。 さて今回は、JavaScriptのコーディングガイドラインを作成してくれるサービスのご紹介です。 JavaScript は HTMLやCSSよりも自由度が高いので、 ガイドライン化してコードを統一するのも手間がかかるかと思います。 また初めてガイドラインを作成する人にとっては、 JavaScriptのどこまでをルール化すればいいのかも悩む部分ではないでしょうか。 そんな時にお手軽でJavaScriptコーディングガイドラインを作成してくれるサービスがありました。 11の項目を設定するだけでJavaScriptコーディングガイドラインが作成できる jsCode http://jscode.org

今回はJavaScriptで書くファサード（Façade）パターンについて調べてみました。 ファサードはフランス語で「建築物の正面のデザイン」という意味だそうです。 なぜ使うの？ ファサードパターン自体はとてもシンプルで、いくつかの機能の「窓口」になるクラスやオブジェクトを作り、利用しやすくするパターンです。 jQueryで一番よく使うであろう $() 関数もファサードパターンの一つです。 例えば要素の見た目を変える機能を実装するとして、個別の要素を制御するオブジェクトと、窓口になるオブジェクトを用意すると以下のようなコードが考えられます。 // 色を制御するオブジェクト function colorObj() { return { changeColor: function() { console.log('色を変えます'); } } }; // フォントを制御するオブジェクト func