HTML&CSS

レイアウト例2

1ページのタブ型レイアウトです。 タブ型のナビゲーションでページ遷移するように見せていますが、各ページはすべて1ページ内のセクションを移動しているだけです。 この例はjQueryを使用します。 jQuery使用のポイントはこちら タブ型レイアウトのサンプル HTMLの例 <header>  >>続きを読む

レイアウト例1

1ページリニア構造ぺーじの例です。 ポートフォリオサイト用などにも活用できそうです。 *IE対策は別途必要になります。 1カラムのレイアウトのサンプル HTMLのコード <section class="back1"> <div class="inner  >>続きを読む

jQuery Mobileの使い方

準備 jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。 リファレンス参考 data-role transition テーマ作成 作成 sample.html HTML5の準備をします。 viewportの設定 jQuery Mobileのリンク コーディン  >>続きを読む

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倍の大きさに拡大するとギザギザが現れたりします。これがつまり滲んで見える原因になります。  >>続きを読む

densityについて(device pixel radtio)

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

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

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

ビューポートとは 〜HTML

ビューポートについて スマートフォンのブラウザではViewportという仮想ウインドウサイズが設定されています。 もう少しわかりやすい言葉で説明すると、スマートフォンの画面は本来の解像度で表示するのではなく、仮想の解像度で表示を行います。 つまり、表示画面を指定したサイズ(解像度)が見れるように拡大  >>続きを読む