【動画あり】簡単なHTML&CSS と開発環境の導入について、そして超大事な考え方について

2021/09/27
こんばんわ、山下雄大です。みなさんの募集内容みているとHTML&CSSって人気なんですね。一番人気じゃないですかね。そんなわけで私も久しぶりにHTML&CSSをやってみました。一発撮りです。結構CSS3とか入ってきて、昔とレイアウトシステムが変わってますね。戸惑いました(;'∀')
ちょっと怪しい動画になったかも
image

どうしてこの記事を書いたか

出張中でやることがなくこの記事を書きました。嘘です。そうじゃないです。ビギナーのみんな、ワナビーのみんなを励ましたかったからです。ワナビーって"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>

動画取り終わって

グダグダでしたね。でも企画としては面白かったかなって思います。やっぱり動画は協力な表現方法だと思いますし。ぜひリクエストなんかも頂きたいです。待ってます！