goto_jp さんのアバター 2,624views

Macのマウスを思いっきりチューニングした

iMacに同梱されてくるマウスが物理的にどうしても使いづらく手が疲れてしまうので、Windowsの頃から使っているマウスを繋げて使っているのですが、チューニングしたところ劇的に使いやすくなったのでメモします。 マウスのボタン設定を変える L 2014年12月26日
goto_jp さんのアバター 670views

Macでバッチ処理(シェルスクリプト)を動かす

WindowsではAipoのビルドにシェルスクリプトを使ってアイコンダブルクリックだけでビルドできるようにしていましたが、Macでも同様に行えるようにしました。 .commandファイルを作る テキストエディタで下記のようにAipoをビルド 2014年12月26日
goto_jp さんのアバター 922views

EclipseでWebのフロントエディタを整える

Mac環境になったことでEclipseを新たに入れたところ、Eclipseから.htmlファイルを開いたらブラウザで開かれたり、.cssファイルを外部テキストエディタで開いたりとデフォのひどさに泣きそうになりました。 Web開発エディタのプ 2014年12月26日
goto_jp さんのアバター 680views

Git:masterの修正内容をブランチにマージする

通常は改修単位でブランチを切り、そのブランチをmasterにマージしますが、ブランチの改修が長引いたりそのブランチも別バージョンのように並行して長期走る場合、master側の内容を反映させたい場合があります。 その場合、masterをブラン 2014年12月26日
goto_jp さんのアバター 55views

Macのディレクトリの読み方基礎

MacはWindowsのように明確なファイルアドレスを表示してくれないので最初はかなりフラストレーション溜まりましたが、基本さえ掴めばシンプルだったのでメモします。 ルートディレクトリからの構成 FinderでCommand + Shift 2014年12月25日
goto_jp さんのアバター 72views

MacでもF5リロードできるようにする

MacはそのままではブラウザのF5リロードができないので、ショートカットキー設定で変更しました。 左上リンゴボタン→システム環境設定→キーボード 「ショートカット」タブの左側「アプリケーション」を開く 右側ウィンドウ下の「+」ボタンよりを押 2014年12月24日
goto_jp さんのアバター 16views

Macのcapsキーをcommandキーに置き換える

これまでWindowsで磨り減るほどcontrolキーを使ってきた自分にはcommandキーの中途半端な位置が馴染めず、またcapsも一押しでcapslockがかかってしまい便利なのか不便なのかよく分からないので、置き換えました。 左上リン 2014年12月24日
goto_jp さんのアバター 137views

iMac移行で最初にやった環境設定

マウス設定 りんごボタン→システム環境設定→マウス 「軌跡の速さ」を速く 「スクロールの方向:ナチュラル」をOFF 「副ボタンのクリック」をON 「その他ジェスチャ」タブで「ページ間をスワイプ」をON キーボード設定 りんごボタン→システム 2014年12月24日
goto_jp さんのアバター 193views

CSS3:ローディングアイコンとCSSアニメーションの考え方

See the Pen CSS only indicator by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. こちらのローディングアイコンはCSSのみで表現しています。 明滅が回転しているように 2014年12月22日
goto_jp さんのアバター 2,609views

CSS3:CSSだけでテキストグラデーションを作る

See the Pen CSS Only text gradation by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. CSSのみでテキストグラデーションを行う例です。 CSSの中で要のプロパテ 2014年12月18日
goto_jp さんのアバター 202views

CSS3:CSSのみでのアコーディオン表現

See the Pen CSS only accordion by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 実はそんなに難しいことしてません。 <div class="layers"&g 2014年12月17日
goto_jp さんのアバター 614views

jQuery & CSS:択一ハイライトメニュー

まずこちらサンプルをごらんください。 See the Pen jQuery menu hightlight by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. クリックしたメニュー項目をハイライト表 2014年12月16日
goto_jp さんのアバター 704views

jQuery:二重配列ループ

jQueryだとeachループが簡単にできるのでメモ。(JavaScript自体はeachの概念がない) 下記例は「array1」に["りんご","ごりら","らっぱ","ぱんだ"]の項目をまず挙げ、実際のデータ配列の「array2」の中に 2014年12月15日
goto_jp さんのアバター 1,144views

jQuery:配列の重複値を弾く

