Category Archives: 実技 (スマートフォンサイト作成実習)

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

-本日のアジェンダ-

1限目
実技 スマートフォンサイト作成実習②
実機検証ついて

2限目
実技 スマートフォンサイト作成実習②
Webサイトの納品について

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

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

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

本日のテーマ

実機検証は最後にしっかりと

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

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

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

ワンポイントアドバイス

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

実機検証 について

スマホによる実機検証は、新しく開発したアプリやWebサイトを利用者が実際に使う端末機を使ってテストを行うことで、問題や不具合を発見し、品質を向上させるもの。 世にWebサイトやアプリをリリースするための重要な作業の一つです。

ワンポイントアドバイス

サイトが出来たら、出来る限りの実機検証を行ってみましょう。
実機でしかないバグや見た目の違いが多くありますので、サイトが一通り形になったら実機検証を出来る範囲で行ってみましょう。

参考サイト

Webサイトの納品 について

サイトが完成したら後は納品です。納品方法は色々なパターンがありますので、ご依頼を頂いたお客様としっかりと確認をして納品を行いましょう。

ワンポイントアドバイス

FTPでサーバにUPして納品となるのが一般的ですが、データ納品となる場合もよくあります。ファイル名や無駄なファイルが残っていないように気を付けて納品を行いましょう。

参考サイト

練習課題

オンライン期間中のコーディング練習

Dropboxの練習用ファイルで力をつけましょう!
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。

・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。

本日の提出物はありません。

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

-本日のアジェンダ-

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つのルールで書いてみましょう。

参考サイト

就職活動に役立つサイト

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

練習課題

オンライン期間中のコーディング練習

Dropboxの練習用ファイルで力をつけましょう!
ファイル場所・・・資料 /【4】コーディング / 「コーディング練習 」
【練習①】「cording_saito_20201001.zip」
PDFにある問題を解いてみましょう。
【練習②】「cording_nakano_20210902.zip」
JPEGのデザインラフを目指して、CSSの「プロパティ」と「値」を組みましょう。

・完成したものは訓練中の成果としてポートフォリオに載せていただいて構いません。
・画像やバナーの入れ替えなど、自由にアレンジを加えていただいても構いません。
・提出課題ではありませんのでご自身のペースで挑戦してみて下さい。

本日の提出物はありません。