HTML&CSS レイアウト例１
1ページリニア構造ぺーじの例です。
ポートフォリオサイト用などにも活用できそうです。
＊IE対策は別途必要になります。
１カラムのレイアウトのサンプル
HTMLのコード
CSSの設定
一部のsectionに...
dororo
HTML&CSS HTML&CSS jQuery Mobileの使い方
準備
jQuery Mobileのページに行って必要なライブラリをダウンロードまたはリンクします。
リファレンス参考
data-role
transition
テーマ作成
作成
sample.html
...
HTML&CSS flex レイアウト詳説〜Flex Box Layout
レイアウト作成のためのCSS
CSS2.1 にて定義されているレイアウトモードは次の４つです。
文書を配置するために設計されたブロックレイアウト
テキストを配置するために設計された行内レイアウト
表を作成するためのt...
HTML&CSS Modernizrについて
Modernizrは、ブラウザーで使用可能な機能をCSSやJavaScriptを用いて確認できる便利なライブラリです。ユーザーが使用しているブラウザでHTML5の機能やCSS3を正しく使用できるか判定したclass名を付けてくれます。
...
HTML&CSS widthをパーセント指定する場合の小数点〜CSS
2015/11/16追記
幅などの値に小数が出る場合は、IE旧バージョン以外ではcalc()を使用しましょう。
calc()についての詳細はこちらのページ
スマートフォンサイトを作成する場合、幅などの指定を固定幅で指定するのではな...
HTML&CSS ページの拡大率の指定〜スマホサイト
meta要素でのページ拡大率の設定
ビューポートの設定はmeta要素で指定することができます。「ビューポートとは」を参照。
meta要素で指定できるのはビューポートの横幅だけではありません。ページの拡大率を設定することもできます。
拡...
HTML&CSS 高解像度デバイスの画像表示〜Retina対応
Retinaディスプレイをはじめとした高解像度のデバイスで画像表示をすると滲んで見える現象が起こります。
これはdensityにもとずいた解像度で表示するため拡大表示を行っているからです。
PCでも画像を単純に2倍の大きさに拡大するとギ...
HTML&CSS background設定解説〜CSS3
backgroundプロパティ〜CSS3
複数の背景画像による多層化
CSS3 では、ボックスの背景は，複数の 層 （ layer ）を持てます。複数の background-image の値は カンマで区切って区別します。 注目すべき...
HTML&CSS densityについて(device pixel radtio)
スマートフォンの表示画面のサイズの仕組み
画面の横幅の表示方法
PCのブラウザでWebページを表示する場合に横幅の寸法はピクセル数で表すことができます。
例えばwidth:980pxとすれば横幅は980pxとなります。
ところが...
HTML&CSS background設定解説〜CSS2.1
backgroundプロパティの基本
要素の背景には色または画像のいずれかを表示することができます。
ボックスモデルでのbackgroundプロパティは内容領域（コンテンツ）、パディング領域、に背景を設定することができます。
ボー...