goto_jp さんのアバター 875views

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

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

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

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

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

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

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

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

flexboxの順序を入れ替える

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

フレーム(frame)をまたいだモーダルウィンドウを出す

frameset でフレーム分割が行われているページでは frameset 自体が body のような扱いになり、 frameset の後に div タグなどを置いてもブラウザ側で無視されてしまいます。 そのためHTMLに一括で記述しておい 2015年7月21日
goto_jp さんのアバター 3,097views

Windows環境でMongoDBとGUIツールのインストール

node.js用のDBとしてMongoDBを試そうとしてやってみた。 MongoDBのインストール https://www.mongodb.org/ こちらからインストールパッケージをダウンロード。 インストーラでインストールしてもexeが 2015年7月14日
goto_jp さんのアバター 1,674views

jQuery:eachを逆順に処理する

普通のjQueryのeachの書き方は下記になる。 $(".hoge").each(function(){ //処理 }); ページ内のクラスhogeすべてに前方から順に処理をしていく。 これを最後の方から逆に処理をしたい場合は下記のように 2015年6月11日
goto_jp さんのアバター 9,869views

jQuery:現在カーソルがhoverしている要素を返す

下記で取得できる。 jQuery(":hover") カーソルがhoverしている箇所に重なっている全要素が深い順に配列で返される。 応用:特定のレイヤーの上にカーソルが存在することを判定する $(".layer").mouseout(fu 2015年6月9日
goto_jp さんのアバター 393views

HerokuにNode.jsアプリをデプロイする

基本的には下記に従うだけですが、やったことのメモ。 https://devcenter.heroku.com/articles/getting-started-with-nodejs Herokuアカウント作成 まずアカウントを作りましょう 2015年5月31日
goto_jp さんのアバター 142views

Adobe製のOSSエディタ「Brakets」のススメ

SublimeからAdobe製のOSSエディタ「Brakets」に乗り換えました。 主な機能は下記で詳しく紹介されています。 http://qiita.com/assialiholic/items/c8137321c7599a168b16 2015年5月27日
goto_jp さんのアバター 186views

Analytics:イベントトラッキングで「要素の表示数」を拾う

まずGoogleAnalyticsのイベントトラッキングの基本はコチラ。 イベント トラッキング – ウェブ トラッキング 通常であればイベントトラッキングは下記のようなHTMLタグで「要素のクリック数」を拾うためのものです。 2015年5月18日
goto_jp さんのアバター 11,374views

jQuery:動的に追加した要素の取得・操作にはready()を応用する

背景 ある要素がonLoadのタイミングでJSで生成されている その要素に対しては直接手を出せない その要素に対してonLoadのタイミングで操作を行いたい ready()関数で対応する ready()は「DOMのロードが完了されたタイミン 2015年4月13日
goto_jp さんのアバター 1,653views

Firefoxバグ:tdにposition:relativeをかけるとborderが消える

table { border-collapse: collapse; } td { position: relative; border: solid 1px #ccc; background-color: #fff; } border-c 2015年4月8日
goto_jp さんのアバター 1,525views

jQuery:Ctrl+クリックを拾う

$(function(){ $('#object').click(function(event){ if (event.ctrlKey){ alert('Ctrl + クリック!'); } } }); 以上で #object がCtrl+ク 2015年3月17日
goto_jp さんのアバター 340views

Compassの落とし穴:グラデーションにsvg出力を行わせない

CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記のように出力されます 2015年3月17日
goto_jp さんのアバター 798views

jQuery:すべてのテーブルセルにカラム番号を自動付与する

$(function(){ $("table tr").each(function() { $(this).children().each(function (i) { i = i+1; $(this).addClass("column-" 2015年3月12日
goto_jp さんのアバター 340views

正規表現:連続した空行を削除する

\n(\s*)\n|\n(\t*)\n スペースインデントでもタブインデントでもマッチします。 ただの改行に置換しましょう。 \n 2015年3月5日
goto_jp さんのアバター 226views

jQueryUI:sortableを使う

See the Pen jQuery sortable by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. ドラッグ&ドロップで並び替えできるリストです。 <ul class="sortabl 2015年3月4日
goto_jp さんのアバター 181views

SublimeText:GoTo_DefinitionでCSSクラス宣言元に飛ぶ

WebStormを使っていた時はHTML内のCSSクラス名を ctrl+左クリック でその宣言元をすぐ見ることが出来たのですが、SublimeTextでも同じことができないかと探したところ、SublimeText3の標準機能の「GoTo_D 2015年2月25日
goto_jp さんのアバター 240views

SublimeText:特定のフォルダをプロジェクトから非表示にする

※Javanizeパッケージで日本語化されてる前提の説明です。 すべてのプロジェクトで非表示にする場合 Preferences → 基本設定-ユーザ を開く。 下記のように「folder_exclude_patterns」のに非表示にするフ 2015年2月25日