レスポンシブWebデザイン
今日の授業 レスポンシブwebデザインのサイトの作成(テスト) CSS3のアニメーション レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。レスポンシブデザインのサイト(CASA BLANCA) CSS3のアニメーション アニメーションの…
スマートフォン用のメインコンテンツとフッターの設定編。 設定前はこんな状態です。 メインコンテンツの設定(スマートフォン用) ①テキストと画面の空きがなく、ギリギリなので空きをつくります。 PC用を想定するならば全体の幅は一定なのでpaddingを設定…
ヘッダーとナビゲーションの設定をレスポンシブWebデザイン(以下「レスポンシブ」)用に行います。 <ヘッダー> header ヘッダー部分はレスポンシブ用の設定は特になし。 ヘッダーテキストを中央揃えにする ロゴ上下の空きを24pxにする 「豆はカラダにいい…
あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。 次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイ…
「レスポンシブ」とか色々な呼び方がありますが正確な名前は「レスポンシブWebデザイン」。 ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。概念などはおいおい書いていくとして、今回はいきなりレスポンシブW…