goto_jp さんのアバター 58views

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

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

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

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

【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 さんのアバター 368views

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 さんのアバター 4,876views

Androidのバージョン判別

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

古いIEのCSSハック

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

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 さんのアバター 146views

JavaScript:display操作用関数

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

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 さんのアバター 310views

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

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

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

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

スマホでのチェックボックスの挙動は、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 さんのアバター 148views

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript:onResizeでウィンドウ幅にフィットし続ける

まず下記関数を作ります。 function fitWindow($target) { var w = document.documentElement.clientWidth; var h = document.documentElemen 2014年10月22日
goto_jp さんのアバター 2,251views

JavaScript:親、子、兄弟要素を参照する

親要素 var parent = this.parentNode; <div class="oya"> ←このdiv要素が親になる <button onclick="">ボタン</button> ←ここが 2014年10月22日
goto_jp さんのアバター 331views

正規表現で置換しよう

色んなツールに置換機能はありますが、置換に正規表現が使えるケースも多々あります。 一定ルールで条件を指定して置換を行うことができます。 (.*) // 1文字以上何文字でもマッチする (.) // 1文字だけマッチする (..) // 2文 2014年10月21日