コース概要
HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです
実際の3つのWebサイトを初級・中級・上級と段階を踏んで作りながら、実践的なWebサイトコーディングのスキルが身につきます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。
★こんな人におすすめ★
- 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方
- より実践的なコーディングのスキルを身に着けたい方
★特徴★
- 90以上、9時間以上の充実したコース
- 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
- 5分程度の動画が90レッスン以上 充実した内容ですが、無理せず学べる
★内容★
①【初心者向け】クリニックサイトのマークアップ(1)
実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。
②【初心者向け】クリニックサイトのマークアップ(2)
実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。 画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。 【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。
③【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。 完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。
④【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。
⑤【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。
⑥【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 作成したトップページのファイルを複製して、下層ページをマークアップします。 同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。
⑦【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。 inputタグを利用した、お問い合わせフォームを作成する方法を学びます。CSSを利用して、入力しやすいようにデザインを反映させていきましょう。 【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。
⑧【上級者向け】Webマガジンサイトのマークアップ(1)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。 HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。 なるべくタイプミス等しないように注意してください。
⑨【上級者向け】Webマガジンサイトのマークアップ(2)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。 【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。
⑩【上級者向け】Webマガジンサイトのマークアップ(3)
実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。 背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。 【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。
⑪【上級者向け】Webマガジンサイトのマークアップ(4)
様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。 縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。 Webメディアに必要なページネーションや、フッターを作成していきます。 10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。
必要条件
- PC
- Sublime Text (テキストエディター)
Course Curriculum
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公式サイトをマークアップして...