なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
20 Website Concepts with Stunning Full Page Designs
Today’s post gathers 20 stunning full page designs with some interesting web design concepts that will inspire you! We rarely get the chance to admire the full beauty of website designs when we’re limited to the cropped viewport of our browser windows, but there are some stunning examples of full page layouts out there. We might only see a finished website at a few thousand pixels at a time as we
HTML5のFile APIとWebGLを利用した3D写真ビューア - ICS MEDIA
ブラウザ上で高度なグラフィックを描画できるWebGL。また、HTMLには多彩なAPIが備わっています。今回はiPhoneでも動作する3Dの写真ビューアーを作ってみました。本記事では次の4つの技術を中心に解説します。 ファイルの取り扱いAPI ドラッグアンドドロップのAPI デバイスの傾き検知処理 WebGL デモを再生する（別ウインドウが開きます） ソースコード ※ Androidについては手元の環境では動作しませんでした。 iPhoneでの動作ビデオ 実際にiPhoneで動いているデモは以下の動画です。iPhone 5Sです。 STEP1. ファイルのアップロード方法 HTML5で登場したFile APIを使用すると、ローカルからファイルをアップロードすることができるようになります。ここでは、input要素を使う方法と、ドラッグアンドドロップを使う方法を紹介します。デモでは、demo.F
クセが強いJavaScriptの引数を使いこなす
JavaScriptの関数の引数には様々な特徴があります。こうした特徴をきちんと把握しておくことも重要です。 まず、JavaScriptでは関数に渡す引数の数はチェックされません。したがって、リスト13のようなコードもエラーにはなりません。 引数の数が足りない場合には、値が渡されなかった引数はundefinedになります。（1）ではheightがundefinedになるため、正常な計算ができなかったことを示す「NaN」という値になります。引数の数が多すぎる場合には余分な引数は無視されるため、（3）の呼び出しは正常な呼び出しである（2）と同じ結果になります。 余分な引数は捨てられるわけではありません。JavaScriptでは、引数の数にかかわらず「関数に渡されたすべての引数のリスト」が保持されます。このため、余分な引数を後から参照することも可能です。 この引数リストを管理するのがargume
ウェブ・タイポグラフィーのベスト・プラクティス
Translation of: The All-Inclusive Guide to Web Typography Best Practices インターネットを見渡してみると、如何にタイポグラフィーがウェブ・デザインにおいて絶対的な支配力を持っているかに気付くことでしょう。とにかくウェブ・デザインの95%はタイポグラフィーだというわけです。このようなことを考える時は、様々なことを考慮しなくてはいけません。インターネットとはコンテンツであり、コンテンツとは文字そして文章です。すなわちタイポグラフィーを意味するわけです。 懸命なウェブ・デザイナーなら誰しもこのことは知っており、注意深くまた慎重に時間を費やし、作成中のウェブサイトでタイポグラフィーがきちんとなるようにしていることでしょう。その中では読者に機能的で魅力的であるようなタイポグラフィーを提供するため、ウェブサイトの情報アーキテクチャ
動きがユニークで参考になるメニュー系のUIアニメーションまとめ10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近、編集長の朽木さんが一部の方々から「くーにゃん」と呼ばれているのですが、私から「くーにゃん」と呼ぶのは馴れ馴れしすぎるので「くーにゃんさん」と呼んでしまう次第であります。 はい(◞‸◟) さて、今回は動きが面白いUIを集めてみました！ 1つ1つアニメーションを確認しながらご覧いただけるとうれしいです( ˘ω˘)☝ 今回は紹介するアニメーションは全部で10個です( ˘ω˘)☝ 1. GIF Sticker App – Dribbble https://dribbble.com/shots/1719325-GIF-Sticker-App サイドメニューが斜めに表示するパターン、要素もくるくる動いております( ˘ω˘)☝ 2. Home Guard 02 – Dribbble https://dribbble.com/shots
JavaScriptのエスケープあれこれ | TECHSCORE BLOG | TECHSCORE BLOG
お久しぶりです。寺岡です。 たまにはRuby以外の記事も書いてみようと思ったので、 知っておきたいJavaScriptのエスケープ処理に関する小ネタを紹介します。 encodeURI, decodeURI は使わない JavaScriptでURLエンコーディングを行う場合に、encodeURI, decodeURIを使用してはいけません。 これらの関数は「:」や「/」などの、URL上で意味を持つ記号は処理してくれません。 encodeURIComponent, decodeURIComponentを使いましょう。 実例で見てみます。 「あいうえお」という文字列を対象としている場合は結果は同じですが、 「http://」という文字列を対象とした場合、結果が異なることがわかります。 var value; // ------------------------- // ひらがなのURLエンコード
CSS: 画像をCSS animation を使ってクルクルまわす。 | バシャログ。
どうもfujiharaです。最近、掛け布団の量が難しい季節ですね。 皆さん体調管理には十分ご注意下さい。ちなみに私は風邪引きました。 先日、業務で先輩社員から以下のような依頼を受けました。 先輩 『アイコンを3つ並べてあるから、左から順番にクルッ、クルッ、クルッとJSで回して下さい。 rotate ってクラスを与えてあげて、animationend でイケるから～』。 私 『なるほど、画像のCSS animation 終了で次の画像にrotate クラスを与えてあげれば良いワケね』。 イメージとしては以下の画像になります。 まずはCSSを見ていきます。以下のように書かれています。 <style> .rotate { -webkit-animation: spin 0.4s ease-in-out 1; -moz-animation: spin 0.4s ease-in-out 1; ani
ディレクターがワイヤーを書く直前にやるべき超細かい事あれこれ
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね？ とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか？とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Canvas が専有するリソースをパージ可能になる Canvas Context Loss and Restoration について - latest log