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

HTML5 CSS3 Webサイト 制作

なかぴょん

Udemyにある「実践Webサイトコーディング講座|HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう」を受けてきたよ。
HTMLとCSSを学んでいて、実際にWebサイト制作をやってみたいと考えている方におすすめの講座だよ。

へびにょん

なかぴょんです。
今回はUdemyの講座の1つである、実践Webサイトコーディング講座|HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようを受けてきました。

HTMLとCSSを学んでいて、実際にWebサイト制作をやってみたいと考えている方におすすめの講座です。

それでは、詳しく解説していきます。

誰向きなのか

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

何が学べるのか

  • HTMLとCSSを使った実践的なWebサイトコーディング

学ぶ際の事前準備

HTMLとCSSの基礎知識が必要です。

講座詳細

セクション1 【初心者向け】クリニックサイトのマークアップ(1)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。

シンプルなデザインなので、マークアップもあまり複雑ではないため、初心者向けの章です。 初めてWebサイトをマークアップする方にオススメです。

  • 1. 第1回:サイト情報を設定するmetaタグを入力してみよう
  • 2. 第2回:レイアウトのためのタグを追加してみよう
  • 3. 第3回:コメントアウトでわかりやすいhtmlを書いてみよう
  • 4. 第4回:横幅と縦幅を設定しよう(1)
  • 5. 第4回:横幅と縦幅を設定しよう(2)
  • 6. 第5回:floatで2カラムレイアウトを組んでみよう
  • 7. 第6回:marginでサイト全体を中央に寄せてみよう
  • 8. 第7回:ロゴを配置してみよう
  • 9. 第8回:ナビゲーションをマークアップしてみよう
  • 10. 第9回:floatを使ってロゴとナビを横並びにしてみよう

セクション2 【初心者向け】クリニックサイトのマークアップ(2)

実践Webデザインの【初心者向け】クリニックのWebサイト〜トップページ編〜の章で作成した、仮想のクリニックを紹介するWebサイトを、1からマークアップしていきます。

画像タグを利用してメイン画像を表示させるところから、floatを駆使してボックスを横並びにするなど、幅広くHTMLとCSSを利用していきます。

【初心者向け】クリニックサイトのマークアップ(1) の続きの章になりますので、初めてご覧になる方はまず前の章から取り組んでください。

  • 11. 第10回:メイン画像を表示させてみよう
  • 12. 第11回:リストタグを使ってバナーを作ってみよう
  • 13. 第12回:背景画像を利用したバナーを作ってみよう(1)
  • 14. 第12回:背景画像を利用したバナーを作ってみよう(2)
  • 15. 第12回:背景画像を利用したバナーを作ってみよう(3)
  • 16. 第13回:お知らせの見出しと一覧をマークアップしよう
  • 17. 第14回:floatを使ってdtとddを横並びにしよう
  • 18. 第15回:擬似クラスを使って奇数行に背景の色を適応させよう
  • 19. 第16回:フッターに必要なタグを記述してみよう
  • 20. 第17回:フッターに必要なCSSを記述してみよう

セクション3 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。

シャドウや背景画像等の少し複雑なスタイルを使用しますので、やや中級者向けの章です。

完成版のファイルを一度見てみて、不安な方はまず「【初心者向け】クリニックサイトのマークアップ」から取り組んでみてください。

  • 21. 第1回:HTMLファイルを新規作成、タイトルを設定しよう
  • 22. 第2回:CSSファイルを新規作成、読み込ませてみよう
  • 23. 第3回:ヘッダーのレイアウトを作ってみよう
  • 24. 第4回:リセットCSSを読み込んでみよう
  • 25. 第5回:コンテンツのレイアウトを組もう
  • 26. 第6回:横幅100%のフッターを作成しよう
  • 27. 第7回:marginを使ってサイト全体の余白を調節しよう
  • 28. 第8回:見出しタグを使ってロゴをマークアップしよう
  • 29. 第9回:背景画像を使ってロゴのアイコンを表示させよう

