実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
4.1 (814 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,670 students enrolled

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

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。
Bestseller
4.1 (814 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
5,670 students enrolled
Created by NEST online
Last updated 10/2015
Japanese
Price: $79.99
30-Day Money-Back Guarantee
This course includes
  • 9 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです
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サイト制作は自信のない方
  • より実践的なコーディングのスキルを身に着けたい方
Course content
Expand all 91 lectures 08:58:00
+ 【初心者向け】クリニックサイトのマークアップ(1)
10 lectures 52:33

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

Preview 07:19

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

Preview 07:25

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

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

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

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

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

第5回:floatで2カラムレイアウトを組んでみよう
03:37
marginプロパティを利用して、サイト全体を中央に寄せる方法を、初心者向けに解説しています。
第6回:marginでサイト全体を中央に寄せてみよう
06:22
サイトタイトルを示す見出しタグを使って、ロゴをマークアップする方法を、初心者向けに解説しています。
第7回:ロゴを配置してみよう
05:37

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

第8回:ナビゲーションをマークアップしてみよう
03:27
floatプロパティを利用して、ロゴとナビゲーション、ナビゲーションリスト全体を横並びにする方法を、初心者向けに解説しています。
第9回:floatを使ってロゴとナビを横並びにしてみよう
07:06
+ 【初心者向け】クリニックサイトのマークアップ(2)
10 lectures 01:00:04

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

第10回:メイン画像を表示させてみよう
01:55

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

第11回:リストタグを使ってバナーを作ってみよう
02:34
背景画像を利用したバナーを作成する方法を、初心者向けに解説しています。 ここでは、横幅や縦幅、背景の色や境界線といったボックスのデザインに関するCSSを書きます。
第12回:背景画像を利用したバナーを作ってみよう(1)
07:34

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

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

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

第14回:floatを使ってdtとddを横並びにしよう
03:20
content="お知らせ部分のマークアップ方法を、初心者向けに解説しています。 ここでは、擬似クラスを利用して、奇数行のタグに対して背景の色を設定します。"
第15回:擬似クラスを使って奇数行に背景の色を適応させよう
05:35
フッターのマークアップ方法を、初心者向けに解説しています。 ここでは、フッターに記述するべきhtmlタグを記述していきます。
第16回:フッターに必要なタグを記述してみよう
06:29
フッターのマークアップ方法を、初心者向けに解説しています。 ここでは、フッターに記述したhtmlに、デザインと同じになるようなcssを記述していきます。
第17回:フッターに必要なCSSを記述してみよう
13:48
+ 【中級者向け】美容院のWEBサイト(1)〜トップページ編〜
9 lectures 47:34

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

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

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

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

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

第9回:背景画像を使ってロゴのアイコンを表示させよう
04:56
+ 【中級者向け】美容院のWEBサイト(2)〜トップページ編〜
9 lectures 43:18

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

第10回:余白を調整してロゴを完成させよう
05:02
ナビゲーションをマークアップする方法について解説しています。 ここでは、ナビゲーションに必要なhtmlを記述します。
第11回:ナビゲーションをマークアップしよう
04:42
マウスホバーで下線がつくリンクを作成する方法について解説しています。 ここでは、:hover擬似クラスを利用して文字の色を変えます。
第12回:マウスホバーで下線がつくリンクを作ろう(1)
05:45

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

第12回:マウスホバーで下線がつくリンクを作ろう(2)
04:42
横並びのナビゲーションを作成する方法について解説しています。 ここでは、floatプロパティを利用してリストタグを横に並べます。
第13回:横並びのナビゲーションを作ろう
04:49

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

第14回:ナビゲーションの位置を調整しよう
02:50

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

第15回:positionを使って右上にバナーを配置しよう
06:16
背景に画像を設定する方法について解説します。 ここでは、backgroundプロパティを利用して、背景全体にクロスの画像を敷き詰めます。
第16回:背景に画像を設定しよう
03:24

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

第17回:影のついたメイン画像を作成してみよう
05:48
+ 【中級者向け】美容院のWEBサイト(3)〜トップページ編〜
7 lectures 36:39

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

第18回:新着情報一覧の背景を作成してみよう
05:37
新着情報一覧の文字のデザインをする方法を解説しています。 ここでは、デザインと同じになるようにフォントのサイズや太さ等の調整を行います。
第19回:新着情報一覧の文字をデザインしてみよう
07:01

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

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

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

最終回:フッターを作成しよう
03:51
+ 【中級者向け】美容院のWEBサイト(4)〜下層ページ編〜
9 lectures 46:13

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

第1回:下層ページ用にファイルを複製しよう
04:34
メニュー一覧ページの見出しを作成する方法を解説しています。 ここでは、見出しタグを使って見出しを表示させ、背景画像を利用した画像の見出しを作成します。
第2回:メニュー一覧ページの見出しを作ろう
06:18
リストタグを使ってメニュー一覧を作成する方法を解説しています。
第3回:リストタグを使ってメニュー一覧を記述しよう
05:18
リストタグを使って作成したメニュー一覧に、文字サイズや大きさ、余白などのデザインを調整するためのCSSを記述する方法を解説しています。
第4回:メニュー一覧のデザインを調整しよう
06:39

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

第5回:ファイルの複製と見出しの修正を行おう
05:16
注意文のデザインを調整する方法を解説しています。 ここでは、背景の色と内側の余白の調整を行います。
第6回:注意文のデザインを調整しよう
04:42
テープルタグを使ってフォームを作成する方法を解説しています。 ここでは、まず基盤となるテーブルと簡単な入力フォームの作成を行います。
第7回:テーブルタグを使ってフォームを作成しよう
04:47

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

第8回:フォームを複製して完成させよう
03:56

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

第9回:チェックボックスを作成してみよう
04:43
+ 【中級者向け】美容院のWEBサイト(5)〜下層ページ編〜
4 lectures 19:27
フォームのラベルに対してのCSSをかける方法を解説しています。 ここでは、デザインと同じになるように文字のサイズや色の設定を行います。
第10回:フォームのラベルをデザインしてみよう
04:37

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

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

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

第2回:スタイルシートを読み込んでみよう
04:42

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

第3回:ヘッダーのレイアウトを組もう(1)
05:18

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

第3回:ヘッダーのレイアウトを組もう(2)
04:40
ウェブマガジンのヘッダーを作成する方法を解説しています。 ここでは、ヘッダーのロゴとナビゲーションのHTMLを書いていきます。
第4回:ロゴとナビゲーションをマークアップしよう
05:20

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

第5回:横並びのロゴとナビゲーションを作成しよう
08:22

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

第6回:ピックアップ記事のレイアウトを組もう
07:47

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

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

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

第8回:ピックアップ記事のCSSを書いてみよう(2)
05:11
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、背景画像を利用した見出しの作成をしていきます。
第9回:背景画像を利用した見出しを作ろう
04:56
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLを、リストタグを利用してマークアップします。
第10回:ランキング一覧のHTMLを記述しよう
04:01
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、ランキング一覧のHTMLに対して、文字に関するCSSをかけていきます。
第11回:ランキング一覧のCSSを記述しよう(1)
04:58

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

第11回:ランキング一覧のCSSを記述しよう(2)
06:35
ウェブマガジンサイトのランキング一覧をマークアップする方法を解説しています。 ここでは、positionプロパティを利用したタグの表示を行います。
第11回:ランキング一覧のCSSを記述しよう(3)
06:10

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

第12回:floatでコンテンツのレイアウトを組もう(1)
04:27

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

第12回:floatでコンテンツのレイアウトを組もう(2)
03:38
ウェブマガジンサイトのサイドバーを作成する方法を解説しています。 ここでは、カテゴリー一覧のHTMLを記述していきます。
第13回:サイドバーを作成しよう(1)
04:11
+ 【上級者向け】Webマガジンサイトのマークアップ(3)
9 lectures 41:34

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

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

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

第14回:背景画像を利用した見出しを作ろう
03:25
ウェブマガジンの記事一覧部分をマークアップする方法を解説しています。 ここでは、定義型リストのタグを利用して、記事一覧をマークアップします。
第15回:定義型リストで記事一覧をマークアップしよう
05:12

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

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

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

第15回:記事一覧に対してCSSを記述しよう(3)
04:37

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

第15回:記事一覧に対してCSSを記述しよう(4)
03:48

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

第16回:ページネーションをマークアップしよう(1)
06:22