実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。
4.3 (55 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
703 students enrolled
Instructed by NEST online Design / Web Design
$19
$80
76% off
Take This Course
  • Lectures 91
  • Length 9 hours
  • Skill Level Intermediate Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 Japanese

Course Description

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) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。


What are the requirements?

  • HTMLとCSSの基礎コースを事前に受けることをおすすめします

What am I going to get from this course?

  • HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです

What is the target audience?

  • 基礎的なHTMLとCSSの知識はあるが、実際のWebサイト制作は自信のない方
  • より実践的なコーディングのスキルを身に着けたい方

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: 【初心者向け】クリニックサイトのマークアップ(1)
07:19

タグを利用して、ウェブサイトの説明文やキーワードの設定方法を初心者向けに解説しています。 ここでは、仮想のクリニックサイトの説明文とキーワードを設定していきます。

07:25

タグやタグ、タグなどを利用して、ウェブサイトのレイアウトを組むためのマークアップ方法を解説しています。

02:37

htmlコメントアウトを記述して、だれでも読みやすく、見やすいhtmlになるように工夫する方法を解説しています。

04:45

cssのwidthプロパティとheightプロパティを使って、ボックスの縦幅と横幅を設定し、ウェブサイトレイアウトの基盤を作ります。

04:18
cssのwidthプロパティとheightプロパティを使って、ボックスの縦幅と横幅を設定し、ウェブサイトレイアウトの基盤を作ります。background-colorプロパティを利用して、目に見えるボックスを作成していきます。
03:37

floatプロパティを利用して、2カラムレイアウトを作る方法を初心者向けに解説しています。 clearfixを利用して、floatを解除する方法も合わせて解説しています。

06:22
marginプロパティを利用して、サイト全体を中央に寄せる方法を、初心者向けに解説しています。
05:37
サイトタイトルを示す見出しタグを使って、ロゴをマークアップする方法を、初心者向けに解説しています。
03:27

グローバルナビゲーションである事を示すために、タグやタグを使ってナビゲーションをマークアップする方法を、初心者向けに解説しています。

07:06
floatプロパティを利用して、ロゴとナビゲーション、ナビゲーションリスト全体を横並びにする方法を、初心者向けに解説しています。
Section 2: 【初心者向け】クリニックサイトのマークアップ(2)
01:55

メイン画像を作成する方法を、初心者向けに解説しています。 ここでは、imgタグを使って実際に画像を表示させます。

02:34

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、リストタグを利用してリンク付きのバナーのhtmlを記述します。

07:34
背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、横幅や縦幅、背景の色や境界線といったボックスのデザインに関するCSSを書きます。
06:24

背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、インライン要素であるリストタグにdisplayプロパティをかけ、背景画像を指定します。

06:50
背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、かぶっている背景画像と文字の位置を、paddingを利用して調整します。
05:35
お知らせ部分のマークアップ方法を、初心者向けに解説しています。 ここでは、見出しタグを使った見出しの作成と、定義型リストを使ったお知らせ一覧の作成をします。
03:20

お知らせ部分のマークアップ方法を、初心者向けに解説しています。 ここでは、floatを使って、日付であるdtと本文であるddを横並びにするfloatを記述します。

05:35
content="お知らせ部分のマークアップ方法を、初心者向けに解説しています。 ここでは、擬似クラスを利用して、奇数行のタグに対して背景の色を設定します。"
06:29
フッターのマークアップ方法を、初心者向けに解説しています。 ここでは、フッターに記述するべきhtmlタグを記述していきます。
13:48
フッターのマークアップ方法を、初心者向けに解説しています。 ここでは、フッターに記述したhtmlに、デザインと同じになるようなcssを記述していきます。
Section 3: 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
05:25

HTMLファイルを新規作成する方法について、中級者向けに解説をしています。 ここでは、真っ白なHTMLファイルに、必ず必要なタグを記述して土台を作っていきます。

03:41
CSSファイルを新規作成し、HTMLファイルに読み込ませる方法について、解説しています。
06:47
ヘッダーのレイアウトを組むために、タグを使ってマークアップし、CSSのwidthやheightを使ってheaderのボックスを作成します。
02:45

リセットCSSを導入する方法について解説しています。 ここでは、実際に導入して無駄な余白をなくします。

