タグ

2012年6月12日のブックマーク (7件)

  • iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ

    iPhoneがでた当初はWebApp押しだったAppleも3Gを出してからすぐにネイティブアプリに手のひらを返してしまって、WebAppはすっかり影がさしてしまいました。 それでも、jQTouchやSencha Touch、jQuery mobileなどWebAppの開発支援となるJavascriptライブラリが登場して一部では盛り上がったりもしています。PhoneGapみたいにWebAppをネイティブにパブリッシュするツールや、Titanium MobileのようにWeb言語ベースで開発してネイティブにするものもありますし、いろいろですね。 iOS4までのMobile SafariではCSSの一部のプロパティが使えなかったりで、よりリッチなWebAppをつくろうと思えばJavascript必要でした。 先日公開されたiOS5では今まで「なんで使えないの?」といったところが少し修正されて、

    iOS5のMobile Safariから使えるようになったHTML5・CSSを試してみました【前編】 - くらげだらけ
    hukuchosan
    hukuchosan 2012/06/12
    iOS5では1本指でスクロールできるようになりました。ただし、そのままのスクロール(overflow:autoやscrollのみ)で描画されるものは慣性がついていなくて動かしづらいスクロールになってしまいます。 そこで-webkit-overflow-scroll
  • 7 Responsive Navigation Patterns - Vanseo Design

    Once you get comfortable developing flexible layouts and moving around the big boxes of a responsive design, your attention will turn inwards toward the smaller boxes inside the big picture containers. First among those will likely be navigational systems. As you work with responsive sites you’ll quickly discover that the navigation bars and menus you create for a widescreen browser don’t work so

    7 Responsive Navigation Patterns - Vanseo Design
  • デザインの試行錯誤とラグをなくすプロセス

    ワイヤーフレームやスケッチで、ある程度カタチになっているアイデアも、スクリーン上に実際に描いてみないと分からない場合があります。ラフでは良い感じに見えるものでも、いざ色を付けたりレイアウトを組み上げていくと「あれ?」と思うこともしばしば。ワイヤーフレームやスケッチとして出てきた設計図をそのまま型にすれば上手くいくというわけでもないのが、デザインの難しいところであると同時におもしろいところです。 Photoshopや、Fireworksを使って、1ピクセルずつずらしながらレイアウトの調整をしたり、ガラッと雰囲気を変えた見た目を試すといった試行錯誤をしている方はいると思います。ただ設計通りに作るのではなく、試行錯誤を続けることでより洗練されたデザインになることもあれば、まったく新しいアイデアが生まれるキッカケになることもあります。 スケッチにしろ、グラフィックソフトを使うにしろ、試行錯誤をする

    デザインの試行錯誤とラグをなくすプロセス
    hukuchosan
    hukuchosan 2012/06/12
    テクノロジーが人間の思考の妨げになっていることがある Web デザインプロセス。だからこそ、思考とアウトプットの摩擦が少ない、ローテクな紙を使った手法や、視覚的に扱えることができるグラフィックソフトが支持さ
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 ※1 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 ※1 レジストラ「GMO Internet, Inc. d/b/a Onamae.com」のシェア値を集計。 ※1 2020年8月時点の調査。

    hukuchosan
    hukuchosan 2012/06/12
    1.湯が冷めないよう、なるべく大きめのボウルに50℃の湯を入れる。 2.食材全体を湯にひたし、野菜は1~3分(トマトは5分)、果物はバナナなら5分(皮の薄いものは2~3分)、魚・肉は2~3分(冷凍ものは5~7分前後)を目
  • [JS]Responsiveデザイン用のスタイルシートファイルのロードを最適化するスクリプト -eCSSential

    Responsiveデザイン用に用意した複数のスタイルシートファイルのロードを最適化する超軽量(2KB)のスクリプトを紹介します。 eCSSential -GitHub [ad#ad-2] スタイルシートファイルのロードの注意点 eCSSentialとは eCSSentialの使い方 スタイルシートファイルのロードの注意点 スタイルシートファイルのローディングの最適化、あるいは優先順位をつける方法は非常に難しいです。ウェブサイトがクリーンなロードをするためには、ページレイアウトのレンダリングに必要なスタイルシートがドキュメントのhead内に配置されなくてはいけません。 もし、スタイルシートがドキュメントより後ろに配置、あるいはJavaScriptで動的に配置される場合は、ページのレンダリングと共ににスタイルシートのロードが始まってしまうので、ページの表示が遅くなります。 Responsiv

    hukuchosan
    hukuchosan 2012/06/12
    eCSSentialはResponsiveデザイン用にファイルをダウンロードするように設計された軽量のスクリプトです。 head内に配置し、現在の表示サイズやデバイスに必要なスタイルシートだけをロードし、ロードさせるべきではないもの
  • CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」:phpspot開発日誌

    jQuery Transit - CSS3 animations for jQuery CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」。 CSS3のanimationtransitionアニメーションがありますが、これをjQueryのanimate風にしてより直感的に使いやすくするものです CSS3にアニメーションを書くのは気持悪いという方は、こうしたライブラリを活用してみるとよいですね 使い方は以下のように、animateの代わりに transition というメソッドを使うというものです。 $('.box').transition({ x: '90px' }); コードとデモの例 他にも3Dに回転するアニメーションやイージング等、アニメーションはこれでOKというぐらい多彩なアニメーションが可能です。 組み合わせることでダイナミックな表現

    hukuchosan
    hukuchosan 2012/06/12
    CSS3のanimation、transitionアニメーションがありますが、これをjQueryのanimate風にしてより直感的に使いやすくするものです
  • 見ているウェブページのカラーが気になったらすぐにチェック! -ColrGrabr

    ColrGrabr [ad#ad-2] ColrGrabrの使い方は簡単です。 「Enter URL here」にカラーをチェックしたいページのURLを入力し、「grab colors!」ボタンをクリックするだけで、カラーの抽出が始まります。

    hukuchosan
    hukuchosan 2012/06/12
    ColrGrabrの使い方は簡単です。 「Enter URL here」にカラーをチェックしたいページのURLを入力し、「grab colors!」ボタンをクリックするだけで、カラーの抽出が始まります。