HTML5
CSSの要素の順番に応じてスタイルを当てる :nth-chaild 疑似要素で上手く行かないという相談を受けて、ちゃんと仕様を把握できてなかったので改めて調べたのでメモ 相談を受けたHTML と CSS HTML <body> <header></header> <section>section 1</section> <section>section 2</section> <section>section 3</section> </body> CSS section:nth-child(2)…
jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた
恥ずかしながらFetchAPIたるものがあるのを知らなかったので、ざっくり試してみた。 Fetch API Service Workersでも使えて、プレーンなJavaScriptのXMLHttpRequestより強力で柔軟な操作ができるそうです。 GET fetch(api_url, {method: 'GET'}) .then((res) …
A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support f…
モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .m…
スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheight…
WordPress 4.4 以降では、管理画面からアップロードされた画像を表示させる時に、wp_get_attachment_image()とかget_the_post_thumbnail()とかの関数を使ってimgタグを出力すると、自動的にsrcsetとsize属性がつくようになりました。 例えば、580px x 166px …
最近のブラウザちゃんはPDFとかも開けちゃうのですが、ファイルをダウンロードさせたいって時があります。 HTPPヘッダーにContent-Dispositionをごにょごにょしたり、.htaccessでごにょごにょしたりしてたイメージだったのですが、HTML5からはHTMLだけで簡単…
pushState, popStateを使ってURLの履歴を追加したり、ブラウザバックに対応したりする事ができるので画面遷移をせずにAjaxとかで画面を切り替えるサイトを作ることができます。 で、記事の概要をクリックされたら、Ajaxで記事内容を取ってきて全面モーダルで…
HTML5のフォームパーツがたくさん増えて便利なのですが、割りとよく使いたくなるinput[type="date"]、Firefoxなどカレンダーで選択できる機能が実装されてないプラウザもまだまだ多い印象があります。単純にinput[type="text"]にしてjQueryUIのdatepicker使…
px指定の次はコレ!フォントサイズやブレイクポイントに「rem」を使ったレスポンシブ対応のフレームワーク -Schema UI Framework レスポンシブなwebサイトを作るとき最近の流行りはメディアクエリをrem指定だ!と言うことでrem指定にチャレンジしてみた所、…
フォームのイマココ!とか表示できるシンプルなステップバーを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イベントがchromeのデベロッパーツールで確認した時は動作しているのに、実機では動作しないという現象に出会ったのでメモです。 今回はボタンクリックでモバイル用のメニューを表示させるような機能を作っ…
TRYしたいCSS プロっぽくなった!こっそり使いたい「動きのある」CSSテクニック | コムテブログ [CSS]フラットなデザインに使いたい!タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック | コリス メモ ウェブサイトで珍しい形を取り…
HTML5になってからdevなどのブロック要素をaタグで囲ってもOKになったので エリア自体をリンクにしたいときなど、まるっとaタグで囲ったりする事も多いです。が、ここで少し気をつけたい事。 aタグをaタグで囲むとブラウザが空気読んで勝手にaタグの閉じタグ…