96's blog

WEBサイト制作科 6ヶ月コース

レスポンシブ

レスポンシブWebサイト制作の目標地点

タイ国政府観光庁

レスポンシブ(魅せる!iphoneサイト)

ポートフォリオサイトはレスポンシブで作りましょう。 レスポンシブでないものは検索評価が落ちる傾向。 PC(win)でモバイルチェックするにはMobilizer。 子孫セレクタを使おう スマートフォン用のリセットCSS 作例1 テキストp53 HTML head viewportの設定…

レスポンシブWebデザイン05(可変+固定)

ブログ・HTML5の勉強「可変+固定レイアウトパターン:構造」

レスポンシブWebデザイン03(デバイスごとの外部CSSの切り替え)

ブログ・HTML5の勉強「実践レイアウトパターン(1)」 外部CSSを切り替える head内に以下を記述 <linkrel="stylesheet"href="○○.css"media="only screen and (min-width:○○px)"> サイト全体共通+スマートフォン用CSSを読み込み、次にタブレット用CSS、PC用CSSを読み込む。 今回制作したサイト style-s.css、style-m.css、style-l.cssを使</linkrel="stylesheet"href="○○.css"media="only>…

レスポンシブWebデザイン02(MediaQuery)

ブログ・HTML5の勉強「Media Queries基礎」 PC上で各デバイス表示(Mac・Winやスマートフォン・タブレット)に切り替え safariを使用。 右上の歯車アイコンのメニューから[設定]を開く。 [詳細]タブの一番下の[メニューバーに”開発”メニューを表示]にチェッ…

レスポンシブWebデザイン01

ASCII.jp WEB PROFESSIONALのシリーズ記事「ゼロから始めるレスポンシブWebデザイン入門」をもとにサイト作成。 レスポンシブにするには 1.metaでスマートフォンデバイス表示に対応させる <metaname="viewport"content="width=device-width"> 2.画像サイズをブラウザサイズに応じて可変させる img{max-width:10</metaname="viewport"content="width=device-width">…