コース概要
★未経験からプロのWebデザイナーとして働けることがゴールの完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
WordやインターネットくらいしかPCを使ったことがないという方でもわかりやすいように作られています。
★全422レッスン & 42時間! 通学スクール80万円相当の内容
全部で467レッスンがありとても多いですが、1レッスン5分程度なので、空き時間に少しずつ、気軽に進めることが可能です。
Webに関する知識、Photoshop、Webのグラフィックデザイン、HTMLとCSS、実践的なコーディングなど、Webデザイナーとして働いたり、自分1人でサイトを作り上げるのに必要な全てが含まれています。
★授業×チャレンジ課題で実践的なスキルが身につく!
スキルを身につける上で、実際作りながら学ぶことはとても大切です。
オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。
こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。
★過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム
コースを提供しているNEST Schoolは過去3年間で1100名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間50名近くのWebデザイナーを育成し、自社の高度なWebサービスのデザインを手掛けるまでに成長させています。 実際にWebサービスやWeb制作を実施している企業とプロのデザイナーによるプログラムと、「どうすれば効率よくスキルアップできるか」を 考え続けているプログラムの提供が、他にない価値です。
★無駄なく、必要なものだけを、必要な順番で学ぶことの大切さ
ネット上や書店にはたくさんの記事や本がありますが、すべてを見ることはできませんし、特に重要でない知識もたくさんあります。
まずは必要な知識だけを必要な順番で学ばないと、そうでない場合と比べて数十倍の非効率な学習になります。こちらのコースでは最も効率的な学習を目指しました
★内容
【Photoshop】
グラフィックツール定番のPhotoshop ! 基礎の基礎から中級までレベルアップを目指します。1つの動画につき1つの作品を作りながら、難なく楽しく学ぶ事が出来ます。
- これからはじめるPhotoshop基礎⑴
- これからはじめるPhotoshop基礎⑵
- これからはじめるPhotoshop基礎⑶
- 選択範囲と画像の操作
- レイヤー
- ブラシ・シェイプ・グラデーション
- テキストツール
- マスク
- 色調補正とレタッチ
【実践Webデザイン】
Webサイトをデザインする方法をレクチャーします。「ワイヤーフレーム」の制作方法から、実際に仮のWebサイトをまるまるデザインしてみる所まで、Webサイトデザインの全てをお話ししますので、初心者の方でも、どのようにサイト制作を行うのかを実践していただけます。
- ワイヤーフレーム制作
- 初心者のためのウェブデザインテクニック
- 【初級】クリニックのWebサイト〜トップページ編〜
- 【中級】美容院のWebサイト制作〜トップページ編1〜
- 【中級者向け】美容院のWebサイト制作〜トップページ編2〜
- 【中級者向け】美容院のWebサイト制作〜下層ページ編1〜
- 【中級者向け】美容院のWebサイト制作〜下層ページ編2〜
- 【上級者向け】Webメディア〜トップページ編1〜
- 【上級者向け】Webメディア〜トップページ編2〜
- 【上級者向け】Webメディア〜トップページ編3〜
- 【上級者向け】Webメディア〜記事ページ編1〜
【HTML】
初めてHTMLを学ぶ方向けに、HTMLの基本文法から、レイアウトするためのHTMLタグの記述方法など、Webサイトをマークアップする上でかかせないスキルをご紹介します。
- HTML入門 第1回
- HTML入門 第2章
- HTML入門 第3回
- フォーム
- テーブル
- テキストとリスト
- リンクと画像・動画・オーディオ
- HTMLテクニック
- 要素のセクショニング
【CSS】
初めてCSSを学ぶ方向けに、CSSの基本文法からCSS3などの応用まで学びます。実際にレイアウトを組んだり、実践しながら学びます。
- CSS入門 第一回
- CSS入門 第二回
- テキストのスタイル
- ボックスのスタイル
- 背景・シャドウ・リスト
- レイアウト
- セレクタ
- セレクタ応用
【実践コーディング】
実際にHTMLとCSSを利用して、様々なタイプのWebサイトをいちからマークアップする方法をレクチャーしていきます。量をこなして、一人でWebサイトをマークアップ出来るようになりましょう!
- 【初心者向け】クリニックサイトのマークアップ(1)
- 【初心者向け】クリニックサイトのマークアップ(2)
- 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
- 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
- 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
- 【上級者向け】Webマガジンサイトのマークアップ(1)
- 【上級者向け】Webマガジンサイトのマークアップ(2)
- 【上級者向け】Webマガジンサイトのマークアップ(3)
- 【上級者向け】Webマガジンサイトのマークアップ(4)
※NESTonlineの他の講座を受講されている方は、一部内容が重複いたしますので、ご注意下さい
必要条件
- PC
- Photoshop
- Sublime Text (テキストエディター)
Course Curriculum
Lesson 1
Photoshopでできること
Lesson 2
画面構成を理解し、パネルやツールバーの基本操作を知...
Lesson 3
ファイルを新規作成する方法を学ぼう
Lesson 4
まずはじめに覚えたい、基本ツールの使い方
Lesson 5
画像の貼り付けや拡大・縮小する方法
Lesson 6
フィルター機能で写真をイラスト風に変えよう
Lesson 7
長方形選択ツールで画像の一部分にのみ編集を加える方...
Lesson 8
ブラシツールを使って、写真にキラキラした演出を加え...
Lesson 9
ファイルをjpg形式に変換する方法
Lesson 1
画面を拡大縮小したり並べて表示する方法
Lesson 2
色調補正パネルで画像の明るさやコントラストを調整す...
Lesson 3
色調補正パネルを使って、画像の一部分をモノクロに変...
Lesson 4
色の置き換えツールを使って、色を置き換える方法
Lesson 5
ぼかしツールを使って、写真をミニチュア風に加工する...
Lesson 6
[実践]様々なツールを駆使してトイカメラ風の画像に加...
Lesson 7
Photoshopのレイヤー機能について
Lesson 8
クイック選択ツールで、複雑な形の写真を綺麗に切り抜...
Lesson 9
[実践]曇り空の写真を晴れの写真に合成してみよう
Lesson 10
人物を綺麗に切り抜いて、写真に合成させよう
Lesson 1
テキストツールを使って文字を入力する方法
Lesson 2
範囲内で自動改行させる、テキストボックスの作り方
Lesson 3
ワープ機能を使って、文字に変形を加える方法
Lesson 4
シェイプツールを使って、図形やイラストを追加する方...
Lesson 5
レイヤースタイルの基本のかけ方
Lesson 6
[実践]ドロップシャドウで、思わず押したくなるボタン...
Lesson 7
クリッピングマスクを使って、レイヤーを好きな形に切...
Lesson 8
クリッピングマスク機能でFacebookのカバー写真を作ろ...
Lesson 9
スライス機能を使って、画像をパーツ毎に書き出す方法
Lesson 10
WEBサイトのメイン画像を作ってみよう
Lesson 1
切り抜きツールを使って画像を指定のサイズに切り抜く...
Lesson 2
長方形選択ツールを使って、2つの画像を合成する方法
Lesson 3
長方形選択ツールを使って、2つの画像を合成する方法
Lesson 4
[実践]選択ツールを使って、画像を違和感なく合成し...
Lesson 5
クイック選択ツールを使って、複雑な輪郭の画像を切り...
Lesson 6
マスクモードで選択範囲を微調整する方法
Lesson 7
自動選択ツールを使った、同じ色の部分を選択する方...
Lesson 8
様々な選択ツールを駆使してネットショップの商品画像...
Lesson 9
Photoshopを使って、髪の毛を綺麗に切り抜く方法
Lesson 10
様々な選択ツールを駆使して、コラージュ作品を制作し...
Lesson 1
Photoshopのレイヤーの仕組みとレイヤーパネルの操作
Lesson 2
Photoshopレイヤーの不透明度、表示非表示の設定方法
Lesson 3
レイヤーにカラーラベルを設定し、効率よく管理する方...
Lesson 4
[実践]レイヤーの不透明度を調整するアイキャッチ画像...
Lesson 5
レイヤースタイルで、レイヤーにドロップシャドウをか...
Lesson 6
レイヤースタイルの光彩で、レイヤーをネオン風に光ら...
Lesson 7
パターンオーバーレイで、レイヤーにざらざらした質感...
Lesson 8
[実践]レイヤースタイルで、お申込みリンクのバナーを...
Lesson 9
Photoshopでオリジナルパターンを制作する方法
Lesson 10
様々なレイヤースタイルを使って、プロ並みのポスター...
Lesson 1
Photoshopで段々と透明になるグラデーションの作成方...
Lesson 2
ブラシツールを使って自由に絵を描く方法
Lesson 3
無料のカスタムブラシを使ってポスターを制作する方法
Lesson 4
[実践]ブラシツールを使って、女性の顔に化粧を施して...
Lesson 5
シェイプツールを使って、グラデーションのボタンを作...
Lesson 6
ペンツールを使って、自由な線を描く方法
Lesson 7
パス選択ツールでアンカーポイントの位置やハンドルを...
Lesson 8
無料のカスタムシェイプを使って、フラットなボタンを...
Lesson 9
ペンツールやパス選択ツールで、吹き出しアラートを作...
Lesson 10
シェイプツールを駆使して、ポストカードをデザインし...
Lesson 1
テキストツールで文字入力し、文字パネルでスタイルを...
Lesson 2
自動改行できる、テキストボックスの作成とスタイル...
Lesson 3
[実践]テキストツールを使って、雑誌のページを作って...
Lesson 4
シェイプツールで作成したパスに沿って、文字を入力す...
Lesson 5
ペンツールで作成したパスに沿って、文字を入力する方...
Lesson 6
ワープテキストを利用して、文字を変形させる方法
Lesson 7
遠近法ワープを使って、立体的に文字を変形させる方法
Lesson 8
[実践]テキストツールで、ビンテージロゴを制作してみ...
Lesson 9
様々なテキスト変形ツールで、ボトルラベルをデザイン...
Lesson 1
レイヤーマスクを使って画像を切り抜く方法
Lesson 2
レイヤーマスクを使って、画像を徐々に透明にする方法
Lesson 3
クイックマスクモードで、細かく選択範囲を微調整する...
Lesson 4
[実践]レイヤーマスクを使って、カリグラフィポスター...
Lesson 5
レイヤーマスクを使って、曇り空を晴れに変える方法
Lesson 6
Photoshopのレイヤーマスクを使って、髪の毛の色を変...
Lesson 7
クリッピングマスクを使って画像を切り抜く方法
Lesson 8
クリッピングマスクを使って、本のカバー柄を変える写...
Lesson 9
[実践]クリッピングマスクで、Webサイトメイン画像を...
Lesson 10
様々なマスクツールで、Webサイトのメイン画像を作ろ...
Lesson 1
アクションを使ってボタン一つで画像をレトロ風に加工...
Lesson 2
レベル補正を使って食べ物を美味しそうに補正する方法
Lesson 3
フィルター機能を使って、写真をイラスト風に加工する...
Lesson 4
自動処理の機能を使って写真をHDR風にしよう
Lesson 5
シャープツールを使って、人物の目をはっきりさせる方...
Lesson 6
スポット修正ブラシツールを使って、ニキビやシワを消...
Lesson 7
Photoshopで人物の歯を白くしたり、目の充血をなくす...
Lesson 1
ワイヤーフレームとは何かを理解しよう
Lesson 2
Web制作のためのワイヤーフレーム作成手順と使用ツー...
Lesson 3
失敗しないWebサイト制作のヒアリングのコツ
Lesson 4
Webサイト制作のためののヒアリング方法
Lesson 5
Webサイトを構成するレイアウトパーツの役割と名称
Lesson 6
初心者のためのワイヤーフレーム作成方法
Lesson 7
失敗しないワイヤーフレーム作成方法
Lesson 1
初心者のためのWebデザインの方法・勉強法
Lesson 2
パンくずリストの作り方
Lesson 3
押したくなるダウンロードボタンの作り方
Lesson 4
バナーの作り方
Lesson 5
Webサイトのメインビジュアルの作り方
Lesson 6
ナビゲーションの作り方
Lesson 7
ガイドを使ったWebデザインのベースを作成する方法
Lesson 8
Webデザインで役立つ参考サイトの探し方
Lesson 9
Web制作でよく使用するツール
Lesson 1
第一回:デザイン前の環境設定と新規作成をしよう
Lesson 2
第二回:シェイプを使ってWebサイトのベースを作成し...
Lesson 3
第三回:無料のアイコンを使ってロゴを配置してみよう
Lesson 4
第四回:整列系のツールを使って、綺麗なナビゲーショ...
Lesson 5
第五回:色調補正パネルを利用した、メイン画像を作っ...
Lesson 6
第六回:無料のアイコンを利用したバナーを作ってみよ...
Lesson 7
第七回:テキストツールを使って、記事一覧を作ってみ...
Lesson 8
第八回:レイヤー複製機能を使って、即座にフッターを...
Lesson 9
第九回:シェイプツールを使って、ページ・トップへを...
Lesson 10
最終回:スライスツールを使って、画像を書き出してみ...
Lesson 1
第1回:Webサイト用のPhotoshopファイルを新規作成す...
Lesson 2
第2回:ガイドを使って、Webサイトのレイアウトを作...
Lesson 3
第2回:(続き)ガイドを使って、Webサイトのレイアウ...
Lesson 4
第3回:Webサイトに背景画像を設定する方法
Lesson 5
第4回:無料のアイコンを利用したロゴを作成する方法...
Lesson 6
第4回:(続き)無料のアイコンを利用したロゴを作成す...
Lesson 7
第5回:お問い合わせバナーを作成する方法-1
Lesson 8
第5回:(続き)お問い合わせバナーを作成する方法-2
Lesson 9
第6回:テキストツールでナビゲーションを作成する方...
Lesson 1
第6回:(続き)テキストツールでナビゲーションを作成...
Lesson 2
第7回:レイヤースタイルを使用した、メイン画像を作...
Lesson 3
第8回:テキストボックスを利用した、新着情報一覧を...
Lesson 4
第8回:(続き)テキストボックスを利用した、新着情報...
Lesson 5
第9回:写真を使ったバナーを作成する方法-1
Lesson 6
第9回:(続き)写真を使ったバナーを作成する方法-2
Lesson 7
第9回:(続き)写真を使ったバナーを作成する方法-3
Lesson 8
最終回:コピーライト付きフッターを作成する方法
Lesson 1
第1回:記事ページ用のファイルの複製と修正
Lesson 2
第2回:変形ツールを使って、メインビジュアルを見出...
Lesson 3
第3回:既存のレイヤーを再利用した、メニュー一覧の...
Lesson 4
第3回:(続き)既存のレイヤーを再利用した、メニュー...
Lesson 5
第3回:(続き)既存のレイヤーを再利用した、メニュー...
Lesson 6
第3回:(続き)既存のレイヤーを再利用した、メニュー...
Lesson 7
第4回:フッターを調整する方法
Lesson 8
第5回:ご予約ページ用のファイルの複製と修正
Lesson 9
第6回:ナビゲーションの修正と小見出しの修正
Lesson 1
第7回:ご予約フォームの注意文を作成する方法-1
Lesson 2
第7回:(続き)ご予約フォームの注意文を作成する方法...
Lesson 3
最終回:ご予約フォームを作成する方法-1
Lesson 4
最終回:(続き)ご予約フォームを作成する方法-2
Lesson 5
最終回:(続き)ご予約フォームを作成する方法-3
Lesson 6
最終回:(続き)ご予約フォームを作成する方法-4
Lesson 7
最終回:(続き)ご予約フォームを作成する方法-5
Lesson 8
最終回:(続き)ご予約フォームを作成する方法-6
Lesson 1
第1回:Webサイト用新規ファイルの作成方法
Lesson 2
第2回:ガイドを使ってサイト全体のレイアウト組みを...
Lesson 3
第2回:(続き)ガイドを使ってサイト全体のレイアウト...
Lesson 4
第3回:シェイプツールでヘッダーの背景を作成する方...
Lesson 5
第4回:無料アイコンでロゴとナビゲーションを作成す...
Lesson 6
第4回:(続き)無料アイコンでロゴとナビゲーションを...
Lesson 7
第5回:特集記事部分を作成する方法-1
Lesson 8
第5回:(続き)特集記事部分を作成する方法-2
Lesson 9
第5回:(続き)特集記事部分を作成する方法-3
Lesson 10
第6回:人気記事ランキングを作成する方法-1
Lesson 1
第6回:(続き)人気記事ランキングを作成する方法-2
Lesson 2
第6回:(続き)人気記事ランキングを作成する方法-3
Lesson 3
第6回:(続き)人気記事ランキングを作成する方法-4
Lesson 4
第6回:(続き)人気記事ランキングを作成する方法-5
Lesson 5
第6回:(続き)人気記事ランキングを作成する方法-6
Lesson 6
第7回:カテゴリー一覧を作成する方法-1
Lesson 7
第7回:(続き)カテゴリー一覧を作成する方法-2
Lesson 8
第7回:(続き)カテゴリー一覧を作成する方法-3
Lesson 9
第8回:新着記事一覧を作成する方法-1
Lesson 10
第8回:(続き)新着記事一覧を作成する方法-2
Lesson 1
第8回:(続き)新着記事一覧を作成する方法-3
Lesson 2
第8回:(続き)新着記事一覧を作成する方法-4
Lesson 3
第8回:(続き)新着記事一覧を作成する方法-5
Lesson 4
第9回:ページネーションを作成する方法−1
Lesson 5
第9回:ページネーションを作成する方法
Lesson 6
最終回:フッターを作成する方法-1
Lesson 7
最終回:(続き)フッターを作成する方法-2
Lesson 8
最終回:(続き)フッターを作成する方法-3
Lesson 9
第1回:記事ページ用新規ファイルの作成方法
Lesson 10
第2回:第2回:記事ページのサイドバーの作...
Lesson 1
第2回:(続き)記事ページのサイドバーの作成方法-...
Lesson 2
第2回:(続き)記事ページのサイドバーの作成方法-3
Lesson 3
第3回:記事ページの本文の作成方法-1
Lesson 4
第3回:(続き)記事ページの本文の作成方法-2
Lesson 5
第3回:(続き)記事ページの本文の作成方法-3
Lesson 6
最終回:関連記事一覧の作成方法-1
Lesson 7
最終回:(続き)関連記事一覧の作成方法-2
Lesson 8
最終回:(続き)関連記事一覧の作成方法-3
Lesson 9
チャレンジ:NESTschool公式サイトをデザインしよう(...
Lesson 10
チャレンジ:NESTschool公式サイトをデザインしよう(2...
Lesson 1
Webページを設計する方法
Lesson 2
Webサイト制作の言語、HTMLとは
Lesson 3
Webページがブラウザに表示される仕組み
Lesson 4
HTML制作に必要なアプリケーションをインストールする...
Lesson 5
HTMLファイルを新規作成する方法
Lesson 6
ゼロから学ぶHTMLタグの書き方入門
Lesson 7
[実践]HTMLを書いてみよう:簡単なテキストのマークア...
Lesson 8
HTMLファイルをブラウザで表示させるには
Lesson 9
Web製作者が知っておくべき、ブラウザの種類と特徴
Lesson 1
HTML5を宣言するDOCTYPEの書き方
Lesson 2
HTMLの基本構造を記述する方法
Lesson 3
文字エンコードの種類と記述方法
Lesson 4
Webページにタイトルを付けるタグの書き方
Lesson 5
Webサイトの情報を示すタグの書き方
Lesson 6
見出しである事を示すの書き方
Lesson 7
段落である事を示すタグの書き方
Lesson 8
画像を表示するためのタグの書き方
Lesson 9
タグに情報を付加するための属性の書き方
Lesson 1
文字の色を変える、属性の書き方
Lesson 2
レイアウトのためのタグを記述してみよう
Lesson 3
リストタグを使ってナビゲーションを作ってみよう
Lesson 4
メイン画像を表示させてみよう
Lesson 5
コンテンツをマークアップしてみよう
Lesson 6
フッターをマークアップしてみよう
Lesson 7
CSSファイルを読み込むタグの記述方法
Lesson 8
コメントアウトを書く方法
Lesson 9
[実践]アバウトページを作ってみよう
Lesson 1
フォームを作成するためのタグの書き方
Lesson 2
タグでテキスト入力フォームを作る方法
Lesson 3
タグで長文向けフォームを作成する方法
Lesson 4
タグで送信・リセットボタンを作る方法
Lesson 5
タグでフォームにラベルを付ける方法
Lesson 6
タグでフォームをグループに分ける方法
Lesson 7
タグでセレクトメニューを作る方法
Lesson 8
タグでラジオボタンを作る方法
Lesson 9
タグでチェックボックスを作る方法
Lesson 10
フォームに関するタグを使って、ログインページを作ろ...
Lesson 1
テーブルを作成するためのタグの書き方
Lesson 2
テーブルに項目名を設定するタグの書き方
Lesson 3
テーブルに説明を加える3つのタグの書き方
Lesson 4
行をグループ化する3つのタグの書き方
Lesson 5
隣り合う複数のセルを結合させるタグの書き方
Lesson 6
テーブルタグを使って、企業概要ページを作ろう!
Lesson 1
見出しをつける~の書き方
Lesson 2
段落タグと改行タグの書き方
Lesson 3
語句を強調、ハイライト表示させるタグの書き方
Lesson 4
引用するときのタグの書き方
Lesson 5
改行や余白をそのまま表示させるタグの書き方
Lesson 6
連絡先や問合わせ先、省略文字、改行位置を示す方法
Lesson 7
箇条書きリストを作成する方法
Lesson 8
定義型リストを作成する方法
Lesson 9
文字構造を意識したHTMLテキストのマークアップをして...
Lesson 10
テキスト系タグを使った、カフェメニューページを作ろ...
Lesson 1
指定のページへリンクさせるタグの書き方
Lesson 2
指定のHTMLファイルへリンクさせるタグの書き方
Lesson 3
ページ内ジャンプさせるリンクの書き方
Lesson 4
画像を表示するタグの書き方
Lesson 5
横罫線を表示するタグの書き方
Lesson 6
youtube動画をサイトに埋め込む方法
Lesson 7
ページの中に別のページを表示させるの書き方
Lesson 8
google mapを表示させる方法
Lesson 9
youtube動画を使った、映画情報サイトを作ろう!
Lesson 1
リンクのクリックでメールソフトを起動させる方法
Lesson 2
件名や本文を入力している状態でメールソフトを起動さ...
Lesson 3
ユーザーに親切なお問い合わせメールを作成してみよう
Lesson 4
ファビコンを設定する方法
Lesson 5
サイトでPDFファイルをダウンロードさせる方法
Lesson 6
秒数を指定して自動的に特定のページへジャンプさせる...
Lesson 7
素材ダウンロードサイトを作ってみよう
Lesson 1
Webページレイアウトの基礎を学ぼう
Lesson 2
ヘッダーとナビゲーションを作成する方法
Lesson 3
メインコンテンツ、サイドバー、フッターの作成方法
Lesson 4
Webサイト全体を真ん中寄せにするためのタグの記述方...
Lesson 5
sectionタグとarticleタグの違い
Lesson 6
文書構造を意識した正しいグルーピングをしてみよう
Lesson 1
スタイルシート、CSSとは?
Lesson 2
ゼロから学ぶCSSの基本文法
Lesson 3
CSSを書いてみよう:背景と文字の色を変更する
Lesson 4
インラインCSSを書いてみよう
Lesson 5
フォントのサイズと太さを変更してみよう
Lesson 6
外部CSSファイルの作成と読み込み方法
Lesson 7
importタグを使ってCSSを読み込む方法
Lesson 8
リセットCSSを使う方法
Lesson 1
すべての要素を対象にするセレクタの書き方
Lesson 2
タグ名を指定してCSSをかける方法
Lesson 3
スタイルの継承について
Lesson 4
複数の同じタグに異なるCSSを適応させる:id名の記述
Lesson 5
複数の同じタグに異なるCSSを適応させる:class名の記...
Lesson 6
CSSコメントアウトを書く方法
Lesson 7
ナビゲーションにCSSをかけてみよう(1)
Lesson 8
【続き】ナビゲーションにCSSをかけてみよう(2)
Lesson 1
フォントの種類を指定するfont-familyの書き方
Lesson 2
特殊なフォント、Google Web Fontを指定しよう
Lesson 3
フォントの大きさを指定するfont-sizeの書き方
Lesson 4
CSSでの大きさを指定する単位について
Lesson 5
font-sizeを使って、頭文字のみ文字の大きさを大きく...
Lesson 6
文字の太さを変更するfont-weightの書き方
Lesson 7
下線や打ち消し線をtext-decorationで書こう
Lesson 8
文章の行間を指定するline-heightの書き方
Lesson 9
フォントの設定を一括で行うCSSの書き方
Lesson 10
font系CSSを利用して、お知らせページを作ってみよう
Lesson 1
ブロックタイプレベルとインラインレベルについて
Lesson 2
ボックスモデルを理解する
Lesson 3
横幅と縦幅の指定するCSSのかけ方
Lesson 4
外側の余白を調整するmarginプロパティの書き方
Lesson 5
内側の余白を調整するpaddingプロパティの書き方
Lesson 6
境界線を付けるborderプロパティの書き方
Lesson 7
borderプロパティを利用した、見出しを作ってみよう
Lesson 8
インライン要素をブロック要素に変えるdisplayプロパ...
Lesson 9
ボックスの角を丸くするborder-radiusプロパティの書...
Lesson 10
ボックス系CSSを利用して、カフェのメニューページを...
Lesson 1
背景の色を変更する方法
Lesson 2
背景に画像を設定する方法
Lesson 3
スクロール固定の背景画像を設定する方法
Lesson 4
テキストに影をつける方法
Lesson 5
ボックスに影をつける方法
Lesson 6
グラデーションの背景を設定する方法
Lesson 7
リストのアイコンスタイルを変更する方法
Lesson 8
リストのアイコンを画像に変更する方法
Lesson 9
背景画像を利用したリストアイコンの表示方法
Lesson 1
タグの横幅と縦幅の指定方法
Lesson 2
サイト全体を中央寄せ、センタリングする方法
Lesson 3
Webサイトを2カラムレイアウトにする方法
Lesson 4
floatを利用した横並びのナビゲーションを作ってみよ...
Lesson 5
位置を指定して配置するpositionプロパティの書き方
Lesson 6
スクロール追従ナビゲーションを作成する方法
Lesson 7
指定範囲からはみ出た文字をスクロールさせる方法
Lesson 8
overflowプロパティを使って、画像のサイズを変更して...
Lesson 9
Webサイト2カラムレイアウトを作ってみよう
Lesson 1
セレクタについて
Lesson 2
idセレクタの使い方
Lesson 3
classセレクタの使い方
Lesson 4
idセレクタとclassセレクタを組み合わせる方法
Lesson 5
セレクタを使いこなしてみよう
Lesson 6
オンマウスでリンクの文字色を変える方法
Lesson 7
特定の親要素の子要素にだけ、スタイルを適応させる方...
Lesson 8
複数のタグに同じCSSをかける方法
Lesson 1
擬似クラスfirst-childとlast-child
Lesson 2
擬似クラスを使った、横並びのナビゲーションを作って...
Lesson 3
順番を指定してスタイルをかけるnth-childの使い方
Lesson 4
nth-childとnth-of-typeの使い方と違い
Lesson 5
nth-child擬似クラスを使って、見やすいテーブルを作...
Lesson 6
最初の文字・行にスタイルを適応させる方法
Lesson 7
空要素のみにスタイルを適応させる方法
Lesson 8
直後に隣接している要素にスタイルを適応させる方法
Lesson 9
チェックボックスにチェックが入った時にスタイルを適...
Lesson 1
第1回:サイト情報を設定するmetaタグを入力してみよ...
Lesson 2
第2回:レイアウトのためのタグを追加してみよう
Lesson 3
第3回:コメントアウトでわかりやすいhtmlを書いてみ...
Lesson 4
第4回:横幅と縦幅を設定しよう(1)
Lesson 5
第4回:横幅と縦幅を設定しよう(2)
Lesson 6
第5回:floatで2カラムレイアウトを組んでみよう
Lesson 7
第6回:marginでサイト全体を中央に寄せてみよう
Lesson 8
第7回:ロゴを配置してみよう
Lesson 9
第8回:ナビゲーションをマークアップしてみよう
Lesson 10
第9回:floatを使ってロゴとナビを横並びにしてみよ...
Lesson 1
第10回:メイン画像を表示させてみよう
Lesson 2
第11回:リストタグを使ってバナーを作ってみよう
Lesson 3
第12回:背景画像を利用したバナーを作ってみよう(1...
Lesson 4
第12回:背景画像を利用したバナーを作ってみよう(2...
Lesson 5
第12回:背景画像を利用したバナーを作ってみよう(3...
Lesson 6
第13回:お知らせの見出しと一覧をマークアップしよ...
Lesson 7
第14回:floatを使ってdtとddを横並びにしよう
Lesson 8
第15回:擬似クラスを使って奇数行に背景の色を適応...
Lesson 9
第16回:フッターに必要なタグを記述してみよう
Lesson 10
第17回:フッターに必要なCSSを記述してみよう
Lesson 1
第1回:HTMLファイルを新規作成、タイトルを設定しよ...
Lesson 2
第2回:CSSファイルを新規作成、読み込ませてみよう
Lesson 3
第3回:ヘッダーのレイアウトを作ってみよう
Lesson 4
第4回:リセットCSSを読み込んでみよう
Lesson 5
第5回:コンテンツのレイアウトを組もう
Lesson 6
第6回:横幅100%のフッターを作成しよう
Lesson 7
第7回:marginを使ってサイト全体の余白を調節しよう
Lesson 8
第8回:見出しタグを使ってロゴをマークアップしよう
Lesson 9
第9回:背景画像を使ってロゴのアイコンを表示させよ...
Lesson 1
第10回:余白を調整してロゴを完成させよう
Lesson 2
第11回:ナビゲーションをマークアップしよう
Lesson 3
第12回:マウスホバーで下線がつくリンクを作ろう(1...
Lesson 4
第12回:マウスホバーで下線がつくリンクを作ろう(2...
Lesson 5
第13回:横並びのナビゲーションを作ろう
Lesson 6
第14回:ナビゲーションの位置を調整しよう
Lesson 7
第15回:positionを使って右上にバナーを配置しよう
Lesson 8
第16回:背景に画像を設定しよう
Lesson 9
第17回:影のついたメイン画像を作成してみよう
Lesson 1
第18回:新着情報一覧の背景を作成してみよう
Lesson 2
第19回:新着情報一覧の文字をデザインしてみよう
Lesson 3
第20回:overflowを使ってスクロール窓を作ろう
Lesson 4
第21回:背景画像を利用したバナーを作ろう
Lesson 5
第22回:class名を利用してボックスに影をつけよう
Lesson 6
第23回:バナーの文字の位置や大きさを調整しよう
Lesson 7
最終回:フッターを作成しよう
Lesson 1
第1回:下層ページ用にファイルを複製しよう
Lesson 2
第2回:メニュー一覧ページの見出しを作ろう
Lesson 3
第3回:リストタグを使ってメニュー一覧を記述しよう
Lesson 4
第4回:メニュー一覧のデザインを調整しよう
Lesson 5
第5回:ファイルの複製と見出しの修正を行おう
Lesson 6
第6回:注意文のデザインを調整しよう
Lesson 7
第7回:テーブルタグを使ってフォームを作成しよう
Lesson 8
第8回:フォームを複製して完成させよう
Lesson 9
第9回:チェックボックスを作成してみよう
Lesson 1
第10回:フォームのラベルをデザインしてみよう
Lesson 2
第11回:入力欄に関するCSSをかけてみよう(1)
Lesson 3
第11回:入力欄に関するCSSをかけてみよう(2)
Lesson 4
第12回:送信ボタンにCSSをかけてみよう
Lesson 1
第1回:必要なHTMLとCSSファイルを新規作成しよう
Lesson 2
第2回:スタイルシートを読み込んでみよう
Lesson 3
第3回:ヘッダーのレイアウトを組もう(1)
Lesson 4
第3回:ヘッダーのレイアウトを組もう(2)
Lesson 5
第4回:ロゴとナビゲーションをマークアップしよう
Lesson 6
第5回:横並びのロゴとナビゲーションを作成しよう
Lesson 7
第6回:ピックアップ記事のレイアウトを組もう
Lesson 8
第7回:ピックアップ記事のHTMLを書いてみよう
Lesson 9
第8回:ピックアップ記事のCSSを書いてみよう(1)
Lesson 1
第8回:ピックアップ記事のCSSを書いてみよう(2)
Lesson 2
第9回:背景画像を利用した見出しを作ろう
Lesson 3
第10回:ランキング一覧のHTMLを記述しよう
Lesson 4
第11回:ランキング一覧のCSSを記述しよう(1)
Lesson 5
第11回:ランキング一覧のCSSを記述しよう(2)
Lesson 6
第11回:ランキング一覧のCSSを記述しよう(3)
Lesson 7
第12回:floatを使ってコンテンツのレイアウトを組...
Lesson 8
第12回:floatを使ってコンテンツのレイアウトを組...
Lesson 9
第13回:サイドバーを作成しよう(1)
Lesson 1
第13回:サイドバーを作成しよう(2)
Lesson 2
第13回:サイドバーを作成しよう(3)
Lesson 3
第14回:背景画像を利用した見出しを作ろう
Lesson 4
第15回:定義型リストを利用して記事一覧をマークア...
Lesson 5
第15回:記事一覧に対してCSSを記述しよう(1)
Lesson 6
第15回:記事一覧に対してCSSを記述しよう(2)
Lesson 7
第15回:記事一覧に対してCSSを記述しよう(3)
Lesson 8
第15回:記事一覧に対してCSSを記述しよう(4)
Lesson 9
第16回:ページネーションをマークアップしよう(1)
Lesson 1
第16回:ページネーションをマークアップしよう(2)
Lesson 2
第16回:ページネーションをマークアップしよう(3)
Lesson 3
第17回:フッターをマークアップしよう(1)
Lesson 4
第17回:フッターをマークアップしよう(2)
Lesson 5
第17回:フッターをマークアップしよう(3)
Lesson 6
チャレンジ:NESTschool公式サイトをマークアップして...