goto_jp さんのアバター 185views

GruntでCSS圧縮を行う

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

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

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

vimの最低限の使い方

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

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

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

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

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

MacOSのWebStormでGrunt環境をつくる

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

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

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

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

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

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

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

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

head内の情報を抜き取る

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

Androidのバージョン判別

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

古いIEのCSSハック

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

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

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

Emmet:!は便利

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

JavaScript:display操作用関数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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