実技 スマートフォンサイト作成実習②

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習②
Box modelの確認

2限目
実技 スマートフォンサイト作成実習②
UI/UXについて

3限目
実技 スマートフォンサイト作成実習②
課題制作

4限目
実技 スマートフォンサイト作成実習②
課題制作

5限目
実技 スマートフォンサイト作成実習②
課題制作

本日のテーマ

Box model のおさらいが大事です!

レスポンシブWEBデザイン(RWD)とは?

「レスポンシブWEBデザイン(Responsive WEB Design)」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML(ワンソース)で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ(レスポンシブWebデザイン基礎)

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

Box model のおさらい

Web 開発では、CSS ボックス モデルは、HTML 要素がブラウザー エンジンでどのようにモデル化され、それらの HTML 要素のサイズが CSS プロパティからどのように導出されるかを指します。これは、HTML Web ページを構成するための基本的な概念です。 ウィキペディア(英語)

ワンポイントアドバイス

ボックスモデルで大切なことは、見た目では無くCSSのコードで記述した数値を頭でしっかり描く事が重要になります。
見た目だけ良ければという考えにならないように気を付けましょう。

参考サイト

UI/UX とは?

さまざまデバイスに対応したコンテンツを作るには、環境・時間・空間・性別・年齢・人数…等々
それらを「User Interface:ユーザインターフェイス」や「User Experience:ユーザエクスペリエンス」と
いう言葉で表現されています。ここで活きるのは「体験という経験」になるでしょう。

ワンポイントアドバイス

「使い易い」「役に立つ」「解りやすい」をポイントにデザイン設計を考えてみましょう。

参考サイト

第4回成績考査

9月6日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

近年、Webサイトの重要性と必要性は年々増えています。またそのWebサイトを制作する技術者も増えていますが、技術は多様化して情報は様々な内容が飛び交っています。HTMLの基本文法とCSSの基本文法を理解したら、後は使い方です。当然、この使い方が人によって異なります。
デザインをやるのかコードを書くのか、前職などのキャリアをどう活用するのか?働き始めても常に学ぶことが必要とされる為、自己学習能力や自己解決能力、自己の管理責任能力などを求められます。
ここから約1月の訓練はWEBサイト制作をするのみです。
それによって、当然皆さまそれぞれ必要となる技術と活動が異なるでしょう。まずは就職に向けての行動して、ご自身の宿題を見つけていきましょう。

実技 スマートフォンサイト作成実習①

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習①
Viewportついて

2限目
実技 スマートフォンサイト作成実習①
Media Queriesについて

3限目
実技 スマートフォンサイト作成実習①
課題制作

4限目
実技 スマートフォンサイト作成実習①
課題制作

5限目
実技 スマートフォンサイト作成実習①
課題制作

本日のテーマ

スマホ対応はCSSの延長線です。

レスポンシブWEBデザイン(RWD)とは?

「レスポンシブWEBデザイン(Responsive WEB Design)」は、PC、タブレット、スマートフォンなど、デバイスの画面サイズよってResponsive=反応するWEBデザインという意味で、WEBサイトを単一のHTML(ワンソース)で実現する制作手法です。ブラウザのスクリーンサイズを基準にCSSでレイアウトすることで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWEBサイトを制作できます。

サンプルページ(レスポンシブWebデザイン基礎)

ワンポイントアドバイス

昨今のWebサイトでレスポンシブWebデザインは必須とも言える技術になります。使い方が様々ですが、特にメディアクエリはCSSの基礎理解がとても重要になります。シンプルに整理して覚えていきましょう。

参考サイト

Viewport とは?

viewport(ビューポート)とは、日本語に訳すと「表示領域」という言葉がしっくりくると思います。例えば、デスクトップ環境(PCなど)のブラウザなどでは、ブラウザウインドウの表示領域がviewportになります。… 表示のされ方は、制作者がmeta要素のviewportで指定することができます。

ワンポイントアドバイス

viewport はサイト制作の時最初の1度しか書かないので、単純に入れ忘れに注意しましょう。

参考サイト

Media Queries とは?

メディアクエリは、CSS スタイルに適用できるシンプルなフィルタです。メディアクエリを使用すると、画面の種類、幅、高さ、向き、解像度など、コンテンツをレンダリングするデバイスの特性に基づいて、スタイルを容易に変更できます。

ワンポイントアドバイス

メディアクエリは様々な記述方法がありますが、まずは1つのルールで書いてみましょう。

参考サイト

就職活動に役立つサイト

情報収集に役立つ参考サイト

第4回成績考査

9月6日の5限目までに、Webページを提出してください。
サイト内容は、自由です。
※是非、就職活動に活かせる作品を作成してみてください。

次回の成績考査に向けて

近年、Webサイトの重要性と必要性は年々増えています。またそのWebサイトを制作する技術者も増えていますが、技術は多様化して情報は様々な内容が飛び交っています。HTMLの基本文法とCSSの基本文法を理解したら、後は使い方です。当然、この使い方が人によって異なります。
デザインをやるのかコードを書くのか、前職などのキャリアをどう活用するのか?働き始めても常に学ぶことが必要とされる為、自己学習能力や自己解決能力、自己の管理責任能力などを求められます。
ここから約1月の訓練はWEBサイト制作をするのみです。
それによって、当然皆さまそれぞれ必要となる技術と活動が異なるでしょう。まずは就職に向けての行動して、ご自身の宿題を見つけていきましょう。