【TechAcademy】はじめてのCSS入門：動画で使用するソースコードを用意しました！
2019年4月12日 Html/CSS,Programing
マナブさんのプログラミングロードマップにて、まず始めにTechAcademyさんの動画が全部で58本ありますね！
58本と言っても、1本5分前後なので、マックス頑張れば1日で終わる内容なのですが、見ればいいってもんじゃなくて、見て、実践して、理解するのが大事なので、一通りやってみるのに1週間くらいかかるのかなと思います。。
で、実践する際に、動画と同じようなソースコードを作った方が、理解力が上がるので、私はそうしていますが、やっぱり時間がかかりますね(^_^;)
ただ、勉強するっていうことを考えると、htmlの動画に関しては、実際に動画を一時停止しながら、自分で打ち込みつつ、ソースコードやSublime textの使い方になれるのが必要かなと思います。
しかしながら、CSSに至っては、htmlのソースコードに対して「指定」していくので、htmlのソースコードがあると楽だなーと思いました。
そこで、動画とまったく同じ文章ではありませんが、同じようなものを用意しておきました！私は自営業で時間にも余裕があるので。。
同じくTech AcademyさんのCSS学習動画でプログラミングを学んでいる方は、ご自由にコピペして使ってください(^^)
※順次追加していきます！
※CSSの打ち込みに関しては、勉強になると思うので、一時停止しながら、実際に打ち込む練習をするといいかなと思います。
Contents
Tech Academy【CSSの動画】1-4～1-5のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> </head> <body> <h1>aiueo</h1> <p> helloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworld </p> <h1>abcde</h1> <p> goodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworld </p> <h1>12345</h1> <p> gdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymate </p> </body> </html> |
※1-5に関しては「＜h1＞12345＜/h1＞～＜/p＞ 」の部分は消してもOKです！
Tech Academy【CSSの動画】2-1～2-2のソースコード
1-5で使用したソースコードをそのまま使用できます！
Tech Academy【CSSの動画】2-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> </head> <body> <div class-"black">ここは黒</div> <div class="red">ここは赤</div> <div class="green">ここは緑</div> </body> </body> </html> |
Tech Academy【CSSの動画】2-4～2-5のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <h1>Heading 1</h1> <a href="#">mainクラスの子要素</a> <p> helloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworld </p> <h2>Heading 2</h2> <p> goodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworld<a href="#">mainクラスの子要素ではないリンク</a>goodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworld </p> <a href="#">mainクラスの子要素のリンク</a> <h2>Heading 2</h2> <p> gdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymate<a href="#">mainクラスの子要素ではないリンク</a>gdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymate </p> <p> howzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoing </p> </div> </body> </html> |
※2-5に関しては、＜h2＞Heading 2＜/h2＞の上に、下記のコードを追加
|
1 |
<input type="text"> |
Tech Academy【CSSの動画】2-6のソースコード
2-5とほとんど同じですが、”＃”のリンク先が変わります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSSの練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <h1>Heading 1</h1> <a href="#a">mainクラスの子要素</a> <p> helloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworldhelloworld </p> <input type="text"> <h2>Heading 2</h2> <p> goodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworld<a href="#b">mainクラスの子要素ではないリンク</a>goodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworldgoodbyeworld </p> <a href="#a">mainクラスの子要素のリンク</a> <h2>Heading 2</h2> <p> gdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymate<a href="#c">mainクラスの子要素ではないリンク</a>gdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymategdaymate </p> <p> howzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoinghowzgoing </p> </div> </body> </html> |
Tech Academy【CSSの動画】2-7のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>類似要素の練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li>The first chile of ul.</li> <li>2nd child.</li> <li>3rd child.</li> <li>4th child.</li> <li>The last child.</li> </ul> </body> </html> |
Tech Academy【CSSの動画】3-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>色の指定方法についての練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Color Values</h1> <div></div> </body> </html> |
Tech Academy【CSSの動画】4-2～4-5のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>文字のスタイルについての練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Hello world</h1> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> </body> </html> |
※文章はwikipediaよりお借りしました。
※4-3の「line-height」の確認は、htmlのタイトルの名前（h1タグです）をもう少し長くするか、下記のように画面を小さくすると確認できるかと思います。
Tech Academy【CSSの動画】4-6のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>文字のスタイルについての練習</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>helloworld</h1> <ul> <li>Istudyprogramingtoday</li> <li>Istudyenglishtoday</li> <li>Istudyhowtowriteblogtoday</li> <li>Istudymusictoday</li> <li>Istudymathandsciencetoday</li> </ul> <ol> <li>gdaymategdaymategdaymategdaymate</li> <li>howzgoinghowzgoinghowzgoinghowzgoing</li> <li>vegematevegematevegematevegemate</li> <li>hangoverhangoverhangoverhangover</li> <li>loveaustralialoveaustralialoveaustralia</li> </ol> </body> </html> |
Tech Academy【CSSの動画】5-1～5-2のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> </div> </body> </html> |
※文章はwikipediaよりお借りしました。
Tech Academy【CSSの動画】5-3～5-4のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <nav> <a href="#">About me</a> <a href="#">My work</a> <a href="#">Contact me</a> </nav> <div> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> <p> The Gold Coast is a coastal city in the Australian state of Queensland, approximately 66 kilometres south-southeast of the state capital Brisbane and immediately north of the border with New South Wales. With a census-estimated 2016 population of 638,090,the Gold Coast is the sixth-largest city in Australia, making it the largest non-capital city, and Queensland's second-largest city. The Gold Coast region remained largely uninhabited by Europeans until 1823 when explorer John Oxley landed at Mermaid Beach. The hinterland's red cedar supply attracted people to the area in the mid-19th century. Later in 1875, Southport was surveyed and established and grew a reputation as a secluded holiday destination for wealthy Brisbane residents. </p> <p> Melbourne is the capital and most populous city of the Australian state of Victoria, and the second most populous city in Australia and Oceania.Its name refers to an urban agglomeration of 9,992.5 km2 comprising a metropolitan area with 31 municipalities,nd is also the common name for its city centre. The city occupies much of the coastline of Port Phillip bay and spreads into the hinterlands towards the Dandenong and Macedon ranges, Mornington Peninsula and Yarra Valley. It has a population of approximately 4.9 million (19% of the population of Australia), and its inhabitants are referred to as "Melburnians" </p> </div> </body> </html> |
※文章は下記よりお借りしました。
Australia-wikipedia
Gold coast Queensland-Wikipedia
Melbourne-Wikipedia
Tech Academy【CSSの動画】6-1のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <img src="./abc.jpg" alt="techacademy" title="techacademy"> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> </div> </body> </html> |
※画像の名前（黄マーカーの「abc.jpg」の部分はご自分の画像の名前に変えてください）
※文章はwikipediaよりお借りしました。
Tech Academy【CSSの動画】6-2～6-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div> <div class="top">top</div> <div class="middle">middle</div> <div class="bottom">bottom</div> </div> </body> </html> |
Tech Academy【CSSの動画】7-1のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Multiple Background Images</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="skech-img"></div> </body> </html> |
※特に日本語を使用しないので、＜html lang=”ja”＞←この部分と、上記のソースコード、黄マーカーの部分はなくてもOKです！
※画像を使用します。htmlファイルの中にimgフォルダを作り、その中に画像を2つほど用意しておくといいです。htmlファイルと同じファイルに画像を入れる場合は、ファイルパスの「img/」が不要になるので注意！
Tech Academy【CSSの動画】7-2のソースコード
こちらでは２つのhtmlファイルを使用します。一つは、7-1と同じで、もう一つは下記になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Background Properties</title> <link rel="stylesheet" href="page-styles.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="scroll attch"> <h2>scroll</h2> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> <p> The Gold Coast is a coastal city in the Australian state of Queensland, approximately 66 kilometres south-southeast of the state capital Brisbane and immediately north of the border with New South Wales. With a census-estimated 2016 population of 638,090,the Gold Coast is the sixth-largest city in Australia, making it the largest non-capital city, and Queensland's second-largest city. The Gold Coast region remained largely uninhabited by Europeans until 1823 when explorer John Oxley landed at Mermaid Beach. The hinterland's red cedar supply attracted people to the area in the mid-19th century. Later in 1875, Southport was surveyed and established and grew a reputation as a secluded holiday destination for wealthy Brisbane residents. </p> <p> Melbourne is the capital and most populous city of the Australian state of Victoria, and the second most populous city in Australia and Oceania.Its name refers to an urban agglomeration of 9,992.5 km2 comprising a metropolitan area with 31 municipalities,nd is also the common name for its city centre. The city occupies much of the coastline of Port Phillip bay and spreads into the hinterlands towards the Dandenong and Macedon ranges, Mornington Peninsula and Yarra Valley. It has a population of approximately 4.9 million (19% of the population of Australia), and its inhabitants are referred to as "Melburnians" </p> </div> <div class="fixed attch"> <h2>Fixed</h2> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> <p> The Gold Coast is a coastal city in the Australian state of Queensland, approximately 66 kilometres south-southeast of the state capital Brisbane and immediately north of the border with New South Wales. With a census-estimated 2016 population of 638,090,the Gold Coast is the sixth-largest city in Australia, making it the largest non-capital city, and Queensland's second-largest city. The Gold Coast region remained largely uninhabited by Europeans until 1823 when explorer John Oxley landed at Mermaid Beach. The hinterland's red cedar supply attracted people to the area in the mid-19th century. Later in 1875, Southport was surveyed and established and grew a reputation as a secluded holiday destination for wealthy Brisbane residents. </p> <p> Melbourne is the capital and most populous city of the Australian state of Victoria, and the second most populous city in Australia and Oceania.Its name refers to an urban agglomeration of 9,992.5 km2 comprising a metropolitan area with 31 municipalities,nd is also the common name for its city centre. The city occupies much of the coastline of Port Phillip bay and spreads into the hinterlands towards the Dandenong and Macedon ranges, Mornington Peninsula and Yarra Valley. It has a population of approximately 4.9 million (19% of the population of Australia), and its inhabitants are referred to as "Melburnians" </p> </div> <div class="local attch"> <h2>Local</h2> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> <p> The Gold Coast is a coastal city in the Australian state of Queensland, approximately 66 kilometres south-southeast of the state capital Brisbane and immediately north of the border with New South Wales. With a census-estimated 2016 population of 638,090,the Gold Coast is the sixth-largest city in Australia, making it the largest non-capital city, and Queensland's second-largest city. The Gold Coast region remained largely uninhabited by Europeans until 1823 when explorer John Oxley landed at Mermaid Beach. The hinterland's red cedar supply attracted people to the area in the mid-19th century. Later in 1875, Southport was surveyed and established and grew a reputation as a secluded holiday destination for wealthy Brisbane residents. </p> <p> Melbourne is the capital and most populous city of the Australian state of Victoria, and the second most populous city in Australia and Oceania.Its name refers to an urban agglomeration of 9,992.5 km2 comprising a metropolitan area with 31 municipalities,nd is also the common name for its city centre. The city occupies much of the coastline of Port Phillip bay and spreads into the hinterlands towards the Dandenong and Macedon ranges, Mornington Peninsula and Yarra Valley. It has a population of approximately 4.9 million (19% of the population of Australia), and its inhabitants are referred to as "Melburnians" </p> </div> </body> </html> |
※文章は下記よりお借りしました。
Australia-wikipedia
Gold coast Queensland-Wikipedia
Melbourne-Wikipedia
※ただ7-2に関しては、動画通りにやってもうまく反映されません。原因と対処法に関しては、こちらの記事にまとめたので参考にしてみてください(^^)
Tech Academy【CSSの動画】7-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Full page background images</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"> <!-- Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide.--> </div> </body> </html> |
※文章はwikipediaよりお借りしました。
Tech Academy【CSSの動画】8-1のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <p> Australia, officially the Commonwealth of Australia,is a sovereign country comprising the mainland of the Australian continent, the island of Tasmania and numerous smaller islands. It is the largest country in Oceania and the world's sixth-largest country by total area. The neighbouring countries are Papua New Guinea, Indonesia and East Timor to the north; the Solomon Islands and Vanuatu to the north-east; and New Zealand to the south-east. The population of 25 million is highly urbanised and heavily concentrated on the eastern seaboard. Australia's capital is Canberra, and its largest city is Sydney. The country's other major metropolitan areas are Melbourne, Brisbane, Perth and Adelaide. </p> </div> </body> </html> |
※文章はwikipediaよりお借りしました。
Tech Academy【CSSの動画】8-2のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="rounded-box"></div> </body> </html> |
※8-2、8-3に関しては、htmlのソースコードが紹介されていませんね！どんな指定があるのか、こちらの記事で説明しているので、参考にしてみてください(^^)
Tech Academy【CSSの動画】8-3のソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ボックスの考え方</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="box"></div> </body> </html> |
※8-2、8-3に関しては、htmlのソースコードが紹介されていませんね！どんな指定があるのか、こちらの記事で説明しているので、参考にしてみてください(^^)
