ウェブ学のすすめ

Study of Web Design & Programing

Smartphone

CSS3メディアクエリを使った可変レイアウト+固定レイアウト

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

CSS3メディアクエリを使った固定レイアウト(コンパクトメニュー版)

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

CSS3メディアクエリを使った固定レイアウト

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

スマートフォン対応デモサイト【4】フォーム

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

スマートフォン対応デモサイト【3】フラワーショップ

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

スマートフォン対応デモサイト【2】

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

スマートフォン対応デモサイト【1】

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