goto_jp さんのアバター 93views

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

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

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

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

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

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

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

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

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

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

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

正規表現で置換しよう

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

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

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

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

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

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

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

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

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

MovableType:記事作成画面が正常に開かなくなったら

つい先週WordPressでの似たようなこと書きましたが、全く作りの違うMovableTypeでも似たような記事作成画面でのトラブルがあったのでメモ。 問題 HTMLモードでインラインにJSを結構書き込んでいる記事を編集しようとしたところ、 2014年10月16日
goto_jp さんのアバター 1,654views

JavaScript:一つのリンクをPC用URLとスマホ用URLに切り分ける

PCで見た場合はPC用URL、スマホで見た場合はスマホ用URLに切り分けるというリンクを作ります。 <a href="http://www.example.com/pc.html" id="changeLink1">リンク< 2014年10月15日
goto_jp さんのアバター 175views

最近よく使うEmmet記法 2014年10月版

db → display: block; dn → display: none; dib → display: inline-block; bgc#fff → background-color: #ffffff; posa → positi 2014年10月14日
goto_jp さんのアバター 325views

文章構成に役立つnowrapとwbrタグの合わせ技

Webデザインにおいて、テキストは文中改行(<br>)せずに流し込み、ブロック幅での自然改行に委ねるのが美しいとされていますが、そのうえでも文章の区切りのいい位置で改行させたいケースはあると思います。 そこで役立つのか下記のよう 2014年10月10日
goto_jp さんのアバター 538views

今どきのHTMLメール事情

超久々にHTMLメールについて調べたところ、HTMLメールの作り方に変化は(残念ながら)ほぼないのですが、スマホユーザーはむしろHTMLメールで受け取ることが当たり前で、レスポンシブを前提とした作りがトレンドのようでした。 基本はテーブルレ 2014年10月10日
goto_jp さんのアバター 200views

WordPress:記事作成画面で画像投稿などJavaScriptが動かなくなったら

WordPressをアップグレードしたら、記事作成画面で画像投稿ほかJavaScriptで動いている機能が使えなくなりました。 こういう場合、十中八九プラグインが原因なので以下のような手順で調べましょう。 プラグインを全て止める 記事作成画 2014年10月9日
goto_jp さんのアバター 255views

WordPress:the_date()で日付が表示されない場合の対策

投稿ループ内などで the_date() を使うと、同じ日付の記事が連続した場合に日付が表示されないことがあります。 そんな場合は「the_time()」を使いましょう。 <?php the_time('Y/m/d'); ?> 2014年10月7日
goto_jp さんのアバター 181views

WordPress:管理者用ヘッダーが消えてしまったら…

WordPressのテーマファイルをいじっていたら、ログインしている時のみ表示される管理者用ヘッダーが消えてしまうことがありました。 原因は「wp_footer()」を消してしまったことでした。 <?php wp_footer(); 2014年10月7日
goto_jp さんのアバター 1,209views

WordPress:CSVから記事をインポートする

プラグイン「Really Simple CSV Importer」をインストール Really Simple CSV Importer こちらをWordpressへインストールし有効化してください。 CSVを整理 CSV一行目の項目名を下記 2014年10月3日
goto_jp さんのアバター 149views

クリッカブルマップ

すごい初歩的でオールドな手法なのですが、ごくたまにやる機会があると毎度忘れていて検索するので残しておこうと思います。 <img src="image.gif" usemap="#map1"> <map name="map_ 2014年10月2日
goto_jp さんのアバター 306views

WordPress:カテゴリーを投稿記事数順に表示する

<ul>  <?php wp_list_categories('orderby=count&order=desc&show_count=1'); ?> </ul> orderbyでcoun 2014年10月1日
goto_jp さんのアバター 168views

PHP:配列の任意項目のソート

前提として、下記内容の配列「$oden」があったとします。 Array ( [0] => Array ( [id] => 1 [name] => tamago [price] => 100 ) [1] => A 2014年9月30日
goto_jp さんのアバター 1,564views

Googleチャートの折れ線グラフを表示する

下記のような表をGoogleチャートで簡単に表示できます。 準備 head内で下記のようにAPIを読み込みます。 <script type="text/javascript" src="https://www.google.com/j 2014年9月26日
goto_jp さんのアバター 2,711views

Googleチャートの円グラフを表示する

Googleの提供しているチャートAPIで簡単に様々なグラフを作ることができます。 準備 head内で下記のようにAPIを読み込みます。 <script type="text/javascript" src="https://www. 2014年9月25日
goto_jp さんのアバター 4,531views

WordPress:タグクラウドではなくタグ一覧を出力する

タグ一覧を出すには「get_terms」関数を使います。 タグなのでつい「tag_~」関連の関数を探しがちですが、Wordpressは内部的にはタグは「term」と呼ばれています。 <ul> <?php $args = a 2014年9月25日
goto_jp さんのアバター 2,408views

WordPress:カテゴリ別のタグクラウドを出す方法

タグクラウドをそのまま設置すると、そのサイトで利用されているタグが全て表示されますが、特定カテゴリ以下で利用されているタグを表示する方法になります。 function.php へ記述 function my_category_tag_clo 2014年9月24日
goto_jp さんのアバター 8,004views

「bxSlider」で画像が一度に出てしまう際の対処

前回レスポンシブ対応のスライダーを生成する「bxSlider」を紹介しましたが、スマホなど回線や描画が遅い環境で開くと、JavaScriptでスライダー化される前にリストの画像が一気にボボンと出てしまい見た目に悪かったので、CSSレベルで対 2014年9月19日
goto_jp さんのアバター 1,803views

レスポンシブ&スワイプ操作に対応したスライダーjQueryプラグイン「bxSlider」

PCでは無限スライダー表示、スマホではスワイプ操作に対応したスライダーになってくれる「bxSlider」は、非常に簡単にサイトへ加えられます。 ファイルの読み込み <script src="//ajax.googleapis.com/ 2014年9月19日