CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
スマートフォン専用ページを作成する際に知っておきたいポイント｜Webpark
最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
MdN Design｜総合情報サイト
iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。 Androidでは機種により異なるが、1.5倍のものが多い。 同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。 しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。 そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。 【1】スマートフォンのdevicePixelRatioと解像度の一例
Androidスマートフォンの壁紙サイズの法則が見えてきたぞ | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
2010年冬、携帯キャリア各社から続々とAndroidスマートフォンが発売されました。シンメトリックでは新発売スマートフォンのスペックを調査しており、私も実機を使っての調査に携わっています。2010年秋以降は、この調査ワークが忙しくなり、世のスマートフォンブームを実感しています。 調査するスマートフォンの機種スペック項目には、実機を触らなくても情報収集でほぼ確実に予測できるものもあります。それらには、一定の法則性や制約が存在するからです。しかし壁紙サイズは、実機で調査しなければ判らない項目でした。なぜなら私が調査に関わり始めた2010年夏頃は、Androidスマートフォンがまた２，３機種程度と少なく、三者三様で何の法則性もないように思えたからです。 あれから半年ほど、モバイル業界はAndroidで一層盛り上がっています。2010年秋冬は次々とAndroidスマートフォンが発売されました。私
iPhone/Androidの壁紙サイズ｜スマートフォン｜モバイル／スマートフォン｜PHP & JavaScript Room
Xperiaの壁紙サイズ 2010/9/26 Xpreia、HT-03A、DesireなどのAndroid端末は、ホーム画面を左右にずらして3画面（左・中央・右）使えるようになっています。 ホーム画面領域の横を4等分して、左から2つブロックずつ合わせた領域が、各画面で壁紙でみえる領域となります。 ただし、設定した壁紙からホーム画面の「ステータスバー」と下部「アプリケーションメニュー」にかぶる部分は隠れてしまいます。 Xperiaの場合、ロック中画面では「ステータスバー」（上から約14px）と下部「アプリケーションメニュー」（下から約16px）、設定した壁紙からそれらを除いた領域がみえることになります。 ※ホーム画面ではアプリケーションメニューを展開するつまみが表示されるため下から約56pxを除いた領域。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
