隗より始めよ

今後はいろいろ考え始めます。

HTML周りを勉強してみた。

201805 プログラミング html css

ちょっと前も勉強したことあるから初めてではないのですが、意外にやるのを嫌がる人が多いこの辺りに美味しいことが落ちているのではないかと思い、再び学習し始めてみました。

メニュー

今回の教科書

今回の学習の教科書は「ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版]」です。

これまではHTML5とCSS3はやっていましたが、話を聞いているとJacvaScriptができないと話にならんということで、JavaScriptが入りながら簡単にできそうなこの本を選んでみました。

どれもまったく知らないという方にはお勧めできませんが、HTMLとCSSの本を一冊読んだくらいの方だったら面白いのではないかと思います。


やってみたこと

CSSって面倒だなって思っていたんですが、この本の課題をやってみて面白かったので、ブログに書いてみようと思いました。

アンパンマン風な絵を書いてみる

この本の演習にアンパンマンみたいなものをHTMLとCSSで描こうというのがありました。イヤー興味深い。こういうのを求めていたのだよ。というとで、やってみたのが下の絵です。

f:id:mazarimono:20180516152251p:plain

うわー・・・という感じですねwこんな下手糞なんかいってみんな思うでしょう。コードを見てみましょう。

<!DOCTYPE html>
<html>
<head>
    <style>
    div {
        position: absolute;
    }

    #anapan {
        top: 10px;
        left: 10px;
        width: 300px;
        height:300px;
        background-color: yellow;
    }

    .eye {
        width: 25px;
        height: 25px;
        background-color: black;
    }

    .left-i {
        left: 75px;
        top: 75px;
    }

    .right-i {
        left: 200px;
        top: 75px;
    }
    .cheek {
        width: 50px;
        height: 50px;
        background-color: red;
    }

    .left-c {
        left: 50px;
        top: 135px;
    }

    .right-c {
        left: 200px;
        top: 135px;
    }

    .nose {
        width: 100px;
        height: 100px;
        left: 100px;
        top: 120px;
        background-color: brown;
    }

    .mouth {
        left: 50px;
        top: 250px;
        width:200px;
        height: 10px;
        background-color: black;
    }
    </style>
</head>
<body>
    <div id="anapan">
        <div class="eye left-i"></div>
        <div class="eye right-i"></div>
        <div class="cheek left-c"></div>
        <div class="cheek right-c"></div>
        <div class="nose"></div>
        <div class="mouth"></div>
      </div>
</body>
</html>

ここではHTMLとCSSを分けずに、一つのファイルに入れてしまっています。headの部分にCSSが入っています。

なんだこれと思うかもしれませんが、こんな感じで絵が描けるのは面白いし、これはものすごいCSSの練習になるなぁと感心して記事を書いてみたわけです。

こんな角張ったアンパン野郎いるか！！ですって！？ではちょっと角をとってみましょう。全部に書き加えるの面倒ですので、divのところにborder-radius:を指定しましょう。

div {
        position: absolute;
        border-radius: 50px;
       }

と先ほどのものを変えるだけで下のようにかわいらしくなります。

f:id:mazarimono:20180516153532p:plain

面白いですね。という感じですべてに退屈したお母さんでもhtmlとcssだけで楽しめるし、このようにちょっとずつ変えていくみたいなことを見せたら子供さんもプログラミングに興味を持つかもしれませんね。僕としては子供さんに習わす前にぜひ親御さんになんて思っています。プログラミングは面白いよ！