goto_jp さんのアバター 80views

MacOSのWebStormでGrunt環境をつくる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

head内の情報を抜き取る

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

Androidのバージョン判別

function androidVersion() { var ua = navigator.userAgent; if( ua.indexOf("Android") > 0 ) { var version = parseFloat( 2014年11月18日
goto_jp さんのアバター 407views

古いIEのCSSハック

プロパティごとに記述するだけで適用バージョンを変えられる簡易的な手法をご紹介。 IE6 プロパティ頭に「_」を付ける。 .class { _margin: 0; } IE7 プロパティ頭に「*」を付ける。 .class { *margin: 2014年11月17日
goto_jp さんのアバター 337views

CSS:IE専用「filter」によるグラデーションが一定条件下でバグる

.xxx a { ~ filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#F 2014年11月17日
goto_jp さんのアバター 95views

Emmet:!は便利

! HTML上でこれをEmmetで展開すると下記のHTMLフォーマットを出力します。 <!doctype html> <html lang="en"> <head> <meta charset="U 2014年11月14日
goto_jp さんのアバター 147views

JavaScript:display操作用関数

モックでざっくりとポップアップウィンドウなどを作る際によく使う関数をご紹介。 function displayChange($target, $status) { var elm = document.getElementById($tar 2014年11月12日
goto_jp さんのアバター 2,925views

Androidバグ:4系の標準ブラウザでposition:fixedがおかしい

Android4.4のタブレットで報告があり、4.2のタブレットでも標準ブラウザで再現できたイヤな描画バグがあったのでメモ。 症状 素早くスライドした勢いで画面最上部か最下部にぶつかって止まると、その勢いのままposition:fixedの 2014年11月10日
goto_jp さんのアバター 73views

WebStormでGruntコンソールが開けなくなった場合

たまーに起こるのですが、WebStormで画面下のGruntコンソールが閉じてしまい、開くためのショートカットも消えてしまうことがあります。 ファイル一覧のGruntfile.jsを右クリックすると、「Open Grunt Console」 2014年11月10日
goto_jp さんのアバター 311views

Androidバグ:2系ではテーブルのセル(th,td)にposition:relativeが効かない

テーブルのセル内にはposition:relativeが効かないようなので、セル内を基準にしたい場合はdivを一枚かます必要がありそうです。 <td> <div> <i class="abs"></ 2014年11月5日
goto_jp さんのアバター 299views

Androidバグ:2系ではborder-radiusの%指定が効かない

border-radius(50%); この記述で1辺の半分の円、widthとheightが同じであれば正円が作れるのですが、Android2系ではこの%指定が効きません。 角丸に関してはオブジェクト指向的なCSSができないので、素直に固定 2014年11月5日
goto_jp さんのアバター 580views

スマホでのチェックボックスの挙動は、labelタグよりJS処理の方がレスポンスが良い

<label for="check1"><input type="checkbox" id="check1">チェック</label> 上記のようにlabelタグをクリックでチェックボックスにチェックを入 2014年11月5日
goto_jp さんのアバター 119views

チェックボックスを擬似的に読み込み専用にする

<input type="checkbox" onclick="return false"> チェックボックスは「readonly」を入れてもならないのでJSで擬似的にする方法です。 2014年11月5日
goto_jp さんのアバター 149views

WebStormで一つのプロジェクトで複数のGruntを走らせる

たとえば1つのWordpressサイトで複数のテーマをGruntを使って編集したい場合、複数のGruntを動かしたくなるケースがあります。 結論から言えば、Gruntfile.jsをコピーするだけでOKです。 Compassも扱っている場合 2014年11月4日
goto_jp さんのアバター 2,927views

CSS3:iOSのSafariのセレクトメニューをCSSで加工する

iOSのSafariでselectタグを使って出すセレクトメニューには、直接CSSが効きません。 なので、根本的に一回セレクトメニュー以外のものに定義してしまいます。 select { -webkit-appearance: button; 2014年10月30日
goto_jp さんのアバター 954views

MovableType:MT5から6にバージョンアップしたらCKEditorが使えなくなった対応

MovableTypeを5から6にバージョンアップしたところ、これまで入れていたエディタ用プラグインのCKEditorが使えなくなっていた。 結論から言うと すでにCKEditorが入っていれば、バージョンアップや入れ直しは不要 システムの 2014年10月30日
goto_jp さんのアバター 2,837views

CSS3:CSSだけでチェックマークを作る

サンプルはこちら。 See the Pen HfzuE by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. SCSS後半の下記の部分でチェックマークを表現してます。 長方形の擬似要素をつくり、上ボー 2014年10月29日
goto_jp さんのアバター 281views

CSS3:スマホでタップした時のハイライトを消す

a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); tap-highlight-color: rgba(0, 0, 0, 0); } ハイライトを消すことに賛否はありそうですが「アプリっぽさ 2014年10月29日
goto_jp さんのアバター 89views

Git:新しいブランチを作り、すぐそのブランチに切り替える

git checkout -b branchname checkoutはブランチ切り替えコマンドですが、-bオプションをつけることで新規ブランチの作成もできます。 git checkout -b branchname origin/bran 2014年10月28日
goto_jp さんのアバター 224views

Compass:WindowsでCompassをインストールする

まずはRuby本体のインストール。 参照: http://www.rubylife.jp/install/install/index1.html 次にコマンドプロンプトを立ち上げ、下記コマンドを実行する。 gem update --syst 2014年10月27日
goto_jp さんのアバター 281views

node.js:複数ドライブ環境でもnode.jsは素直にCドライブに入れよう

PCのメインドライブをSSDに換装し環境構築をしている過程で、gruntを設定するためnode.jsをシステムドライブ(C)と別のドライブ(D)にインストールしたところ、gruntが正常に動かないという状況が発生しました。 Cドライブ側から 2014年10月27日
goto_jp さんのアバター 40,286views

JavaScript:テキスト入力関連のイベント、onChange,onInput,onKeyUp

テキストフィールドに入力があった際のイベント処理についてメモします。 function alertValue($this) { $this.nextSibling.innerHTML = $this.value; } 入力のあったthisの 2014年10月24日
goto_jp さんのアバター 3,745views

CSS3:IE10からテキストフィールドに勝手に入る×ボタンを消す

IE10以降からテキストフィールドに入力すると、クリアするための×ボタンが勝手に入ります。 これはCSSで消すことができます。 input[type=text]::-ms-clear { display: none; } 「ms-clear 2014年10月23日