セクション4 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。
マウスホバーでリンクに下線をつけるなど、操作性も意識したマークアップ方法を学びます。

【中級者向け】美容院のWEBサイト(1)〜トップページ編〜の続きの章になります。

  • 30. 第10回:余白を調整してロゴを完成させよう
  • 31. 第11回:ナビゲーションをマークアップしよう
  • 32. 第12回:マウスホバーで下線がつくリンクを作ろう(1)
  • 33. 第12回:マウスホバーで下線がつくリンクを作ろう(2)
  • 34. 第13回:横並びのナビゲーションを作ろう
  • 35. 第14回:ナビゲーションの位置を調整しよう
  • 36. 第15回:positionを使って右上にバナーを配置しよう
  • 37. 第16回:背景に画像を設定しよう
  • 38. 第17回:影のついたメイン画像を作成してみよう

セクション5 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。

要素ないからはみ出た部分をスクロールできる新着窓の作成など、覚えておくと便利なマークアップ方法も学びます。

【中級者向け】美容院のWEBサイト(2)〜トップページ編〜の続きの章になります。

  • 39. 第18回:新着情報一覧の背景を作成してみよう
  • 40. 第19回:新着情報一覧の文字をデザインしてみよう
  • 41. 第20回:overflowを使ってスクロール窓を作ろう
  • 42. 第21回:背景画像を利用したバナーを作ろう
  • 43. 第22回:class名を利用してボックスに影をつけよう
  • 44. 第23回:バナーの文字の位置や大きさを調整しよう
  • 45. 最終回:フッターを作成しよう

セクション6 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。

作成したトップページのファイルを複製して、下層ページをマークアップします。

同じデザインやレイアウトで、コンテンツのみ違うページをマークアップする際は、ファイルを複製して必要な部分のみを変更した方が作業が楽になります。

【中級者向け】美容院のWEBサイト(3)〜トップページ編〜の続きの章になります。

  • 46. 第1回:下層ページ用にファイルを複製しよう
  • 47. 第2回:メニュー一覧ページの見出しを作ろう
  • 48. 第3回:リストタグを使ってメニュー一覧を記述しよう
  • 49. 第4回:メニュー一覧のデザインを調整しよう
  • 50. 第5回:ファイルの複製と見出しの修正を行おう
  • 51. 第6回:注意文のデザインを調整しよう
  • 52. 第7回:テーブルタグを使ってフォームを作成しよう
  • 53. 第8回:フォームを複製して完成させよう
  • 54. 第9回:チェックボックスを作成してみよう

セクション7 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜

実践Webデザインの、【中級者向け】美容院のWebサイト制作で作成した、仮想の美容院を紹介するWebサイトデザインを、1からマークアップする方法を学びます。

inputタグを利用した、お問い合わせフォームを作成する方法を学びます。

CSSを利用して、入力しやすいようにデザインを反映させていきましょう。

【中級者向け】美容院のWEBサイト(4)〜トップページ編〜の続きの章になります。

  • 55. 第10回:フォームのラベルをデザインしてみよう
  • 56. 第11回:入力欄に関するCSSをかけてみよう(1)
  • 57. 第11回:入力欄に関するCSSをかけてみよう(2)
  • 58. 第12回:送信ボタンにCSSをかけてみよう

セクション8 【上級者向け】Webマガジンサイトのマークアップ(1)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。

縦に長いコンテンツ量の多いサイトになりますので、上級者向けの章になっています。

HTMLやCSSは、一文字でも違うと画面が真っ白になったり、エラーになってしまうので、繊細な作業を行う必要があります。

なるべくタイプミス等しないように注意してください。

  • 59. 第1回:必要なHTMLとCSSファイルを新規作成しよう
  • 60. 第2回:スタイルシートを読み込んでみよう
  • 61. 第3回:ヘッダーのレイアウトを組もう(1)
  • 62. 第3回:ヘッダーのレイアウトを組もう(2)
  • 63. 第4回:ロゴとナビゲーションをマークアップしよう
  • 64. 第5回:横並びのロゴとナビゲーションを作成しよう
  • 65. 第6回:ピックアップ記事のレイアウトを組もう
  • 66. 第7回:ピックアップ記事のHTMLを書いてみよう
  • 67. 第8回:ピックアップ記事のCSSを書いてみよう(1)

