HTML&CSS コース

  推奨環境: GoogleChromeブラウザ (FirefoxではPDFが文字化けします.)
           JS問題集は、Chrome,Firefox のみの対応です.

  ✏ みんなで答えるQ&Aフォーラム
  ★ What's new?
  ♡ luvdart.com
  × 正誤表


12/1 Introduction to HTML/HTML Basics

IntroductionToHTML

13-1_Why learn HTML?
13-2_HTML and CSS
13-3_Basic terminology
13-4_Make the head
13-5_Paragraphs in the body

JS問題集

選択問題 2-1
選択問題 2-2
コードをタイプする!
『上級編』 コンピュータ用語・コードをタイプ!


Body Elements

13-6_Paragraphs and headings
13-7_More about headings!
13-7_More about headings! の結果をみる!
13-8_Using every heading

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!(今回は、1問のみです.)


Adding images to your site!

13-9_Mid-lesson breather
13-10_Adding images
13-11_Click that image
13-12_Images and links
13-13_Congratulations!
こんなん出来ました!.html

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語・コードをタイプ!



12/2 Introduction to HTML/Build Your Own Webpage

6-1_What you'll be making
6-2_Every house needs a frame
6-3_It's better with a header
6-4_Tell us about yourself
6-5_A picture's worth a thousand words
6-6_Link me!
こんなん出来ました!.html

JS問題集

コードをタイプする!



12/3 HTML Structure: Using Lists/HTML Basics #2

Making lists

16-1_Introduction
16-2_Indentation is your friend
16-3_Ordered lists
16-3_Ordered lists の結果をみる!
16-4_One more ordered list
16-5_Unordered lists
16-6_Lists inside a list
16-6_Lists inside a list の結果をみる!

JS問題集

選択問題
コードをタイプする! 2-1
コードをタイプする! 2-2
『上級編』 コンピュータ用語をタイプ!


Styling the font!

16-7_Making comments
16-8_Font size
16-8_Font size の結果をみる!
16-9_Font color
16-9_Font color のイメージを見る!
16-10_Font family
16-10_FontFamily result の結果をみる!
16-11_Recap
16-11_Recap プラス の結果をみる!

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!


More nice styling!

16-12_Background color
16-12_Background color のイメージWebページ
16-13_Aligning the text
16-13_Aligning the text のイメージWebページ
16-14_Strong words!
16-14_Strong words! のイメージWebページ
16-15_Emphasize words!
16-15_Emphasize words! のイメージWebページ
16-16_Summary

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!



12/4 HTML Structure: Using Lists/Social Networking Profile

7-1_Here's what you're building
7-1_Here's what you're building のイメージWebページ
7-2_You have the power!
7-3_A bit about you
7-4_Profile sections
7-5_Lists within lists
7-6_Fancy up your font
7-7_Bold! Italic! Bold!
とにかく、クリア!.html
こんなん出来ました、です.html

JS問題集

コードをタイプする!
『上級編』 コンピュータ用語をタイプ!



12/5 HTML Structure: Tables, Divs, and Spans/HTML Basics #3

Learning about tables

15-1_Introduction
15-1_Introduction のイメージWebページ
15-2_What are tablesQ
15-2_What are tablesQ のイメージWebページ
15-3_Rows of information
15-4_A single column
15-5_Adding a second column
15-5_Adding a second column のイメージWebページ

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!


Better tables(2014/03/24)

15-6_Head of the table
15-7_Table Heads
15-8_Naming your table
15-8_修正前のHTML実行画面.html
15-8_Naming your table のイメージWebページ
15-9_Style that head!.pdf(文字が小さめなので拡大してください)
15-9_Style that head! のイメージWebページ
15-10_Recap

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!


Div and span(2014/03/31)

15-11_'Div'ide and conquer
15-11_'Div'ide and conquer のイメージWebページ
15-12_Link it!
15-12_Link it! のイメージWebページ
15-13_Spantastic
15-13_Spantastic のイメージWebページ
15-14_Span is the man
15-14_Span is the man のイメージWebページ
15-15_Recap
15-15_Recap のイメージWebページ

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!



12/6 HTML Structure: Tables, Divs, and Spans/Clickable Photo Page(2014/4/7)

