かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

HTML

HISTORY API Safariでウィンドウ ロード時にpopStateイベントが呼ばれてしまう。

pushState, popStateを使ってURLの履歴を追加したり、ブラウザバックに対応したりする事ができるので画面遷移をせずにAjaxとかで画面を切り替えるサイトを作ることができます。 で、記事の概要をクリックされたら、Ajaxで記事内容を取ってきて全面モーダルで…

input[type="date"]がサポートされてない時だけjQuery UIのプラグインを使うようにしたい。

HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使…

Responsive htmlタグにfont-sizeを指定しているとremで指定したブレイクポイントがブラウザによって違うっぽい!?

px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ!と言うことでrem指定にチャレンジしてみた所、…

Twitterのフォローボタンをカスタマイズしたい

Twitterのアカウントをフォローできるボタンを作るには公式のドキュメントから作成できます。 Follow Button | Twitter Developers こんな感じに。 Follow @twitter window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr…

CSS フォームとかで使えるステップバー作ってみた。

フォームのイマココ!とか表示できるシンプルなステップバーをCSSだけで作ってみた。 当然のようにIE8とかは無視してます。ご了承下さい。 SAMPLE See the Pen SIMPLE FORM STEP BAR by Chaika (@chaika-design) on CodePen. SIMPLE FORM STEP BAR HTML <ol class="stepBar step3"> <li class="step current">STE</li></ol>…

iPhone aタグでclickイベントが効かない時があるっぽい!

iPhone用のサイトを作っていて、aタグに付けたclickイベントがchromeのデベロッパーツールで確認した時は動作しているのに、実機では動作しないという現象に出会ったのでメモです。 今回はボタンクリックでモバイル用のメニューを表示させるような機能を作っ…

レスポンシブ対応したHTMLメール関連のメモ

レスポンシブHTMLメールを作成する際の覚書 | Tips NoteHTMLメール制作のコツや便利なサービスいろいろ テンプレート Ink: A Responsive Email Framework from ZURB Cerberus - Responsive Email Patterns Antwort - Responsive Layouts for Email leemunroe…

めも。CSS

TRYしたいCSS プロっぽくなった!こっそり使いたい「動きのある」CSSテクニック | コムテブログ [CSS]フラットなデザインに使いたい!タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック | コリス メモ ウェブサイトで珍しい形を取り…

HTML aタグの中にaタグを入れると崩れる

HTML5になってからdevなどのブロック要素をaタグで囲ってもOKになったので エリア自体をリンクにしたいときなど、まるっとaタグで囲ったりする事も多いです。が、ここで少し気をつけたい事。 aタグをaタグで囲むとブラウザが空気読んで勝手にaタグの閉じタグ…

jsでformを送る(submitする)際に気をつけること。

以前、他のブログにも書いてた事にまた引っかかってしまったので。 改めて。javascriptでフォームを送る方法 <form type="post" name="myForm" action="mofumofu"> こんなフォームだよ― ... </form> javascriptの場合。 // javascript document.myForm.submit(); jQueryの場合 // jQuery var $form = jQuery('form[name…