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