7-1_Some photos on your table
7-2_Row by row
7-2_Row by row のイメージWebページ
7-3_Cell by cell
7-3_Cell by cell のイメージWebページ
7-4_Remember - it's better with a header
7-4_Remember - it's better with a header のイメージWebページ
7-5_Nine pictures are worth 9,000 words
7-5_Nine pictures are worth 9,000 words のイメージWebページ
7-6_Link 'em up!
7-6_Link 'em up! のイメージWebページ
7-7_The sky's the limit

JS問題集

『上級編』 コンピュータ用語をタイプ!



12/7 Introduction to CSS/CSS: An Overview

What's CSS?(2014/4/14)

26-1_Seeing is believing
26-1_Seeing is believing のイメージWebページ
26-2_What CSS is
26-2_What CSS is のイメージWebページ
26-3_Why separate form from function?
26-3_Why separate form from function? のイメージWebページ
26-4_If it's in, it's out!
26-4_If it's in, it's out! のイメージWebページ
26-5_Link it up!
26-5_Link it up! のイメージWebページ
26-6_PSA - Self-closing tags

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!


CSS Syntax(2014/4/21)

26-7_Syntax for the wintax
26-7_Syntax for the wintax のイメージWebページ
26-8_One selector, many properties
26-8_One selector, many properties のイメージWebページ
26-9_Many selectors, many properties
26-9_Many selectors, many properties のイメージWebページ
26-10_The importance of semicolons
26-10_The importance of semicolons のイメージWebページ
26-11_Color commentary
26-11_Color commentary のイメージWebページ
26-12_Check yourself before you wreck yourself
26-12_Check yourself before you wreck yourself のイメージWebページ

JS問題集

選択問題
コードをタイプする!
『上級編』 コンピュータ用語をタイプ!


Details, Details(2014/4/28)

26-13_HexawhatnowQ
26-13_HexawhatnowQ のイメージWebページ
26-14_Roses are red...
26-14_Roses are red... のイメージWebページ
26-15_Pixels and ems
26-15_Pixels and ems のイメージWebページ
26-16_A font of knowledge
26-16_A font of knowledge のイメージWebページ
26-17_Backup values
26-17_Backup values のイメージWebページ
26-18_Review
26-18_Review のイメージWebページ

JS問題集

選択問題
コートをタイプする!
『上級編』 コンピュータ用語をタイプ!


Selecting HTML Elements(2014/5/5)

26-19_Background color, height, and width
26-19_Background color, height, and width のイメージWebページ
26-20_Bordering on insanity
26-20_Bordering on insanity のイメージWebページ
26-21_Links and text decoration
26-21_Links and text decoration のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語をタイプ!


Review(2014/5/12)

26-22_HTML + CSS = BFFs
26-23_Many selectors, many properties
26-23_Many selectors, many properties のイメージWebページ
26-24_Fall back!
26-24_Fall back! のイメージWebページ
26-25_Size and borders
26-25_Size and borders のイメージWebページ
26-26_Links and text decoration
26-26_Links and text decoration のイメージWebページ
こんなん出来ました!.html

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード



12/8 Introduction to CSS/Design a Button for Your Website(2014/5/19)

6-1_What you'll be building
6-1_What you'll be building のイメージWebページ
6-2_Drawing your button
6-2_Drawing your button のイメージWebページ
6-3_Shaping your button
6-3_Shaping your button のイメージWebページ
6-4_Positioning your button
6-4_Positioning your button のイメージWebページ
6-5_Adding the link
6-5_Adding the link のイメージWebページ
6-6_It's alive!
6-6_It's alive! のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語をタイプ!



12/9 CSS CLASSES AND IDS/CSS Selectors

A Greater Selection(2014/5/26)

23-1_All HTML elements are selectors
23-1_All HTML elements are selectors のイメージWebページ
23-2_Multiple Selectors
23-2_Multiple Selectors のイメージWebページ
23-3_One selector to rule them all
23-3_One selector to rule them all のイメージWebページ
23-4_Rock Your Selectors
23-4_Rock Your Selectors のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語をタイプ!


C is for Cascading(2014/6/2)

23-5_Branching
23-6_Parents, children, and siblings
23-7_Swinging from branch to branch
23-7_Swinging from branch to branch のイメージWebページ
23-8_Can you swing itQ
23-8_Can you swing itQ のイメージWebページ
23-9_See it to believe it
23-9_See it to believe it のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語をタイプ!


Class and ID Selectors(2014/6/9)

23-10_Beyond HTML elements
23-10_Beyond HTML elements のイメージWebページ
23-11_Keeping it classy
23-11_Keeping it classy のイメージWebページ
23-12_ID, please!
23-12_ID, please! のイメージWebページ
23-13_Putting it all together
23-13_Putting it all together のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語をタイプ!


