goto_jp さんのアバター 733views

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

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

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

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

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

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

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

iPadのSafariでHTMLソースを開く

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Haml:変数を扱う

頭に「-」を付けることで変数の宣言を行えます。 !!! %html %head %title Haml test %body %h1 Hello World -x = 3 -y = 5 %p x:#{x}, y:#{y} %p #{x * 2014年8月12日
goto_jp さんのアバター 299views

Haml:Haml内でRubyの記述を使う

HamlはRubyで動いているため、Haml内の記述にRubyを使うことができます。 !!! %html(lang="ja") %head %title Haml test %body %h1 Hello World -x = 3 * 3 2014年8月11日
goto_jp さんのアバター 558views

Haml:CSSやJavaScriptをフィルター機能で記述する

例えば下記のように<style>タグを書こうとしてもHamlコンパイル時にエラーが出てしまいます。 !!! %html %head %title Haml test %style .test { margin: 0px; } % 2014年8月11日
goto_jp さんのアバター 939views

MySQLのDBファイルが大きすぎる場合にコンソールでインポートする方法

ローカルのphpMyAdminにMySQLのDBをインポートしようとしたところ、sqlが巨大すぎて正常にインポートが行えませんでした。 そこでphpMyAdminを介さずコンソールで直接取り込みを行いました。 コマンドプロンプトの起動→My 2014年8月8日
goto_jp さんのアバター 2,096views

XAMPP環境にMovableTypeをインストールする

XAMPP環境でかなり久々にMovableTypeをインストールしようとしたら下記のようなエラーで止まってしまった。 Error message: couldn't create child process: 720002: mt-chec 2014年8月8日
goto_jp さんのアバター 1,603views

MySQLのDBファイルが大きすぎてphpMyAdminでインポートできない時の対処

CMSで使っているDBはファイルサイズがすぐ膨大になり、phpMyAdminを使って直接DBをエクスポート&インポートで移行しようとする際、DBダンプファイルが大きすぎてインポートする時ファイルサイズ制限で泣かされることがあります。 php 2014年8月8日
goto_jp さんのアバター 2,464views

Haml:コメントの書き方

!!! %html %head %body / 一行コメント / 改行&インデントでコメントも入れ子になります。 改行&インデントでコメントも入れ子になります。 -# HTML出力されないコメント -# HTML出力されないコメント HTM 2014年8月7日
goto_jp さんのアバター 350views

Hamlの基本

!!! %html(lang="ja") %head %title Haml test %meta(charset="UTF-8") %body %h1 Hello World %p %a(href="http://www.google.c 2014年8月7日
goto_jp さんのアバター 495views

WebStormでHamlをインストールしgruntで自動化する

まずHamlとは何ぞやという点からですが、まずは下記Hamlコードをご覧ください。 !!! %html %head %title Haml test %body %h1 Haml test %p honyarara %ul.list - 3 2014年8月6日
goto_jp さんのアバター 277views

CSS:ブロック要素の完全中央配置

See the Pen Absolute centering of block element by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen. 枠の親要素に対して、内部の子要素を完全中央配置して 2014年8月6日
goto_jp さんのアバター 228views

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

db → display: block; dn → display: none; dib → display: inline-block; t0 → top: 0; l0 → left: 0; fll → float: left; flr 2014年8月5日
goto_jp さんのアバター 814views

JavaScript:クリックした要素の全情報を取得する

window.onload=function(){ document.onmousedown = function(e) { console.log(e); } } これでコンソールを見ると「function(e)」で取得した「e」に膨大な 2014年8月5日
goto_jp さんのアバター 224views

CSS3:自サイトURL以外へのリンクにスタイルを適用する記法

a:not([href^="http://www.example.com"]) { //スタイル } 「:not」の非該当セレクタに属性セレクタの合わせ技です。 「:not」は条件に該当しない場合にスタイルを適用するセレクタですが、その条件 2014年8月4日
goto_jp さんのアバター 392views

JavaScript:ページ内全ての<li>に偶数・奇数のクラスを付与する

window.onload=function(){ var uls = document.getElementsByTagName("ul"); //ページ内すべての<ul>を取得 for (i = 0; i < uls. 2014年8月4日