【動画あり】簡単なHTML&CSS と開発環境の導入、そして超大事な考え方伝えます
【動画あり】簡単なHTML&CSS と開発環境の導入について、そして超大事な考え方について
2021/09/27
こんばんわ、山下雄大です。みなさんの募集内容みているとHTML&CSSって人気なんですね。一番人気じゃないですかね。そんなわけで私も久しぶりにHTML&CSSをやってみました。一発撮りです。結構CSS3とか入ってきて、昔とレイアウトシステムが変わってますね。戸惑いました(;'∀')
ちょっと怪しい動画になったかも
どうしてこの記事を書いたか
出張中でやることがなくこの記事を書きました。嘘です。そうじゃないです。ビギナーのみんな、ワナビーのみんなを励ましたかったからです。ワナビーって"I wanna be a hacker"とかっていうじゃん。何かになりたいあこがれている人ね。この動画で僕が言いたかったことは、html/cssは、楽しくて、簡単、そして大事なことは、自立して学習、調べられるようになってね、そのとっかかりを提供したかったのよ。
動画のみどころ
- 開発環境であるvisual studio codeの導入方法
- hello world htmlを作成する
- googleのウェブサイトを解析して真似してつくっているところ
動画のリンク
(Youtube 動画だよ)[https://www.youtube.com/watch?v=-kObTsQYGsk]
開発環境のダウンロードページ
(VisualStudioCode Download page)[https://code.visualstudio.com/]
で、なにをつくったか?
今回はGoogleのレイアウトをつくりました。詳細は動画を見てね。
以下のようなソースを書きました。元のGoogleのページを分析するところを是非学んでね~
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>googleのまね~</title>
</head>
<body style="height: 100%; margin: 0px;">
<div id="main" style="background-color: #F0F0F0;height: 100%;flex-direction: column;display: flex;">
<div id="header" style="background-color: #C0C0C0; height: 60px;border:#808080 1px solid; margin: 2px;"></div>
<div id="img" style="background-color: #C0C0C0; border:#808080 1px solid; margin: 2px;
display:flex;flex-direction:column; align-items: center;">
<a href="https://www.google.co.jp/search?sxsrf=AOaemvJyWqlEwpkSdHZkEFc-vboh6NdDKg:1632738994499&q=Google&oi=ddle&ct=174788361&hl=en-GB&si=AHuW2sTKkcygiABA_QY_APML0LA-zLeY72p7cWUnG9AtyAalP1i53_krmmvC13Fdies6c3DHfW4HDEWuVKF-2lUnrwn7wmvX2_-nc3qI02CTiHgQwXfgST4%3D&sa=X&ved=0ahUKEwinh5re-p7zAhXUjp4KHaeBBRAQPQgC">
<img src="https://www.google.co.jp/logos/doodles/2021/googles-23rd-birthday-6753651837109087-law.gif" height="210"/>
</a>
</div>
<div id="search" style="background-color: #C0C0C0; height: 140px;border:#808080 1px solid; margin: 2px;"></div>
<div id="space" style="background-color: #C0C0C0; height: 255px;border:#808080 1px solid; margin: 2px;flex-grow: 1;"></div>
<div id="footer" style="background-color: #C0C0C0; height: 60px;border:#808080 1px solid; margin: 2px;"></div>
</div>
</body>
</html>
動画取り終わって
グダグダでしたね。でも企画としては面白かったかなって思います。やっぱり動画は協力な表現方法だと思いますし。ぜひリクエストなんかも頂きたいです。待ってます!