Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
Rating: 4.1 out of 5(1,661 ratings)
10,381 students
Created byNEST online
Last updated 10/2015
Japanese

What you'll learn

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

Course content

11 sections91 lectures8h 58m total length
  • 第1回:サイト情報を設定するmetaタグを入力してみよう7:19

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

  • 第2回:レイアウトのためのタグを追加してみよう7:25

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

  • 第3回:コメントアウトでわかりやすいhtmlを書いてみよう2:37

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

  • 第4回:横幅と縦幅を設定しよう(1)4:45

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

  • 第4回:横幅と縦幅を設定しよう(2)4:18
    cssのwidthプロパティとheightプロパティを使って、ボックスの縦幅と横幅を設定し、ウェブサイトレイアウトの基盤を作ります。background-colorプロパティを利用して、目に見えるボックスを作成していきます。
  • 第5回:floatで2カラムレイアウトを組んでみよう3:37

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

  • 第6回:marginでサイト全体を中央に寄せてみよう6:22
    marginプロパティを利用して、サイト全体を中央に寄せる方法を、初心者向けに解説しています。
  • 第7回:ロゴを配置してみよう5:37
    サイトタイトルを示す見出しタグを使って、ロゴをマークアップする方法を、初心者向けに解説しています。
  • 第8回:ナビゲーションをマークアップしてみよう3:27

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

  • 第9回:floatを使ってロゴとナビを横並びにしてみよう7:06
    floatプロパティを利用して、ロゴとナビゲーション、ナビゲーションリスト全体を横並びにする方法を、初心者向けに解説しています。

Requirements

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

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


Who this course is for:

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