プログラミングを一度挫折した大学生がHTML、CSSに手を出した話・その3

今回の記事は前回の続きとなっております。

まだみていない人はこちらをご覧ください

管理人コード書くってよ
1. 何かが違う、、、
各コードの役割
まとめ

管理人コード書くってよ

さあ、やっとプログラミングのコードを書き始めます。

といってもまだ初めの初めですが笑

教科書の通りに進んでいきます。

まずはVisualStudioを開いてHTMLファイルを作ります。

名前はなんでもいいらしいです。

そのあとは教科書に書いてあるサンプルコードを書いていきます。

教科書に書いてある通りにポチポチ、、、

さあ書けました。それではこちらのファイルを保存して、ブラウザにドラッグ&ドロップ！

できた！

何かが違う、、、

初めてコードを書くことができました！

けど、、、何かが違う、、、

教科書では「猫の1日」の部分が大きくなるはずなのですが、、、

なにが違うんだ、、教科書と自分が打ったソースコードを見比べます。

あ！ありました「h1」となるべきところが「hl」となっていました。

ちゃんと「1」に直して、、もう一度チャレンジ！

できました！ちゃんと文字のサイズが大きくなっています。

こうやって自分がやったことがちゃんと目に見える形で出てくるっていいですね！

各コードの役割

ここで先ほど書いたコードの役割について触れていきます

！DOCTYPE html：DOCTtypeの宣言
ja：日本語と教える
UTFー8：UTFー8の文字コード
html：HTMLに文書だと宣言
head：HTMLページの情報が入ります。
meta：メタ要素
title：タイトル
Body：HTMLの本体部分が入る
<p>：段落の文章を挟む

それぞれの要素をタグの中の入れ子に入れることで役割を果たします。

いい例	悪い例
<p><strong>入れ子</strong>の書き方</p>	<p><strong>入れ子</p>の書き方</strong>

見出し

見出しは<h○>で書くことができます。

見出しは1から6まであるので必要に応じて使っていきます。

記事のタイトルや見出しで使います。

だんだん小さくなるように使っていくのがセオリーです。

基本はh3くらいまでで収まるようにするのがいいかなという所見です。

段落・写真・リンクの挿入

段落は<p>で表します。「p」はparagraphのpから来ており、文章のまとまりを作ります。

画像の挿入は<img>を使います。

どの画像を使うのかということを指定しなくてはいけないので「src」という場所を指定するコードを使います。

例：<img src=“sakura.jpg”> （桜という写真を写します。）

リンクは<a href=“”>と</a>で挟みます。（メールは<a href=“mailto:~~~~~~~@~~~~”></a>）

例えば<a href=“https://~~~~~~~.jp”>Google</a>で検索！とすると

Googleで検索！となります

これらを組み合わせて画像にリンクを貼るとすると

となります

リスト・表の書き方

リストは<ul>で囲みます。例えばリストの例としては

となります

表の作り方

<table>で囲みます

隣のセルを結合させるには「colspan」、上下のセルを結合させるには「rowspan」というコードを使います

まとめ

これらの全てを一つのコードにすると以下のようになります。

<body>
    <h1>猫の一日</h1>
    <h3>ひたすら寝ています。</h3>
    <p>猫ちゃんの寝顔に癒されます</p>
    <a href="https://townwork.net/magazine/knowhow/search/baito_search/38961/">
    <img src="ハウル.jpg" alt="ハウル">
    </a>
    <a href="mailto:〜〜〜〜〜〜〜〜〜">お問い合わせ</a>
    <ul>
        <li>卵</li>
        <li>醤油</li>
    </ul>
    <table border="1">
        <tr>
            <th colspan="2">セル１</th>
        </tr>
        <tr>
            <td rowspan="2">セル２</td>
            <td>セル３</td>
        </tr>
        <tr>
            <td>セル４</td>
        </tr>
    </table>

</body>

そしてこれをブラウザ上で表すと