タグ

2014年1月29日のブックマーク (8件)

  • スマホサイトで画像サイズはいくつにすべきか? | Webサイト開発

    私の結論を先に言ってしまうと、 480px基準の画像で作成し、通信量を抑えつつも画像の綺麗さも担保する が一番ベストな方法だと思います。 では、次から今回の結論に至った、実際の調査内容について触れていきたいと思います。 関連記事: 画像をピッタリ横並び表示させるテクニック 入力フォームを数字キーボードに設定するには? iPhone向けSafari、HTML拡張属性を使いこなす CSS3 擬似クラス 検証の前提 今回の実機検証について、以下を前提とします。 viewportの設定は <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”> とします。 320px、480px、640pxという解像度の異なる画像を作成し、480px、640

    スマホサイトで画像サイズはいくつにすべきか? | Webサイト開発
  • いろんなセレクタ指定方法+α

    ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは?」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基編 セレクタ1) +αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい!」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど!」となるはず。。。ご利用ください。 jQuery セレ

  • <input type="image">タグと<img>タグの違い IT技術Labo - HouseTect

    <input type="image">タグと<img>タグのどちらを採用するかは、 結果的にやりたいことに依存します。 ・tabindex属性について 始めに言うと以下のHTMLは文法エラーになる。 IEとかでは怒られることはないが、誤動作する原因に繋がるので注意が必要である。 まず、<img>タグには「tabindex」属性が存在しない。 その代わり「<input type="image">」には「tabindex」属性が存在します。 ここら辺でも使い方が分かれますね。 たとえば、ImageButtonとして使いたい場合は、きっちり「tabindex」属性を指定するケースが多々あるとおもうので、 その場合は、「<input type="image">」を使いましょう。 ・onclickイベントについて <img>タグでonclickイベントを使う場合、Enterを押下又は、マウスでクリ

    suginoy
    suginoy 2014/01/29
    “<img>タグでonclickイベントを使う場合、Enterを押下又は、マウスでクリックの2つになります。スペースの押下ではイベントが反応しません。<input type="image">ではEnterでもスペースでもイベントが反応します。”
  • input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ | Stronghold Archive

    どうもこんばんは! 今日は【input type=”file” を画像ボタンに変更する方法】を書きたいと思います。fileアップロードを画像ボタンに差し替え、ユーザビリティを向上させるのが目的です。たまに使いたくなるのでここにメモしておきますね。 通常のファイルアップロードタグ <input type="file"> 通常の状態です。CSSで背景やボーダーを削除するデザイン変更には限界があります。 ですのでjQueryで補完します。 ボタンの準備 ファイルアップロードを画像ボタンに変更 ・HTML <input type="file" id="file_01" class="file"> <label class="file_mask"> <span><!– 画像用spanタグ –></span> <input type="text" id="mask_file_01"> </label>

  • Rails4+Paperclip(ImageMagick)のサムネイルサイズ一覧 | noriaki blog

    必要だったのでまとめたシリーズ。 Ruby on Railsに画像アップロード機能を実装する際のデファクトスタンダードであるPaperclipには、ImageMagickと連携してサムネイル画像を自動生成する機能がある。 サムネイル画像のサイズは、Modelクラスに簡単なスタイル記述を追加することで指定可能になるが、使える記号と加工された画像サイズが分かりづらかったので調べてみた。 下記の表にまとめてあるので参考になれば。なお、元の画像は横長(400x200px)と縦長(200x400px)の2種類を用意し、それぞれ同じスタイル指定でサムネイル加工している。 スタイル指定とサムネイル加工の動作対応表 スタイル指定 400×200 200×400 備考 100×100 100×50 50×100 100×100>と同じ 100×100! 100×100 100×100 アスペクト比を無視して

    Rails4+Paperclip(ImageMagick)のサムネイルサイズ一覧 | noriaki blog
  • HTTP status code for update and delete?

    For a PUT request: HTTP 200, HTTP 204 should imply "resource updated successfully". HTTP 201 if the PUT request created a new resource. For a DELETE request: HTTP 200 or HTTP 204 should imply "resource deleted successfully". HTTP 202 can also be returned by either operation and would imply that the instruction was accepted by the server, but not fully applied yet. It's possible that the operation

    HTTP status code for update and delete?
  • Language for Life - Babbel.com | Babbel

    One of the first things you should learn when starting a new language is how to say yes and no. They’re two simple words that you’re going to need to use quite a bit. It may seem like a simple thing, but learning these phrases across as many languages as possible is probably a pretty good idea. You never know when you’ll run into a situation where one of these simple terms can help a great deal —

    suginoy
    suginoy 2014/01/29
    "Babbel is the new way to learn a foreign language."
  • ワクワクが止まらない!!生まれて初めて電車に乗る3歳の女の子の反応がめちゃくちゃカワイイ!! | コモンポストムービー

    3歳の女の子マデリーンちゃんは、3歳の誕生日に生まれて初めて電車に乗りました。少女のワクワクする気持ちがヒシヒシと伝わる映像をご覧ください。 近づいてくる電車にワクワクしながらじーっと見つめるマデリーンちゃん。電車がホームにやってくると「ワーオ」を声を上げて、目をまん丸にしています。そして電車の扉が開くと、父親に手を引かれて電車に乗り込んでいきました。 毎日のように電車に乗っている人にとってはなんともない光景ですが、3歳の女の子にとっては初めての出来事ばかりでワクワクが止まらないようですね。初めて電車に乗る少女をとらえた映像でした。