HTML+CSS+Javascript入門！

今回は、HTML以外に「CSS」「Javascript」も学習しました。

CSS = Webページのデザインを指定する言語
Javascript = Webページへの動きをつける言語

現時点での私の認識は、上記ほどの乏しい認識です。
Javaとは全くの別物と言うことも今回初めて知りました。。。
Javascriptは、かなり奥が深く、フロントの肝であるのでこれからどんどん勉強していきます！

それではいつも通り、コード実装していきます。

cssの指定には、HTMLファイル内へ直接記載することは可能ですが、
上外部参照として記述します。

<link rel="stylesheet" href="style.css">

style.css内の記述は、以下となります。
今回は、ヘッダーにある「h1」に色付け、liタグの「・」を消してみました！

header > h1 {
    background-color: lightslategrey;
}

li {
    list-style: none;
}

Javascriptについては、ボタンを配置してクリックしたらアラートが出るようにしてみました！

<li>
    <a href="#" target="_blank" rel="noopener noreferrer">
        <input type="button" value="HOME" onclick="alert('HOME');">
    </a>
</li>
<li>
    <a href="#">
        <input type="button" value="SNS">
    </a>
</li>
<li>
    <a href="#">
        <input type="button" value="ABOUT">
    </a>
</li>

実装画面が以下になります。
無事成功！見出しの色つけ、ボタン付与、「・」削除がうまくいってます。

Webサービスのフロント部分をユーザーさんが使いやすいように作る、ことにすこ〜しだけ触れられました。
まだまだ、一歩踏み出したばかりですが、一つずつ課題解決してWeb系エンジニアになります！

最後まで読んでいただきありがとうございました。