はじめに

　プログラミングを始める際、どの言語から学ぶべきか悩むことが多いと思います。私自身、大学でプログラミングを学び始めたとき、最初に触れたのがHTMLでした。ここでは、HTML/CSSから学び始めることのメリットを私の経験を交えて紹介します。

自己紹介

弘前大学理工学部所属の大学2年生
プログラミングを学び始めたのは大学1年の10月
約1年間の勉強末、長期インターンへの参加や個人案件を月3件程度安定して獲得できるようになった
好きな言語はflutter、swiftなどのアプリ系言語

HTMLとは

　HTML（HyperText Markup Language）は、ウェブページなどの見た目を作成するための言語です。タグを使い見出し、段落、リンク、画像などを記述し、基盤を形成します。CSSやJavaScriptと組み合わせて、スタイルや動的な機能を追加します。

HTML/CSSから始めるべきだと思ったきっかけ

　自分は元々プログラミングに興味がなく、大学で出される課題などをやっていくうちにどんどん嫌いになっていきました。
1度学部学科を本気で変更しようと思っていた時期があったほどです。
しかし現状のまま卒業したら4年間を無駄にしてしまうと思い、苦手なプログラミングに向き合うことにしました。
そこで出会ったのがHTMLです。HTMLは少しコードを書いただけでもサイトの見た目に変化が現れるのでとても面白く、そのままどっぷりハマってしまいました。
きっとHTML以外の言語から始めていればエンジニアになる道は諦めていたと思います。

なぜHTML/CSSから始めるべきなのか

　先述した通りHTMLはたった2,3行のコードでもwebサイトの見た目が作成できます。これによって自分の書いたコードがどう動くのか、視覚的に把握することができます。自分の書いたコードがサイトになるのは初学者にとって非常に面白い体験なのでもっと学びたいというモチベーションが湧いてきます。
学習へのモチベーションの向上、これが主な理由になります。
また、短期間で習得できるし、ホームページ制作などに使えます。ホームページ制作は案件数が多いジャンルなのでお金を稼ぎたいという人にもおすすめできます。

HTML/CSSで実際にサイトの見た目を作ろう

作成するのは

このヘッダーです。コードは下のようになります。

HTML
<body>
<div class="header">
    <div class="left">HIROSAKI UNIVERSITY</div>
    <div class="right">
        <a href="#">学内情報</a>
        <a href="#">入試情報</a>
        <a href="#">研究室情報</a>
    </div>
</div>
</body>

使っている要素はbody,div,aのみです。

bodyは全体を囲みます。
divはdivideの略なので仕切り、ブロックのようなイメージです。画像で考えるとheaderという紫のブロックがあって、その内部左側にHIROSAKI UNIVERSITYというブロック、右側に各種ページへ遷移するテキストのブロックがあります。
それをコードで表現すると上記のようになります。
コードを確認するとheaderの中にleftとrightが入っていることが分かります。
そして右のブロックには3つのテキストがあるのでrightの中にはaタグが3つ入っています。aタグというのは押せば他のページなどに遷移できるように設定できるものになります。
これで基盤は整いました。

今のコードを記述した状態のサイトは以下の画像のようになります。全然完成系とはかけ離れていますよね。

そこでCSSを適用する必要があります。CSSは以下のコードです。

CSS
body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
}

.header {
    background-color: #8E548F;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100px;
}

.header .left {
    font-size: 32px;
    font-weight: bold;
    margin-left: 56px;
}

.header .right a {
    margin-left: 50px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    font-size: 24px;
    position: relative;
}

.header .right {
    margin-right: 56px;
}

一見複雑そうに見えるCSSですがよく見ればめちゃくちゃ簡単です。
1つずつ解説していきます。

body font-familyでフォントの種類(ゴシック、明朝など)を設定しています

.header ヘッダー(紫のところ)のスタイルを設定しています。主な設定はbackground-colorで背景色を設定、colorで文字色を設定、width,heightで横幅と高さを設定しています。

.header .left ヘッダーの中のleftを指定してスタイルを設定しています。主な設定はfont-sizeでフォントサイズの設定、font-weightで太文字に設定しています。

.header .right a ヘッダーの中のrightのaタグを指定してスタイルを設定しています。主な設定は太字、テキストの色変更、フォントサイズの変更です。

最後にところどころにあったのですが飛ばしてきたmarginについて解説します。marginは余白を設定するものです。例えば.header .leftにmargin-leftが設定されていますがこれがないと以下のようになります。

左側のHIROSAKI UNIVERSITYがヘッダーの左端っこにあって違和感がありますよね。そこでmargin-leftを56px分設定してあげると左側に余白が56px分できるので下のようにみやすくなります。これで完成です！

display:flexについての解説

先ほど飛ばしたdisplay:flexは少し複雑なのでここで解説します。
まずdisplay:flexがないとこのようになります。

つまり各ブロック(leftとright)は普通縦に並ぶということです。しかし今回作成したいのはleftとrightが横一直線に並んだものです。そこでdisplay:flexを適応します。これを.headerに適応するとヘッダーの中にある2つのブロックが横並びになってくれます。

しかしこれだけだと変ですよね。rightは右端にあって、現在は上側に寄っているのでもっと真ん中に配置したいですよね。
そこでjustify-content: space-between;とalign-items: center;を設定します。
justify-content: space-between;で2つのブロックの間に余白を開けて配置できて(つまり左側と右側に配置できる)
align-items: center;で縦方向の中心に配置できます。

これを設定すると完成になります。

おすすめ勉強方法

　エンジニアの登竜門であるProgateでの学習がおすすめです。ゲームをやっている感覚でサイト構築のやり方や基本的な記述方法が学べるので楽しいと感じたままどんどん学習を進められます。
　月額があるので1ヶ月にがっつりと詰め込んで勉強し、満足したら解約するという進め方が時間、コストともに効率がよいやり方です。無料体験もあるのでまずは体験してみてほしいです。
　また、chat-gptなどのAIもどんどん使っていくのがいいと思います。写真を貼り付けてこのサイトをHTMLで書いてなどと依頼すると再現してくれるのでそのコードを読んで勉強するのが最適だと思います。

最後に

身近な人にプログラミングをやっている人があまりいないので、その面白さを広めたいと思いこの記事を書いてみました。
これをみて1人でも多くの方がプログラミングに興味を持っていただけると幸いです。