HTML&CSS

Modernizrについて

Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付けてくれます。 Modernizrのダウンロードはこちらのページです。 Mode  >>続きを読む

widthをパーセント指定する場合の小数点〜CSS

2015/11/16追記 幅などの値に小数が出る場合は、IE旧バージョン以外ではcalc()を使用しましょう。 calc()についての詳細はこちらのページ スマートフォンサイトを作成する場合、幅などの指定を固定幅で指定するのではなくパーセンテージで指定します。 そうすることで可変レイアウトに対応する  >>続きを読む

ページの拡大率の指定〜スマホサイト

meta要素でのページ拡大率の設定 ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。 meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することもできます。 拡大率は「initial-scale=値」を使用します。値は数字を入  >>続きを読む

高解像度デバイスの画像表示〜Retina対応

Retinaディスプレイをはじめとした高解像度のデバイスで画像表示をすると滲んで見える現象が起こります。 これはdensityにもとずいた解像度で表示するため拡大表示を行っているからです。 PCでも画像を単純に2倍の大きさに拡大するとギザギザが現れたりします。これがつまり滲んで見える原因になります。  >>続きを読む

background設定解説〜CSS3

backgroundプロパティ〜CSS3 複数の背景画像による多層化 CSS3 では、ボックスの背景は,複数の 層 ( layer )を持てます。複数の background-image の値は カンマで区切って区別します。 注目すべき点は値 none に対してもひとつの層が作成されることです。 複  >>続きを読む

densityについて(device pixel radtio)

スマートフォンの表示画面のサイズの仕組み 画面の横幅の表示方法 PCのブラウザでWebページを表示する場合に横幅の寸法はピクセル数で表すことができます。 例えばwidth:980pxとすれば横幅は980pxとなります。 ところがデバイスが変わると困った事が起こります。 解像度が変わると単純にピクセル  >>続きを読む

background設定解説〜CSS2.1

backgroundプロパティの基本 要素の背景には色または画像のいずれかを表示することができます。 ボックスモデルでのbackgroundプロパティは内容領域(コンテンツ)、パディング領域、に背景を設定することができます。 ボーダーの色とスタイルはボーダーのプロパティで設定されますが、実はボーダー  >>続きを読む

Google Chromeの最小フォントサイズ

Google Chromeでは最小フォントサイズが10pxに設定されています。 10px以下でフォントサイズを指定してもすべて10pxで表示されます。 つまり、10px以下のフォントサイズを使用するとChrome以外のブラウザと表示が変わりレイアウト崩れの原因につながります。 Google Chro  >>続きを読む

アートボードが透明になった〜Illustrator

illustratorで誤ってShift+Command+Dキーに触れたらアートボードが透明になります。 更にペーストボードが格子模様に変わります。 あれ?となってなかなか回復できなくて困るパターンです。 これはShift+Command+Dキーを再度使用するか、メニューの表示>「透明グリッドを隠す  >>続きを読む