floatした要素が複数行になった時に、レスポンシブ対応で中央揃えにする
floatした要素が1行の時の中央揃えの方法は以前記事を書いたのですが、今回は2行以上に対応する方法を考えてみました。...
flexboxを使ってみる
レイアウトを組むのに便利なflexboxを使ってみます。...
Internet Exprolerで要素が非表示の状態だとYouTube APIのonReadyイベントが発生しない
display: none;状態の要素にYouTube APIで動画を埋め込む処理を行っていたのですが、Internet...
jquery.matchHeight.jsで非表示の要素は除外されない
jquery.matchHeight.jsで高さを揃えた要素に絞り込みの処理を追加したところ、高さ揃えがうまくいかなくな...
concrete5を使ってみる
直感的にページ編集などを行えるCMS「concrete5」を使ってみました。 今回はさくらインターネットのクイックインス...
Movable Typeの変数と条件分岐を使ってみる
Movable Typeの変数と条件分岐を使ってみます。...
文字を入力してリストを絞り込む
入力エリアに文字を入力すると、入力された文字列が含まれるリストだけ絞り込まれる処理を作ってみました。...
iOSでJavaScriptからのYouTubeの再生ができない
埋め込まれたYouTubeの前面に要素を重ねて、その要素がクリックされたらJavaScriptでYouTubeを再生させ...
Google Mapsを埋め込んだ時に、スマートフォンでスワイプに反応しないようにする
スマートフォンサイトに大きいサイズのGoogle Mapsを埋め込んだ時、タップにGoogle Mapsが反応してスクロ...
keydownで入力制御をした時に、全角文字が入力できない
特定のキー以外での入力をできないようにしたかったので、keydown時に指定したキーコード以外はキャンセルする処理を実装...
ハイブリッドアプリの開発環境「Monaca」を使ってみる
HTML+JavaScriptでアプリを作成できるMonacaを使ってみました。...
動的遷移のサイトでもGoogleアナリティクスで正しく計測する
Googleアナリティクスは通常だとページ遷移毎にデータを送信するので、動的遷移(Ajaxでページ内の一部を書き換えるな...
Masonry.jsを使ってみる
レスポンシブ対応のグリッドレイアウトを実装できるjQueryのプラグイン「Masonry.js」の使い方をメモ。 今回は...
Angular.jsでリストの絞り込みと並び替えとページャーを実装する
リスト表示でよく使いそうなfilter、orderByとページャーの機能を実装してみます。...
p5.dom.jsを使ってみる
p5.jsのライブラリの中からp5.dom.jsを使ってみます。 p5.jsの基本的な使い方は以前の記事を参照ください。...
GoogleアナリティクスとSearch Consoleを連携する
Google アナリティクスとSearch Consoleを連携して、Google アナリティクス上にSearch Co...
CSSセレクタの種類まとめ
CSSセレクタについて色々調べてみたのでメモ。...
Movable Typeのブログ投稿を使ってみる
Movable Typeのブログ投稿とテンプレートについて見てみます。...
p5.jsで円周上に沿ってアニメーションする
p5.jsを使って、円周上に沿ってアニメーションする処理を実装してみます。...
固定ヘッダーをある程度スクロールしたら縮小して表示する
ヘッダーを固定しているときに、ある程度スクロールしたら高さを縮小したいということがよくあるので、そのサンプルを作ってみま...