CSS :nth-child(n) の順番についてのメモ

CSS HTML5 Design

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)…

2019-01-10

Ajax (XHR) まわりいろいろ試してみた。

JavaScript Ajax ES2015 (ES6) node.js HTML5 XHR

jQueryの$.ajax, XMLHttpRequest, FetchAPI, axios, superagentを簡単に試してみた

2019-01-08

Fetch API 試してみた。

JavaScript Ajax HTML5 XHR

恥ずかしながらFetchAPIたるものがあるのを知らなかったので、ざっくり試してみた。 Fetch API Service Workersでも使えて、プレーンなJavaScriptのXMLHttpRequestより強力で柔軟な操作ができるそうです。 GET fetch(api_url, {method: 'GET'}) .then((res) …

2018-12-23

JavaScript Blobオブジェクトでファイルを作成してダウンロードしてみる

JavaScript HTML5

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…

2017-11-21

CSS Fixedしたコンテンツでスクロールさせたい

CSS HTML5

モバイルのメニューとかposition: fixedでデザインしたけど、メニューが長かったりデバイス回転させたりしたらメニューが見切れるからfixedしたモーダル内でスクロールを表示させたい時の実装方法のメモ top, left, right, bottom と overflow を利用する .m…

2016-07-15

HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。

HTML HTML5 CSS Responsive Design

スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。レスポンシブの正方形を作る vmin という単位を利用する方法調べていると、widthとheight…

2016-07-15

WordPress 4.4 Responsive Images の size の値を変更したい。

WordPress Responsive HTML5

WordPress 4.4 以降では、管理画面からアップロードされた画像を表示させる時に、wp_get_attachment_image()とかget_the_post_thumbnail()とかの関数を使ってimgタグを出力すると、自動的にsrcsetとsize属性がつくようになりました。例えば、580px x 166px …

2016-03-25

HTML5 ファイルをダウンロードさせるリンクを作りたい。

HTML5

最近のブラウザちゃんはPDFとかも開けちゃうのですが、ファイルをダウンロードさせたいって時があります。 HTPPヘッダーにContent-Dispositionをごにょごにょしたり、.htaccessでごにょごにょしたりしてたイメージだったのですが、HTML5からはHTMLだけで簡単…

2016-03-01

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

JavaScript HTML5

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

2015-09-28

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

JavaScript jQuery HTML5

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

2015-04-25

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

CSS HTML5 Design Responsive

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

2015-03-06

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

CSS Design HTML5

フォームのイマココ！とか表示できるシンプルなステップバーを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>…