セクション9 【上級者向け】Webマガジンサイトのマークアップ(2)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。

さまざまなHTMLタグ、CSSプロパティを駆使して、デザインをそのまま反映させるようなマークアップ方法を学びます。

【上級者向け】Webマガジンサイトのマークアップ(1)の続きの章になります。

  • 68. 第8回:ピックアップ記事のCSSを書いてみよう(2)
  • 69. 第9回:背景画像を利用した見出しを作ろう
  • 70. 第10回:ランキング一覧のHTMLを記述しよう
  • 71. 第11回:ランキング一覧のCSSを記述しよう(1)
  • 72. 第11回:ランキング一覧のCSSを記述しよう(2)
  • 73. 第11回:ランキング一覧のCSSを記述しよう(3)
  • 74. 第12回:floatでコンテンツのレイアウトを組もう(1)
  • 75. 第12回:floatでコンテンツのレイアウトを組もう(2)
  • 76. 第13回:サイドバーを作成しよう(1)

セクション10 【上級者向け】Webマガジンサイトのマークアップ(3)

実践Webサイトデザインの、【上級者向け】Webメディアで作成したWebメディアを、 HTMLとCSSを使って1からコーディングしていきます。

背景画像を利用して、なるべくページの読み込み速度が早くなるよう心がけてマークアップしていきます。

【上級者向け】Webマガジンサイトのマークアップ(2)の続きの章になります。

  • 77. 第13回:サイドバーを作成しよう(2)
  • 78. 第13回:サイドバーを作成しよう(3)
  • 79. 第14回:背景画像を利用した見出しを作ろう
  • 80. 第15回:定義型リストで記事一覧をマークアップしよう
  • 81. 第15回:記事一覧に対してCSSを記述しよう(1)
  • 82. 第15回:記事一覧に対してCSSを記述しよう(2)
  • 83. 第15回:記事一覧に対してCSSを記述しよう(3)
  • 84. 第15回:記事一覧に対してCSSを記述しよう(4)
  • 85. 第16回:ページネーションをマークアップしよう(1)

セクション11 【上級者向け】Webマガジンサイトのマークアップ(4)

様々なコンテンツを提供するWebマガジンサイトをマークアップする方法を学びます。

縦に長い、コンテンツ量の多いサイトのマークアップは、些細なミスが命取りの上級者向けです。

Webメディアに必要なページネーションや、フッターを作成していきます。

10.【上級者向け】Webマガジンサイトのマークアップ(3) の続きの章になっていますので、初めてこの章をご覧になる方はまず前の章から取り組んでください。

  • 86. 第16回:ページネーションをマークアップしよう(2)
  • 87. 第16回:ページネーションをマークアップしよう(3)
  • 88. 第17回:フッターをマークアップしよう(1)
  • 89. 第17回:フッターをマークアップしよう(2)
  • 90. 第17回:フッターをマークアップしよう(3)
  • 91. [チャレンジ]NESTschool公式サイトをマークアップしてみよう

まとめ

今回はUdemyの講座の1つである、実践Webサイトコーディング講座|HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみようについてご紹介しました。

HTMLとCSSを使って、実際にWebサイト制作を学ぶことができて良かったです。

今回紹介した講座以外にも僕が受けた講座はいくつかあるので、興味がある方はこちらの記事をご覧ください。

※ただいま作成中途中のため、一部デザインが崩れて見ずらくなっております。完成まで少々おまちください。

なかぴょんに受けてほしい学習サービスのリクエスト等ございましたら、
お問い合わせにてお伝えください。

リクエストをいただいた講座は受け終わった後で記事にします。

※費用が高い講座は、リクエストをいただいてすぐには受けられないかもしれません。
壊滅的な軍資金不足・・・ご容赦ください。

なかぴょん

リクエストお待ちしております(^^)

明日も元気にぴょんぴょん!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です