HTML&CSS

スマホサイトのナビゲーションの例は新しい記事を書きましたのでそちらも参考にしてください。（2015/10/23） ハンバーガーボタンをクリックするとナビゲーションがアコーディオン状で展開されます。 jQueryを使用していますが、簡...

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

1ページリニア構造ぺーじの例です。 ポートフォリオサイト用などにも活用できそうです。 ＊IE対策は別途必要になります。 １カラムのレイアウトのサンプル HTMLのコード CSSの設定 一部のsectionに...

Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付けてくれます。 ...

2015/11/16追記 幅などの値に小数が出る場合は、IE旧バージョン以外ではcalc()を使用しましょう。 calc()についての詳細はこちらのページ スマートフォンサイトを作成する場合、幅などの指定を固定幅で指定するのではな...

meta要素でのページ拡大率の設定 ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。 meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することもできます。 拡...

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

スマートフォンの表示画面のサイズの仕組み 画面の横幅の表示方法 PCのブラウザでWebページを表示する場合に横幅の寸法はピクセル数で表すことができます。 例えばwidth:980pxとすれば横幅は980pxとなります。 ところが...