06:09
コンテンツのレイアウトを組む方法について解説しています。 ここでは、floatを使って2カラムのレイアウトを作っていきます。
05:04
フッターを作成する方法について解説しています。 ここでは、2カラムレイアウトのためのfloatをfooter部分で解除します。
06:19
marginを使ってサイト全体の余白を調節する方法について、解説しています。 ここでは、サイト全体の余白の調整の他にも、サイト全体をセンタリングさせます。
06:28
見出しタグを使ってロゴをマークアップする方法について、解説しています。 ここでは、まず必要な要素をすべて記述します。
04:56

背景画像を使ってロゴのアイコンを表示させる方法について、解説しています。 ここでは、backgroundプロパティを使ってロゴのアイコンを表示させます。

Section 4: 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
05:02

余白を調整してロゴを完成させる方法について解説しています。 ここでは、paddingという内側の余白を調整するCSSを利用して、背景画像と文字のかぶりをなくします。

04:42
ナビゲーションをマークアップする方法について解説しています。 ここでは、ナビゲーションに必要なhtmlを記述します。
05:45
マウスホバーで下線がつくリンクを作成する方法について解説しています。 ここでは、:hover擬似クラスを利用して文字の色を変えます。
04:42

マウスホバーで下線がつくリンクを作成する方法について解説しています。 ここでは、:hover擬似クラスと背景画像を利用して、下線の下に下向きの三角形を表示させます。

04:49
横並びのナビゲーションを作成する方法について解説しています。 ここでは、floatプロパティを利用してリストタグを横に並べます。
02:50

ナビゲーションの位置を調整する方法について解説しています。 ここでは、marginプロパティを利用して余白の調整を行います。

06:16

右上のお問い合わせバナーを配置する方法について解説しています。 ここでは、positionプロパティを利用して絶対位置を指定した配置を行います。

03:24
背景に画像を設定する方法について解説します。 ここでは、backgroundプロパティを利用して、背景全体にクロスの画像を敷き詰めます。
05:48

影のついたメイン画像を作成する方法について解説しています。 ここでは、box-shadowプロパティを利用して自然な影をCSSで表現します。

Section 5: 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
05:37

新着情報一覧の背景を作成する方法を解説しています。 ここでは、背景の色と内側の余白を、レイアウト崩れのないように設定していきます。

07:01
新着情報一覧の文字のデザインをする方法を解説しています。 ここでは、デザインと同じになるようにフォントのサイズや太さ等の調整を行います。
04:14

スクロールできる新着情報一覧を作成する方法を解説します。 ここでは、overflowプロパティを利用して、ボックスからはみ出た部分の文字をスクロールさせます。

05:03
背景画像を利用したバナーを作成する方法を解説しています。 ここでは、backgroundプロパティを利用して、背景画像としてバナーの写真を表示させます。
05:59
class名を利用してボックスに影をつける方法を解説しています。 class名の特徴とルールを理解し、他にも同じCSSをかけているところをclass名化し、CSSを節約します。
04:54
バナーの文字や位置、大きさの調整方法を解説しています。 ここでは、背景画像と文字の位置を、paddingプロパティを利用して調整します。
03:51

ここでは、フッター部分のマークアップ方法を解説しています。 テキストをセンタリングしたり、内側の余白を調整して、デザインと同じになるようCSSを記述します。

Section 6: 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
04:34

下層ページ用にファイルを複製する方法を解説しています。 ここでは、トップページのhtmlファイルを複製し、必要のないタグを削除します。

06:18
メニュー一覧ページの見出しを作成する方法を解説しています。 ここでは、見出しタグを使って見出しを表示させ、背景画像を利用した画像の見出しを作成します。
05:18
リストタグを使ってメニュー一覧を作成する方法を解説しています。
06:39
リストタグを使って作成したメニュー一覧に、文字サイズや大きさ、余白などのデザインを調整するためのCSSを記述する方法を解説しています。
05:16

ご予約ページ用のファイルを新規作成する方法を解説しています。 ここでは、ほぼ同じデザインのhtmlファイルを複製し、文章等の修正を行っていきます。

04:42
注意文のデザインを調整する方法を解説しています。 ここでは、背景の色と内側の余白の調整を行います。
04:47
テープルタグを使ってフォームを作成する方法を解説しています。 ここでは、まず基盤となるテーブルと簡単な入力フォームの作成を行います。
03:56

フォームのラベルを設定する方法を解説しています。 ここでは、ラベルをタグを使ってマークアップします。

04:43

チェックボックスを作成する方法を解説しています。 ここでは、チェックボックスとラベルを作成します。

Section 7: 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
04:37
フォームのラベルに対してのCSSをかける方法を解説しています。 ここでは、デザインと同じになるように文字のサイズや色の設定を行います。
05:06

