goto_jp さんのアバター 1,508views

CSS:IE7でoverflow:hidden/scrollが無視されて突き抜けてしまうバグ

overflow:hidden/scroll内にposition:relative要素があると、そのようになります。 <div class="scroll"> <div class="box"></div> 2014年9月19日
goto_jp さんのアバター 1,606views

CSS3:サイズ不明でもどのような要素でも縦中央配置する

.class { position: relative; top: 50%;   -webkit-transform: translateY(-50%);   -ms-transform: translateY(-50%);   trans 2014年9月18日
goto_jp さんのアバター 206views

JavaScript:比較演算子「==」と「===」の違い

if(1 == "1") // trueを返す if(1 === "1") // falseを返す すごく初歩的なことですが見落として無駄に詰まっていたので自戒を込めて改めておさらい。 「==」は変数の形を見ない。 「===」は厳密に変数の 2014年9月17日
goto_jp さんのアバター 2,357views

CSS3:簡単に段組を作れる「columns」プロパティ

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ さしすせそさしすせそさしすせそさしす 2014年9月16日
goto_jp さんのアバター 313views

WordPress:特定のカテゴリ及びその子カテゴリのカスタム表示を行う

<?php $cat = get_the_category(); $parent_id = $cat[0]->category_parent; if (is_category(2)||$parent_id == 2) { //カ 2014年9月12日
goto_jp さんのアバター 328views

WordPress:確実なカテゴリ情報の取り方

<?php if(is_category()){ $cat = get_category(get_query_var('cat'),false); } elseif(is_single()) { $cat = get_the_cate 2014年9月12日
goto_jp さんのアバター 787views

WordPress:3列ずつのリストを出力する

■ ■ ■ ■ ■ ■ 上記のように、3つずつ並んだ不特定多数のリストをWordpressで出力する場合、下記のようにします。 <?php query_posts($query); if(have_posts()): $count = 2014年9月11日
goto_jp さんのアバター 810views

WordPress:投稿が無い場合の表示

<?php if(! have_posts()) { //投稿が無い場合の処理 echo '投稿がありません。'; } ?> 2014年9月11日
goto_jp さんのアバター 734views

WordPress:グローバル変数を全て見る「$wp_query」

<pre><?php print_r($wp_query); ?></pre> Woredpressのカスタマイズで困ったらとりあえず「$wp_query」を表示させて、今取得できる変数を全部見るのが便利 2014年9月10日
goto_jp さんのアバター 821views

WordPress:「今開いているカテゴリ」のカテゴリIDを取得する

<?php $catID = get_query_var('cat'); ?> 上記でエントリーページでもアーカイブページでも、「今開いているカテゴリ」のカテゴリIDを取得できます。 WordPressにはほかに「get_the 2014年9月10日
goto_jp さんのアバター 1,993views

リスト(<li>)のマーカーにWebフォントを使う

画像を使わずリストマーカーを変更するサンプルです。 See the Pen list marker FontAwesome by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. HTML <li 2014年9月8日
goto_jp さんのアバター 175views

twitterで日本語のみ対象に検索する

英単語やURLで検索をかけると海外のツイートも多くヒットします。 日本語の情報のみに絞って検索したい時はキーワードに下記を加えます。 lang:ja 例えば日本語ツイートのみでaipoに関して検索したければ下記のようになります。 aipo 2014年9月8日
goto_jp さんのアバター 1,936views

jQuery:アコーディオンメニュー改訂版

See the Pen jquery accordion menu by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. jQueryでアコーディオンメニューを作る 以前作った上記アコーディオンメニュ 2014年9月5日
goto_jp さんのアバター 2,056views

Sass:変数を別ファイルで管理しよう

下記のファイル構成を前提とします。 css └style.css sass ├_variables.scss └style.scss Sassは標準設定ではファイル名冒頭に「_」の付くファイルはコンパイルを行いません。 また、そうしたファイ 2014年9月4日
goto_jp さんのアバター 857views

Safariでspanにposition:absoluteした要素がAjaxでバグる

.num { position: absolute; top: 5px; right: 5px; min-width: 12px; line-height: 12px; padding: 0 2px; } このクラスは下記のように、動的に内 2014年9月3日
goto_jp さんのアバター 161views

Git:リモートリポジトリにブランチを作る

git push {リポジトリ名} {ブランチ名} 2014年9月2日
goto_jp さんのアバター 1,002views

HTMLページをスライド表示する「Reveal.js」を使う

Reveal.js ページ全体をプレゼン用スライド化するのに便利なライブラリです。 準備 Githubリポジトリからパッケージをダウンロードしましょう。 落としてきたファイルを展開し、css、js、lib、pluginフォルダを実際に利用す 2014年9月2日
goto_jp さんのアバター 343views

micro clearfix

.clearfix:before, .clearfix:after{ content:""; display: table; } .clearfix:after{ clear:both; } .clearfix{ *zoom:1; } ちな 2014年9月1日
goto_jp さんのアバター 443views

とりあえず「box-sizing:border-box」

通常CSSでは、実際に表示される要素の幅は「width(height) + padding」になります。 .class1 { width: 50px; height: 30px; padding: 10px; } 上記の場合、.class1 2014年9月1日
goto_jp さんのアバター 604views

GitShellで「not find ssh-agent」エラーが出た時の対応

GitShellを起動したら下記のようなエラーが出てgitコマンドが一切使えなくなっていました。 Warning: git command could not be found. Please create an alias or add 2014年8月29日
goto_jp さんのアバター 10,595views

iPadのSafariでHTMLソースを開く

まず下記のリンクを開いてください。 リンク 一見同じページですが、そのままブックマーク登録してください。 登録したてのブックマークを編集します。 名前は「ソースを開く」などに変更し、URLの冒頭から「?」まで含めた部分を削除してください。 2014年8月27日
goto_jp さんのアバター 206views

Git:リモートリポジトリを特定コミットに巻き戻す

$ git revert {コミットID} 2014年8月26日
goto_jp さんのアバター 161views

Git:addしたファイルを取り消す

$git reset HEAD {ファイル名} ファイルの更新内容は変えず、addした記録のみ取り消します。 2014年8月26日
goto_jp さんのアバター 256views

Sass:ネスト構造のおさらい

標準ネスト .class1 { margin: 0; .class2 { margin: 0; } } ▼CSS出力 .class1 { margin: 0; } .class1 .class2 { margin: 0; } Sassネスト 2014年8月25日
goto_jp さんのアバター 4,702views

JavaScript:getElementsByTagNameの直下子要素のみ取得版

例えば下記のHTMLがあったとします。 <ul id="list"> <li> <div></div> </li> <li> <ul> <li> 2014年8月21日
goto_jp さんのアバター 676views

Haml:textarea、preでの複数行テキスト出力

%textarea :preserve テキスト テキスト %pre = preserve do :escaped <div>test1</div> <div>test2</div> コンパイ 2014年8月20日
goto_jp さんのアバター 246views

Haml:クラス、IDを付与する

!!! %html %head %title Haml test %body %h1.title Hello World #main %p テスト コンパイルすると下記HTMLに出力されます。 <!DOCTYPE html> & 2014年8月20日
goto_jp さんのアバター 652views

Haml:出力HTMLのコード内改行を制御する

%div %p %span 改行されるテキスト 例えば上記のようなHamlをコンパイルすると下記HTMLに出力されます。 <div> <p> <span>改行されるテキスト</span> &l 2014年8月18日
goto_jp さんのアバター 835views

Haml:ループ(for文)を扱う

Hamlの文中でforを使った条件ループを行えます。 !!! %html %head %title Haml test %body %ul.list - for i in 1..5 %li list #{i} コンパイルすると下記HTMLに 2014年8月18日
goto_jp さんのアバター 4,220views

Haml:条件分岐(if文)を扱う

Hamlの文中で条件分岐を行えます。 !!! %html %head %title Haml test %body -x = 3 -if x >= 5 %p xは5以上 -else %p xは5未満 コンパイルすると下記HTMLに出力 2014年8月12日