
本講座にご関心をお寄せいただき、誠にありがとうございます。
こちらの動画では、本講座の概要についてご説明していますので、受講前にご視聴いただければ幸いです。
本レクチャーでは、シリーズ「WEBデザイン講座」について、「学習の流れ」や「各講座の概要」についてご説明いたします。
なお、本レクチャーはスキップしていただいても結構です。
本動画レクチャーでは、本講座が含まれているシリーズ「WEBデザイン講座」について、「学習の順番」や「各講座の概要」について、詳しくご説明しています。
※シリーズ講座共通の動画となります。
学習の進め方
学習する環境
本講座のQ&Aサポートをご利用になる前には、必ずご確認のほどよろしくお願いします。
※サポート対象などについて説明しております。
Udemyの動画視聴画面の説明レクチャーです。
【対象】
はじめてUdemyをご利用になる方
動画視聴方法についてまだよくご存知ない受講生の方
※storeGが公開している全講座(コース)共通のレクチャーとなりますので、不要な場合はスキップしていただいてOKです。
本講座でも、Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
そのため、字幕内容が正しい言葉に置き換わっていない部分がありますので、予めご了承ください。
なお、字幕は受講者さまの方で、表示のオン・オフ、表示位置、フォントサイズなどを設定していただけますので、お好みに応じて設定していただければ幸いです。
コーディング前の準備
教材の使い方
本セクションでは、CSSグリッドレイアウトの基本について学習します。
グリッドコンテナ (親要素)
グリッドアイテム (子要素)
グリッドレイアウトに行と列を定義する
グリッドセル
グリッドトラック
grid-template-columns
grid-template-rows
単位 fr
repeat関数
grid-template-rows
grid-auto-rows
minmax関数
grid-column
grid-column-start
grid-column-end
grid-row
grid-row-start
grid-row-end
grid-template-areas
grid-area
グリッドセル間の余白
column-gap
row-gap ※grid-row-gap
gap
スマートフォン用 グリッドレイアウト
ジェネレーター編
スマートフォン用 グリッドレイアウト
エディタ編①
スマートフォン用 グリッドレイアウト
エディタ編②
タブレット用 グリッドレイアウト
ジェネレーター編
エディタ編
PC用 グリッドレイアウト
ジェネレーター編
エディタ編
「Drawer」の紹介
Top
Left
Right
Navbar ( Top・Left・Right )
Fixed Navbar ( Top・Left・Right )
Sidebar ( Left・Right )
Dropdown
Drawerに必要なファイルを設定する。CDNを使用
Drawerに必要なHTMLを追加する。
Drawerを呼び出すために必要なコードを追加する。
Drawerのカスタマイズ
Navbar Right
ロゴを画像ファイルに変更する。
メニュー項目を変更する。
「bxslider」のインストール
bxSliderに必要なファイルを設定する。CDNを使用
bxSliderに必要なHTMLを追加する。
bxSliderを呼び出すために必要なコードを追加する。
スライダーのカスタマイズ
自動でスライドする。
矢印を非表示にする。
これまで作成してきた
グリッドレイアウト
ドロワーメニュー
スライダー
をまとめて、WEBページを完成させます。
全体的な表示の最終調整をします。
文字サイズの調整
コピーライトの入力
メニュー表示の調整
メニュー表示のカスタマイズ
「AIに奪われる仕事・奪われない仕事」という言葉を、一度は耳にされたことがあるかと思います。
はたして近い将来、このような世界が現実になるのでしょうか?
WEBデザイン(デザインカンプの制作)と、
HTMLやCSSなどのコーディング
これらの仕事がこの先、AIに代替されてしまうのか?について、ひとつずつ見ていきましょう。
注意:
現在、AIは驚異的な速さで進化しているため、この先、動画内容が時代遅れになる可能性があります。その場合は、本動画を削除することもありますので、予めご了承ください。
ChatGPTやその他のAIチャットを使って、人間が要望する「HTMLやCSS」をどのくらいの精度でコーディングできるのか?という検証を、2023年3月上旬に行いました。この後に視聴できる動画は、さらにその後(2023年7月上旬)に検証した動画となります。
Bracketsの提供が終了したため、代替ツールとしてVScodeのインストール方法についての動画を追加します。
※特典レクチャーのため動画内容以外のサポートはお受けできませんので、予めご了承ください。
Visual Studio Codeのテーマ変更
※特典レクチャーのため動画内容以外のサポートはお受けできませんので、予めご了承ください。
ファイルの保存
ミニマップの表示/非表示
文字サイズの変更
※特典レクチャーのため動画内容以外のサポートはお受けできませんので、予めご了承ください。
リアルタイムプレビュー ※拡張機能 (Live Preview)
※特典レクチャーのため動画内容以外のサポートはお受けできませんので、予めご了承ください。
コース内で紹介したWEBページへのリンク(ブックマーク)や、storeGが公開しているその他のコースを紹介するレクチャーです。
▼ご注意ください
storeGが公開している講座は、講師によるナレーションではなく、全てプロのナレーターによるナレーションを採用しています。
そのため、ナレーションにこだわりがある方は、ひとまず無料視聴動画をご確認いただき、受講をご検討いただければ幸いです。
新着情報
[NEW] 特典レクチャーの「WEBデザイナーの仕事は将来、AIに奪われるのか?」で
9.最新のテスト結果 (GPT-4V) 2023/10/10 を追加しました。
※ChatGPTのコーディングレベルがかなりアップしています!
【追加】WEBデザイナーの仕事は将来、AIに奪われるのか?【7】【8】※2023年7月上旬版
ツールのバージョンアップに伴い、バージョンを戻す方法についての、テキストレクチャーを追加しました。
レクチャー名:【注意】次のレクチャーに進む前にお読みください
特典動画を追加しました!
※シリーズWEBデザイン講座共通の特典動画となります。
WEBデザイナーの仕事は将来、AIに奪われるのか?について、気になっている方も多いのではないかと思います。そのような疑問に対する答えとなるような動画を作成しましたので、是非、ご視聴ください!
Udemyのシステムにより自動で生成された字幕が表示されるようになりました。
※字幕内容は自動生成のため、正しい日本語に置き換わっていない部分があります。予めご了承ください。
エディタソフトの Brackets が復活!
※詳細については、学習の進め方と学習する環境 ※受講前にご確認くださいのレクチャーをご確認ください。
本講座のサポートについてのレクチャーを追加しました。
特典セクションに以下のレクチャーを追加しました。
Visual Studio Code のインストール
テーマの変更
ファイルの保存と設定
リアルタイムプレビュー
本講座の特徴
最新のカリキュラムを導入
WEB制作業界は今大きな変革期を迎えているため、これから先も通用するWEB制作技術を身につけるためには、最新の情報やツールをもとにした学習カリキュラムが必要です。このような背景から本講座では、実践的なWEBデザイン(制作)を学ぼうとする方に向けて、最新の学習カリキュラムをご用意しました。
新しいCSSモジュールの「CSSグリッドレイアウト」の基礎について学習する
HTML5 (HTML文書)と CSS3 (スタイルシート)の仕様にもとづくWEBページを作成(コーディング)する
Media Queries (メディアクエリ)
CSS Grid Layout (グリッドレイアウト)
JavaScript ( jQueryのプラグイン )で「スライダー」を実装する
JavaScript ( jQueryのプラグイン )で「ドロワーメニュー」を実装する
レスポンシブWEBデザインに対応したWEBページを作成する
画面サイズに応じて最適化されたデザインを表示させる「レスポンシブWEBデザイン」ページを作成します。
PC用ページ
タブレット用ページ
スマートフォン用ページ
また、レスポンシブに対応した【bxSlider】を使用したスライダーの実装や、ドロワーメニューの【Drawer】を実装します。
対象と目標
本講座は、初級者レベルから中級レベルへステップアップされたい方を対象に、Media Queries (メディアクエリ)とCSS Grid Layout (グリッドレイアウト)を使ったレスポンシブWEBページの作成と、JavaScriptのプラグインを使った「スライダー」と「ドロワーメニュー」の実装方法を学習します。
※シリーズ講座である、WEBデザイン講座 Level2 修了者 もしくは 同等レベルの方を想定しています。
CSS Grid Layout (グリッドレイアウト)の基礎を学びたい方。
CSS Grid Layout (グリッドレイアウト)を使用し、レスポンシブWEBデザインの制作に必要な知識や技術を学びたい方。
これまでCSS Grid Layout (グリッドレイアウト)にチャレンジしてきたけれど、よく理解できなかった方。
jQueryのプラグインを使った「スライダー」の実装方法を学びたい方。
jQueryのプラグインを使った「ドロワーメニュー」の実装方法を学びたい方。
などに役に立つ講座になるかと思いますので、ご自身にあてはまると思われる方は是非ご受講ください。
ナレーション・BGMほか
ナレーション 竹中 さやか
BGM YOU (storeG)
イラストほか
freepik
prezi