goto_jp さんのアバター 11views

CSSだけでSVGをアニメーションさせる

こんにちは、ゴトーです。 最近ちょくちょくロゴにSVGアニメーションを利用しているサイトを見るので、試しにやってみたところJSライブラリなど使わず簡単にできたのでご紹介します。 「HTMLでSVGを描画する」でSVGの描画について書きました 2017年1月19日
goto_jp さんのアバター 13views

MacのEjectキーに別の挙動を割り当てる

こんにちはゴトーです。 タイピング中に delete と間違えて一番右上にある Eject キーを押すことが結構あり、さすがにストレス溜まるのでキー割り当てを変えられないか探してみたら丁度よいソフトがありました。 Karabiner 使い方 2017年1月12日
goto_jp さんのアバター 59views

HTMLでSVGを描画する

あけましておめでとうございます、ゴトーです。 子供の頃から毎年浅草寺に初詣に参拝して、屋台の甘酒を飲んで新年を感じてます。 新年一発目の投稿は、そろそろスタンダード化してほしいSVGの利用について。スマホ用画像を何個も作るとか面倒じゃないで 2017年1月6日
goto_jp さんのアバター 100views

文字詰め(カーニング)をCSS1行で設定する

日本語フォントこそ指定したい自動カーニング こちらを拝見して今まで知らなかったCSSプロパティに衝撃を受けたのでサンプルを作りました。 See the Pen font-feature-settings Test by Kazuyoshi 2016年12月1日
goto_jp さんのアバター 58views

WordPressのContactform7だけで作る簡易招待システム

下記仕様の「招待システム」をWordPressのContactform7とJavaScriptのみで実装する方法です。 フォームを送信すると自分の招待コードが発行される 招待コードとフォームURLを友達に伝え入力してもらう 招待コードを入力 2016年11月18日
goto_jp さんのアバター 20views

A-Frame入門:a-cylinder(円柱)とa-sphere(球)

「A-Frame」の<a-cylinder>について紹介します。 サンプル See the Pen A-Frame Basic : cylinder by Kazuyoshi Goto (@KazuyoshiGoto) on C 2016年11月11日
goto_jp さんのアバター 14views

【PHP】特定の月の末日を取得する

echo date('Y-m-t', strtotime("2016-11-01")); 日付フォーマットの「t」はその月の日数を返すので、必然的に末日になる。 2016年11月9日
goto_jp さんのアバター 65views

【JavaScript】MutationObserverでDOMを監視する

ボタンクリックなどユーザが自発的にするイベント以外で、「ある要素がある状態になった時」にイベントを発生させたい時、その「ある要素」を監視する必要があります。そんな時にMutationObserverを使うことで解決します。 サンプル See 2016年11月4日
goto_jp さんのアバター 100views

MS Edge で placeholderが消えてしまう問題の解決

Windows10のEdgeでフォームを確認したら、inputフィールドからplaceholderが消えてしまっていた。 同じくWin10のIE11で確認したらplaceholderがちゃんと表示されていたので、何退化しとんじゃと思って対策 2016年10月31日
goto_jp さんのアバター 36views

Facebook Messengerで送るリンク

Facebookの「いいね」や「シェア」ではなく、特定の人へMessenger形式で送るためのリンク。 AppIDが必要な点に注意。 設定については公式ドキュメントを参照してください。 なお「いいね」や「シェア」と同じく、投稿本文の内容はい 2016年10月28日
goto_jp さんのアバター 66views

A-Frame入門:a-planeとa-box

最近ハマっている、HTMLだけでVR空間を作れるライブラリ「A-Frame」について紹介します。 準備 ヘッダーでA-Frameのライブラリを読み込む必要があります。今回のサンプルは下記のCDNを使っています。 https://cdnjs. 2016年10月27日
goto_jp さんのアバター 68views

ヒラギノ角ゴが太く見える問題を解決する:その2

以前下記の内容を書きました。 ヒラギノ角ゴが太く見える問題を解決する MacOSが El Capitan 以降の人ならこれで解決しますが、それ以前の人は解決しません。 旧式の「ヒラギノ角ゴPro」が当たってしまい、SafariとChrome 2016年10月20日
goto_jp さんのアバター 38views

CSSだけで数値をカウントし表示する

