goto_jp さんのアバター 363views

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

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

head内の情報を抜き取る

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

Androidのバージョン判別

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

古いIEのCSSハック

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

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

JavaScript:display操作用関数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

正規表現で置換しよう

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

Sass:ネストのやりすぎ注意

Sassのネスト構造は非常に便利ですが、慣れてくるとつい下記のように長くなることがあります。 .classname { p { } a { } ul { li { div { a { } } } } .class1 { div { p { 2014年10月20日
goto_jp さんのアバター 375views

JavaScript:クリックした要素の直下に、対象の要素を表示させる

簡易的な例ですが、クリックしたボタンのすぐ下にポップアップを開く時などに使う関数は、大体下記のようなパターンです。 function setBounds($this, $target) { var bounds = $this.getBou 2014年10月20日
goto_jp さんのアバター 164views

IE7でdisplay:inline-blockを表現する

.inline-block { display: inline-block; *display: inline; zoom: 1; } IE7ではinline-blockの値が存在しないため、スターハックとzoomを使う。 なおCompas 2014年10月20日
goto_jp さんのアバター 509views

CSS3:文字や画像を選択できなくする

ブラウザ上の文字をドラッグしたり、ブラウザ上をWクリックすると選択状態になりますが、「user-select」プロパティを使うことでその選択をできなくします。 -webkit-user-select: none; -moz-user-sel 2014年10月17日