Pseudo-Class Selectors(2014/6/23)

23-14_Even finer control
23-14_Even finer control のイメージWebページ
23-15_Links
23-15_Links のイメージWebページ
23-16_First child
23-16_First child のイメージWebページ
23-17_Nth child
23-17_Nth child のイメージWebページ
23-18_Show it if you know it!
23-18_Show it if you know it! のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSSコード
『上級編』 コンピュータ用語をタイプ!


Review(2014/6/30)

23-19_Final section breather
23-20_Multiple selectors
23-20_Multiple selectors のイメージWebページ
23-21_Class selectors
23-21_Class selectors のイメージWebページ
23-22_ID selectors
23-22_ID selectors のイメージWebページ
23-23_Pseudo selectors
23-23_Pseudo selectors のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSSコード
『上級編』 コンピュータ用語をタイプ!



12/10 CSS CLASSES AND IDS/Sorting Your Friends(2014/7/7)

8-1_What you'll be building
8-1_What you'll be building のイメージWebページ
8-2_Divide and conquer
8-3_Style those divs!
8-3_Style those divs! のイメージWebページ
8-4_Classify
8-4_Classify のイメージWebページ
8-5_Use classes to add class
8-5_Use classes to add class のイメージWebページ
8-6_No ID, no entry
8-7_Identify your IDs
8-7_Identify your IDs のイメージWebページ
8-8_You've done it!
8-8_You've done it! のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSSコード
『上級編』 コンピュータ用語をタイプ!



12/11 CSS ELEMENT POSITIONING/CSS Positioning

The Box Model(2014/7/14)

25-1_See it to believe it
25-1_See it to believe it のイメージWebページ
25-2_Taking up space
25-2_Taking up space のイメージWebページ
25-3_inline-block
25-3_inline-block のイメージWebページ
25-4_inline
25-4_inline(ナビゲーションバー)
25-5_None!
25-5_None!(none 以外の方法で、「見えなく」する!)

JS問題集(2014/7/21)

選択問題
コードをタイプする! HTML コード
コードをタイプする! CSSコード
『上級編』 コンピュータ用語をタイプ!


Margins, Borders, and Padding(2014/8/4)

25-6_Sketching it out
25-7_Margin
25-7_Margin のイメージWebページ
25-8_Margin top, right, bottom, left
25-8_Margin top, right, bottom, left のイメージWebページ
25-9_Borders
25-9_Borders のイメージWebページ
25-10_Padding
25-10_Padding のイメージWebページ
25-11_Negative values
25-11_Negative values のイメージWebページ
25-12_Review
25-12_Review のイメージWebページ

JS問題集

選択問題 2-1
選択問題 2-2
コードをタイプする! HTML コード
コードをタイプする! CSS コード
『上級編』 コンピュータ用語・コードをタイプ!


Floating(2014/8/18)

25-13_To the right!
25-13_To the right! のイメージWebページ
25-14_To the left!
25-14_To the left! のイメージWebページ
25-15_Float for two
25-15_Float for two のイメージWebページ
25-16_Clearing elements
25-16_Clearing elements のイメージWebページ
【25-16 Cearing elements】 を探る!

JS問題集

選択問題
コードをタイプする! HTMLコード
コードをタイプする! CSSコード


Absolute, Relative, and Fixed Positioning(2014/8/25, 9/8, 9/15, 9/22, 9/29, 10/6)

+. positionプロパティ: 予習
25-17_Static by default
25-18_Absolute positioning
25-18_Absolute positioning のイメージWebページ
25-19_Relative positioning
25-19_Relative positioning のイメージWebページ
25-20_Fixed positioning
25-20_Fixed positioning のイメージWebページ

JS問題集

選択問題
コードをタイプする! HTMLコード
コードをタイプする! CSSコード


Review(2014/12/8, 12/15)

Review の予習
25-21 The stroy so far
25-22 Navigation bar, where are you?
25-23 Displaying it properly
25-24 Floating right along
25-25 You've done it!



12/12 CSS ELEMENT POSITIONING/Build a Resume(2014/12/29 ~ 2015/4/20)

何を作るのですか?
8-1 What you'll be building
8-2 Laying out your divs
8-3 Sizing and color
8-4 Fixing your header
8-5 Floating left and right
8-6 Clearing the footer
8-7 Headings, paragraphs, and lists
8-8 Victory!