サンプルはこちら。 See the Pen counter-increment test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTMLにもCSSにも数値は書いておらず、連番リスト(o 2016年10月5日
goto_jp さんのアバター 37views

iOSでtextareaの余白が大きくなる

input[type=text], input[type=password], textarea { 〜 padding: 15px; 〜 } 上記のようなCSSでフォームパーツに一括して余白を指定していたところ、PCでは問題ないがiOSだ 2016年10月4日
goto_jp さんのアバター 24views

CSS3Dの基本

See the Pen CSS3D基本 by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSだけで3D空間を作れます。 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパ 2016年9月29日
goto_jp さんのアバター 132views

CSSだけで作る万華鏡

See the Pen kaleidoscope by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 「Jade」、「Scss」表示の「VIEW COMPILED」からコンパイル後のソースを確認でき 2016年9月27日
goto_jp さんのアバター 308views

GulpでCompassのビルドとCSSの最適化&圧縮する決定版

前提 現在GulpでSassやLessやCompassを使っている人向け より最適なCSS出力をしたい人向け 下記のディレクトリ構造を仮定 project - scss - css - .csscomb.json - config.rb - 2016年9月21日
goto_jp さんのアバター 118views

ヒラギノ角ゴが太く見える問題を解決する

MacのChromeだけで妙にフォントが太く感じ、実際に font-weight:300 を指定しても500以下は無視されていたので調べたところ、下記のことが分かった font-family にこれまで「 Hiragino Kaku Got 2016年9月7日
goto_jp さんのアバター 52views

Contactform7のコンバージョンをAnalyticsで解析する

Contactform7は送信してもページ遷移せず、ボタンにonclickも含められないため、Google側が提示する方法は直接使えない。 なのでContactform7が公式に案内している下記方法を使う。 http://contactfo 2016年9月5日
goto_jp さんのアバター 70views

CSS3 : 画面サイズで相対指定できる「vh」と「vw」

まずはサンプルから。 See the Pen Full window contents by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. Box1〜3と書かれた3つの<section> 2016年8月26日
goto_jp さんのアバター 75views

flexboxの順序を入れ替える

一昔前は左右逆なレイアウトを作る時は float を使うことが多かったですが、CSS3のflexboxを使えば簡単にできます。 See the Pen CSS3 Flexbox : 左右並び替え by Kazuyoshi Goto (@Ka 2016年8月10日
goto_jp さんのアバター 312views

Vagrant環境にWordPressを簡単にインストールできる「VCCW」を試してみる

ローカル環境でWordpressを久々に作るにあたってXAMPPかMAMPで…という考えはもう古いと思ったところ、案の定VagrantでWordpress環境を作れるパッケージがあったので使ってみた。 VCCW – A Word 2016年7月14日
goto_jp さんのアバター 297views

IE11で、フレームを使ったページでFontAwesomeが表示されない時の対策

IE11に限り、フレームを使っているサイトで片側のフレームだけでFontAwesomeが表示されないことがあった。 どちらかのフレームが必ずなるわけではなく、左がなったり右がなったりする。 ググるとキャッシュの話などが出てくるが、フレームに 2016年3月29日
goto_jp さんのアバター 241views

IE11でFontAwesomeが表示されない原因

http://qiita.com/xxIN0xx/items/f6c5fdbf7696ad34a4a9 ここが最も詳しい。 サーバ側で明示的にキャッシュを取っていない場合、IE11はダメなようだ。 症状としても OS、ブラウザが同じでもPC 2016年3月29日
goto_jp さんのアバター 118views

Sassの運用を楽にするには、Sassの機能を使いすぎるな

Sassは便利ですが、いくら便利でもSass機能を無計画に濫用するとSassの運用がキツくなります。フォトショでドロップシャドウを覚えたばかりの人が濫用しまくった後のように、悲惨な結果が待ってます。 ネスト深すぎ&広すぎはやめよう。 .ho 2016年2月10日
goto_jp さんのアバター 300views

Electronのパッケージングで「Cannot create symlinks; skipping darwin platform」と出た時の対策

結論 管理者で実行したコマンドプロンプトで electron-packager を実行すれば解決する。 ※ただし後述の注意あり 経緯 Win7環境でelectron-packageを実行したら下記のようなエラーが返ってきた。 Cannot 2015年11月17日
goto_jp さんのアバター 50views

npmをバージョンアップする

npm install -g npm 2015年11月10日
goto_jp さんのアバター 241views

Compass:ベンダープレフィックスの出力制御

CSSグラデーションなど、ブラウザごとに記述が変わるものをCompassは自動サポートしてくれますが、スマホ専用Webアプリなどブラウザを考慮する必要がないケースもあります(そうでなくてもOpera対応とかぶっちゃけいらない) ムダなベンダ 2015年10月30日
goto_jp さんのアバター 203views

jQuery:外部読み込みしているJS内で自分自身のファイルパスを返す

$("script:last").prop("src"); 上記で取得できる。 何番目の <script> タグで読み込んでいようとコレを実行する時点ではそのファイル自身が最後のファイルなので $("script:last") 2015年8月3日
goto_jp さんのアバター 204views

Chromeの画像の読み込みタイミングとサイズ指定の関連性

JavaScriptの挙動がChromeだけ異なっていて悩んで解決したことのメモ。 結論から言うと… Chromeは画像の読み込みをJS実行後に行う だから img タグのwidth,heightの指定は全てきちんと設定しましょう。 Chr 2015年7月22日