フォームの入力欄に対してのCSSをかける方法を解説しています。 ここでは、デザインと同じになるように境界線や色、余白等の設定を行っていきます。

04:28
フォームの入力欄に対してのCSSをかける方法を解説しています。 ここでは、デザインと同じになるように、文字の大きさや余白等の設定を行っていきます。
05:16
フォームの送信ボタンに対してのCSSを記述する方法を解説しています。 ここでは、デザインと同じになるように、送信ボタンの色や大きさの設定をおこないます。
Section 8: 【上級者向け】Webマガジンサイトのマークアップ(1)
05:44
ウェブマガジンを作成するためのファイルを新規作成する方法を解説しています。 ここでは、既存のまっさらなファイルをエディターで開き、タイトル等の設定を行います。
04:42

ウェブマガジンを作成するためのスタイルシートを読み込む方法を解説しています。 ここでは、linkタグを使って実際にcssを読み込み、確認します。

05:18

ウェブマガジンのレイアウトを組む方法を解説しています。 ここでは、必要なボックスタイプのタグの記述を行います。

04:40

ウェブマガジンのレイアウトを組む方法を解説しています。 ここでは、CSSをかけて真ん中に寄せたり余白の調整を行います。

05:20
ウェブマガジンのヘッダーを作成する方法を解説しています。 ここでは、ヘッダーのロゴとナビゲーションのHTMLを書いていきます。
08:22

ウェブマガジンのヘッダーを作成する方法を解説しています。 ここでは、ヘッダーのロゴとナビゲーションにデザインと同じになるようにCSSを加えます。

07:47

ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、まずボックスを用意し横に並べていきます。

02:49

ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、必要な画像や文字をHTMLを使ってマークアップしていきます。

05:49
ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、ピックアップ記事に関するCSSを、デザインと同じになるように記述していきます。
Section 9: 【上級者向け】Webマガジンサイトのマークアップ(2)
05:11

ウェブマガジンのピックアップ記事を作成する方法を解説しています。 ここでは、positionプロパティを利用してカテゴリータグを作成していきます。

04:56
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、背景画像を利用した見出しの作成をしていきます。
04:01
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLを、リストタグを利用してマークアップします。
04:58
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLに対して、文字に関するCSSをかけていきます。
06:35

ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLに対して、レイアウトに関するCSSをかけていきます。

06:10
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、positionプロパティを利用したタグの表示を行います。
04:27

ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。 ここでは、clearプロパティを使ってfloatを適切に解除します。

03:38

ウェブマガジンサイトのコンテンツをレイアウトする方法を解説しています。 ここでは、floatを使って2カラムレイアウトを組んでいきます。

04:11
ウェブマガジンサイトのサイドバーを作成する方法を解説しています。 ここでは、カテゴリー一覧のHTMLを記述していきます。
Section 10: 【上級者向け】Webマガジンサイトのマークアップ(3)
04:15

ウェブマガジンサイトのサイドバーを作成する方法を解説しています。 ここでは、文字に関するCSSを記述していきます。

04:18
ウェブマガジンサイトのサイドバーを作成する方法を解説しています。 ここでは、境界線や余白などのボックス関連のCSSを記述していきます。
03:25

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、backgroundプロパティを利用して、アイコン付きの見出しをマークアップします。

05:12
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、定義型リストのタグを利用して、記事一覧をマークアップします。
06:35

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、記事一覧の背景の色や境界線、レイアウトを、デザインと同じになるように調整します。

03:02
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、文字に関するCSSをデザインと同じになるように記述していきます。
04:37

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、positionプロパティを利用して、タグの部分を作成していきます。

03:48

ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、余白の調整や複製を行います。

06:22

ウェブマガジンのページネーションをマークアップする方法を解説しています。 ここでは、リストタグを利用してHTMLを記述していきます。

Section 11: 【上級者向け】Webマガジンサイトのマークアップ(4)
05:37

ウェブマガジンのページネーションをマークアップする方法を解説しています。 ここでは、floatタグを利用してリストタグを横並びにします。

03:03

ウェブマガジンのページネーションをマークアップする方法を解説しています。 ここでは、背景の色や余白の調整を、デザインと同じになるように調整します。

07:33
ウェブマガジンのフッターをマークアップする方法を解説しています。 ここでは、HTMLとCSSを使ってレイアウトを組んでいきます。
04:35

ウェブマガジンのフッターをマークアップする方法を解説しています。 ここでは、ロゴや会社情報などの情報をデザインと同じになるように作成していきます。

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NEST online, ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など


Ready to start learning?
Take This Course