Programing beginner by koala

【TechAcademy】はじめてのCSS入門:動画で使用するソースコードを用意しました!

マナブさんのプログラミングロードマップにて、まず始めにTechAcademyさんの動画が全部で58本ありますね!

58本と言っても、1本5分前後なので、マックス頑張れば1日で終わる内容なのですが、見ればいいってもんじゃなくて、見て、実践して、理解するのが大事なので、一通りやってみるのに1週間くらいかかるのかなと思います。。

で、実践する際に、動画と同じようなソースコードを作った方が、理解力が上がるので、私はそうしていますが、やっぱり時間がかかりますね(^_^;)

ただ、勉強するっていうことを考えると、htmlの動画に関しては、実際に動画を一時停止しながら、自分で打ち込みつつ、ソースコードやSublime textの使い方になれるのが必要かなと思います。

しかしながら、CSSに至っては、htmlのソースコードに対して「指定」していくので、htmlのソースコードがあると楽だなーと思いました。

そこで、動画とまったく同じ文章ではありませんが、同じようなものを用意しておきました!私は自営業で時間にも余裕があるので。。

同じくTech AcademyさんのCSS学習動画でプログラミングを学んでいる方は、ご自由にコピペして使ってください(^^)
※順次追加していきます!

Tech AcademyのCSS学習動画34本はこちら

※CSSの打ち込みに関しては、勉強になると思うので、一時停止しながら、実際に打ち込む練習をするといいかなと思います。

Contents

Tech Academy【CSSの動画】1-4~1-5のソースコード

 

※1-5に関しては「<h1>12345</h1>~</p> 」の部分は消してもOKです!

Tech Academy【CSSの動画】2-1~2-2のソースコード

1-5で使用したソースコードをそのまま使用できます!

Tech Academy【CSSの動画】2-3のソースコード

Tech Academy【CSSの動画】2-4~2-5のソースコード

 

※2-5に関しては、<h2>Heading 2</h2>の上に、下記のコードを追加

Tech Academy【CSSの動画】2-6のソースコード

2-5とほとんど同じですが、”#”のリンク先が変わります。

Tech Academy【CSSの動画】2-7のソースコード

Tech Academy【CSSの動画】3-3のソースコード

Tech Academy【CSSの動画】4-2~4-5のソースコード

※文章はwikipediaよりお借りしました。

※4-3の「line-height」の確認は、htmlのタイトルの名前(h1タグです)をもう少し長くするか、下記のように画面を小さくすると確認できるかと思います。

Tech Academy【CSSの動画】4-6のソースコード

Tech Academy【CSSの動画】5-1~5-2のソースコード

※文章はwikipediaよりお借りしました。

Tech Academy【CSSの動画】5-3~5-4のソースコード

※文章は下記よりお借りしました。
Australia-wikipedia
Gold coast Queensland-Wikipedia
Melbourne-Wikipedia

Tech Academy【CSSの動画】6-1のソースコード

※画像の名前(黄マーカーの「abc.jpg」の部分はご自分の画像の名前に変えてください)

※文章はwikipediaよりお借りしました。

Tech Academy【CSSの動画】6-2~6-3のソースコード

Tech Academy【CSSの動画】7-1のソースコード

※特に日本語を使用しないので、<html lang=”ja”>←この部分と、上記のソースコード、黄マーカーの部分はなくてもOKです!

※画像を使用します。htmlファイルの中にimgフォルダを作り、その中に画像を2つほど用意しておくといいです。htmlファイルと同じファイルに画像を入れる場合は、ファイルパスの「img/」が不要になるので注意!

Tech Academy【CSSの動画】7-2のソースコード

こちらでは2つのhtmlファイルを使用します。一つは、7-1と同じで、もう一つは下記になります。

※文章は下記よりお借りしました。
Australia-wikipedia
Gold coast Queensland-Wikipedia
Melbourne-Wikipedia

※ただ7-2に関しては、動画通りにやってもうまく反映されません。原因と対処法に関しては、こちらの記事にまとめたので参考にしてみてください(^^)

Tech Academy【CSSの動画】7-3のソースコード

※文章はwikipediaよりお借りしました。

Tech Academy【CSSの動画】8-1のソースコード

※文章はwikipediaよりお借りしました。

Tech Academy【CSSの動画】8-2のソースコード

※8-2、8-3に関しては、htmlのソースコードが紹介されていませんね!どんな指定があるのか、こちらの記事で説明しているので、参考にしてみてください(^^)

Tech Academy【CSSの動画】8-3のソースコード

※8-2、8-3に関しては、htmlのソースコードが紹介されていませんね!どんな指定があるのか、こちらの記事で説明しているので、参考にしてみてください(^^)

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら