タグ

2014年7月1日のブックマーク (3件)

  • 1分で使える!Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備 | BLOG ROOM9(ブログルームナイン)

    ども、未だFireFoxもモリモリ使う Qtaro(@Daisuke_9taro)です。 Web屋、ブログ運営者ならサイトのブラウザチェックは必須ですよね。 特に昨今モバイルサイトのデザインのチェックは超重要。そのためにやれ拡張機能やら、やれアドオンやら。それはもうあれこれ準備してね。ハイハイやっとこさスマホ側も確認できますよーと、ね。うんうん。。 その準備不要です 「。。え?」と思った方はもしかしてご存知ない方かもしれません。 今お使いのブラウザはChromeでしょうか? もしそうであれば何も考えず 10秒 くらいでササッとこの記事を流し読みしてみてください。ちょっとハッピーになれるかもしれません。 [toc] 標準機能でスマホのブラウザチェックする方法 そんなワケでGoogle Chromeの標準機能を使った、スマホサイトのブラウザチェック方法です。使い方は超簡単。 まずはChrome

    1分で使える!Google Chromeならスマホのブラウザチェック機能はデベロッパーツールに標準装備 | BLOG ROOM9(ブログルームナイン)
  • [CSS]フラットなデザインに使いたい!タップ時の新しいエフェクト「波紋」のアニメーションを実装するテクニック

    Googleが先日発表したAndroid Lで使われる新しいUX「Material Design」で採用されているようなタップすると波紋のように円が広がるエフェクトを実装するテクニックを紹介します。 タップやクリックでよく見かけるのは、押した感じにへこむエフェクトでしたが、この波紋はフラットにあっててなかなかいいエフェクトですね。 Material Design 波紋状のエフェクトのコードは、下記のようになります。 HTML div要素で矩形のボタンを作成します。ラベルはスタイルシートのcontent属性で配置しています。 <div id="button" class="android-btn"></div> <div id="button2" class="android-btn ink"></div> CSS エフェクトのアニメーション、ボタンのサイズや波紋の大きさは、スタイルシートで

  • 16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL

    ホームページのデザインっていろいろあって、どれが自分のビジネスにふさわしいものか迷ったことはありませんか? 個人で事業をやっている方だと、そのような疑問を持つ方も多いのではないでしょうか。 でも実は、業種ごとの王道デザインを知っていれば悩む必要なんて何もないのです。 今回は、全16業種にわたる王道のホームページデザインをお伝えしたいと思います。 外注を活用したホームページデザインの業務切り出しフロー 1. 美容院のホームページデザイン【王道】 おしゃれな髪型の女性の大きめな写真を載せるデザイン 【実例】 Nine9 / ナイン MerryLand 美容室 pukka hair 美容院のホームページデザイン ポイント「おしゃれな髪型をしている女性の写真を載せる」 美容院のホームページの王道デザインは、お店のロゴが左上、メニューがその横にあり、その下には、おしゃれな髪形をしている女性の大き目な

    16個の業種別で学ぶ「ホームページデザイン」の王道パターン | LISKUL