PC用、タブレット用は固定レイアウトですが、スマートフォンでは可変レイアウトになるデザインを作成しました。広告の部分はAmazon アソシエイトからお買い得のスマホ用品を表示しています。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利…

先日作成した「CSS3メディアクエリを使った固定レイアウト - ウェブ学のすすめ」のメニューをコンパクトにしたバーションです。CSS3のtransitionとtargetを使用し、メニューを折りたたみタップすることで内容が見えるようになっています。※現在はIE対策をし…

昨日はパーセント指定でウィンドウサイズを変更するにつれて可変するレイアウトを作りましたが、今日は画面サイズによって固定したレイアウトが表示されるデモサイトを作成しました。※現在はIE対策をしていないのでIE8以下で見るとスタイルシートが利いてい…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_6のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【4】フォーム ↓QRコード ※おすすめQRコード読み…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_5のサンプルサイトをカスタマイズしてみました。プレビュー ↓別ウィンドウを開いて見る スマートフォン対応デモサイト【3】フラワーショップ ↓QRコード ※おすすめQRコ…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_4のサンプルサイトをカスタマイズしてみました。 イラストはAI・EPSの無料イラストレーター素材なら無料イラスト素材.comから入手し、Photoshopでサイズ変更 プレビュ…

「HTML5＋CSS3で作る 魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_3のサンプルサイトをトップページだけですがカスタマイズしてみました。 ロゴ画像はPhotoshopで作成 その他画像は「写真素材 足成【フリーフォト、無料写真素材サイト…