var array = ['東京都','千葉県','埼玉県','千葉県','千葉県','東京都']; このような重複するデータを持つ配列の重複を弾きたい場合は下記のようにfilterを利用する。 array = array.filter(f 2014年12月12日
goto_jp さんのアバター 119views

jQuery:ページ内のクラスを指定して特定の属性値を抜き出す

<li class="className" zokusei="100"> <li class="className" zokusei="200"> <li class="className" zokusei=" 2014年12月12日
goto_jp さんのアバター 140views

GruntでCSS圧縮を行う

Gruntはすでに利用できることを前提とします。 ターミナルでプロジェクトのディレクトリを開き、GruntのCSS圧縮を行うプラグインをインストールする。 npm install grunt-contrib-cssmin --save-de 2014年12月11日
goto_jp さんのアバター 275views

AipoのCSSコーディング環境(Grunt/Sass/Compass)のおさらい

Grunt/Sass/Compassとは何なのか、どのように設定され動いているのかを社内向けにおさらいの意味で記します。 Gruntとは node.jsで動くタスクランナー(監視自動実行プログラム) できること Sass/Compassのほ 2014年12月9日
goto_jp さんのアバター 261views

vimの最低限の使い方

Macでターミナルを使うにあたってたまに必要になるvimというエディタ。 Unix/Linuxでは標準となるエディタですが、そもそもコマンドを覚えないと使うことができないので最低限必要な操作やコマンドについてメモ。 vimの開始 まずターミ 2014年12月8日
goto_jp さんのアバター 133views

自分が最初に行うMacの初期設定

新しいMacを使い始めるにあたって、自分が最初に行う設定や最低限必須としているソフトなどを紹介します。 個人の好みレベルの設定も含まれるので参考程度に! Dockの設定 りんごボタン→システム環境設定→Dock 画面上の位置を左に 自動的に 2014年12月4日
goto_jp さんのアバター 905views

MacのFinderのフォルダから直接ターミナルを開く

Windowsでは対象のフォルダ内でShift+右クリックで「コマンドウィンドウをここで開く」というメニューからターミナルを開けましたが、Macでも同様のことができます。 Mac環境設定 左上りんごボタンより「システム環境設定」 「キーボー 2014年12月2日
goto_jp さんのアバター 76views

MacOSのWebStormでGrunt環境をつくる

WebStormはインストールされており、既存プロジェクトのGruntfileを流用することを前提としています。 Homebrewのインストール パッケージ管理システム Homebrew こちらの「3. Homebrew 本体をインストール 2014年12月2日
goto_jp さんのアバター 38views

Git:新しいブランチを作ってすぐ切り替える

git checkout -b {ブランチ名} ブランチ作成は branch コマンドで、 checkout はブランチ切り替えのコマンドだが、-b を付けることで新規ブランチを作りつつ切り替えができる。 2014年12月1日
goto_jp さんのアバター 66views

Sass:変数ファイルを作って変数を活用しよう

Sassでは変数を使ってCSSプロパティの共通化を行うことができます。 例えばこんな形。 $fontSize: 14px .class1 { font-size: $fontSize; } .class2 { font-size: $fon 2014年11月28日
goto_jp さんのアバター 54views

【WebStormでSassを使おう】3:Grunt実行とSassの編集

前回まででGruntのプラグインを入れ設定まで行いました。 Gruntの実行 WebStorm画面下の「Grunt」を開いてください。 もし表示されていない場合はプロジェクトビューからGruntfile.jsを右クリックし「Open Gru 2014年11月27日
goto_jp さんのアバター 87views

【WebStormでSassを使おう】2:Gruntプラグインのインストールと設定

前回まででプロジェクトにGruntの基本パッケージをインストールしました。 下記コマンドでGrunt用プラグインをインストールします。 量が多いので多少時間がかかります。 npm install grunt-contrib --save-d 2014年11月26日
goto_jp さんのアバター 124views

【WebStormでSassを使おう】1:node.jsとGruntの準備

現状自分のマスト環境になっているWebStormでのSassの利用についてまとめます。 まずはnode.jsとGruntの準備から。 Sassはこれらを使って動くためです。 前提 WebStormインストール済み WebStormでSass 2014年11月25日
goto_jp さんのアバター 50views

隣接セレクタと擬似クラスの合わせ技

<div class="class1"> ~ </div> <div> <ul> <li>~</li> ←このの最初の<li>にスタイルを適用させたい &l 2014年11月25日
goto_jp さんのアバター 350views

CSS:IE専用「filter」によるalphaが一定条件下でバグる

IE8以前ではCSSの「opacity」プロパティは使えず、代わりに下記のIE独自仕様のfilterプロパティで再現することができました。 filter: alpha(opacity=80); また同様にIE8以前は影を落とす「box-sh 2014年11月20日
goto_jp さんのアバター 126views

head内の情報を抜き取る

厳密にはウェブページ内の該当するHTMLタグの情報を抜く形ですが、ヘッダー内のタグにも効いたので。 今回は「apple-touch-icon-precomposed」に設定している画像URLを抜き取りたかったのでその例です。 var lin 2014年11月18日
goto_jp さんのアバター 4,058views

Androidのバージョン判別

function androidVersion() { var ua = navigator.userAgent; if( ua.indexOf("Android") > 0 ) { var version = parseFloat( 2014年11月18日