タグ

2010年9月21日のブックマーク (6件)

  • HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)

    スマートフォンサイトのサイト設計、画面設計に続き、今回はデザインとHTML/CSSの制作です。前回作成したワイヤーフレームをもとにデザインカンプを作成し、HTML/CSSをコーディングしていきます。 Photoshopでデザインカンプを作成する 最初に、グラフィックソフトを利用してデザインカンプを作成します。今回はPhotoshop CS5を使いましたが、FireworksやIllustratorなど使い慣れたツールで構いません。 デザインにあたっては、スマートフォンのブラウザーの画面領域を定義したテンプレートを用意してからデザインパーツを作成、配置していきます。画面領域はサイズを測ってガイドを引いてもよいですが、連載の第5回で紹介したデザインテンプレートを利用するのが手軽です。

    HTML5/CSS3で作るスマートフォンサイトの基本 (1/5)
    gonta02
    gonta02 2010/09/21
    HTML5/CSS3で作るスマートフォンサイトの基本
  • 【新人Webデザイナー向け】Webドリル vol.2: このバナーもっと目立たせてください!

    【2位】A:オレンジ オレンジは、暖色系で高彩度なので、 興奮色、進出色として使うことができます。 △背景のベージュに対して、オレンジは同じ色みなのでなじんでしまいます。なので、この場合は2位にしました。 【3位】C:緑 背景の黄色に対して、緑は隣り合った色相なのでなじみます。 写真の植物とも近いので調和がとれています。 △きれいにまとまりますが、インパクトは弱まるかも。 デザイナーが陥りがちな色彩のワナ 目立たせたいとき、ワンパターンに、赤やオレンジをつい使ってしまう 目立たせたいのに、きれいにまとめてしまう 【目立たせルール!】反対色を試してみよう! 暖色の背景には寒色の文字、 寒色の背景には暖色の文字を使うと引き立ちます。 それ以外の中性色の場合は隣接していない色を選んでみましょう。 【目立たせルール!】グレースケールでコントラストを確認! ここで注意したいのは、反対色を使うだけでは

    gonta02
    gonta02 2010/09/21
    このバナーもっと目立たせてください!
  • もう国旗アイコンには困らない、世界各国240種類の国旗のアイコン集

    総務省によると世界の国の数は193(2010年1月1日現在)とのことですが、全部で240種類の国旗のアイコン素材を紹介します。 2400 Flag Icon Set [ad#ad-2] ダウンロードできるアイコンのフォーマットはPNGで、サイズは16, 24, 32, 48, 64の五種類、それぞれ立体感のあるものとフラットなものが揃っています。 アイコンのサイズは五種類 国旗アイコンのファイル名は、国名とカントリーコードの二種類があります。 アイコンの利用にあたっては個人でも商用でも無料で利用が可能です。 商用の場合は特に寄付を受け付けています、とのことです。また、足らない国旗があれば随時追加するので連絡をください、とのことです。

    gonta02
    gonta02 2010/09/21
    もう国旗アイコンには困らない、世界各国240種類の国旗のアイコン集
  • ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ

    ※文中のケータイ livedoorのPVに誤りがあり、修正いたしました (2010/9/22) こんにちは、『プチペット』を担当している吉沢です。 Webサービスのケータイ対応がやっと当たり前になってきたかと思ったら、今度はスマートフォンの対応と、モバイル業界の時の流れはものすごく速いですね。 そんな中、ケータイは新しい端末のシェアが増えていく度に、サイトで表現できる自由度が高くなり、単に作るだけではなく、デザインで差をつける時代が来ています。 それが読み取れる世の中の動きとして、たとえばモバイルデザインアーカイブさんは、年鑑が出るくらい書籍・サイト共に人気ですよね。また、ちょっと前に発売された書籍『ケータイサイト解体新書 デザインパターンから理解する実装テクニック』は、いろいろなデザインパターンからHTMLを引けるため、デザインをする上でとても参考になります。 携帯サイト年鑑2010 著

    ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース : LINE Corporation ディレクターブログ
    gonta02
    gonta02 2010/09/21
    ケータイサイトのtableタグの特徴と、5つのデザイン例&ソース
  • ATOK for iOS [Professional] | ATOK Passport |【公式】ATOK.com

    入力中の文字が標準キーボードと同じように 表示できるようになりました。 色々なアプリでもっと入力しやすくなります。

    ATOK for iOS [Professional] | ATOK Passport |【公式】ATOK.com
    gonta02
    gonta02 2010/09/21
    iPhone/iPod Touch用日本語入力アプリ
  • [CSS]条件付きコメントを使用した際にレンダリングを早くするテクニック

    IE用に条件付きコメントを使用してスタイルシートを配置した際に、ブラウザのレンダリングをすこし早くするテクニックを紹介します。 ※下記の画像はクリックで拡大 Conditional comments block downloads 上:test 1の測定結果(適用前:CSSの後に読み込み開始) 下:test 2の測定結果(適用後:CSSと並列で読み込み) [ad#ad-2] 下記は上記ページを参考にしたものです。 はじめに スタイルシートの構成 test 1:ごく普通に条件付きコメントを使用 test 2:条件付きコメント使用時に並列読み込みを可能にする その他の解決方法とまとめ はじめに 条件付きコメントを使用しない場合は通常、CSSファイルと次のファイルが並列で読み込まれます。 条件付きコメントを使用した場合 詳しくは後述のtest 1:ごく普通に条件付きコメントを使用を参照 これを並

    gonta02
    gonta02 2010/09/21
    条件付きコメントを使用した際にレンダリングを早くするテクニック