くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

レスポンシブWebデザイン

[RWD][CSS3]レスポンシブデザインのサイト制作・animationで画像を動かす

今日の授業 レスポンシブwebデザインのサイトの作成(テスト) CSS3のアニメーション レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。レスポンシブデザインのサイト(CASA BLANCA) CSS3のアニメーション アニメーションの…

[レスポンシブ]レスポンシブWebデザイン④

スマートフォン用のメインコンテンツとフッターの設定編。 設定前はこんな状態です。 メインコンテンツの設定(スマートフォン用) ①テキストと画面の空きがなく、ギリギリなので空きをつくります。 PC用を想定するならば全体の幅は一定なのでpaddingを設定…

[レスポンシブ]レスポンシブWebデザイン③

ヘッダーとナビゲーションの設定をレスポンシブWebデザイン(以下「レスポンシブ」)用に行います。 <ヘッダー> header ヘッダー部分はレスポンシブ用の設定は特になし。 ヘッダーテキストを中央揃えにする ロゴ上下の空きを24pxにする 「豆はカラダにいい…

[レスポンシブ]レスポンシブWebデザイン②

あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整するのがレスポンシブWebデザイン。 次にCSSを書いていきます。レスポンシブWebデザインでは、CSSの記述効率とファイルサイ…

[レスポンシブ]レスポンシブWebデザイン①

「レスポンシブ」とか色々な呼び方がありますが正確な名前は「レスポンシブWebデザイン」。 ASCIIさんの「ゼロから始めるレスポンシブWebデザイン入門」に沿って、基礎から学んでいきます。概念などはおいおい書いていくとして、今回はいきなりレスポンシブW…