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

プログラミング

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

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

管理人コード書くってよ


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

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

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

まずは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で検索!となります

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

<a href=“https://~~~~~~~.jp”>
<img src=“sakura.jpg”>
</a>

となります

リスト・表の書き方


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

<us>
<li>卵</li>
<li>醤油</li>
</ul>

となります

表の作り方

<table>で囲みます

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

<table border=”1″>
<tr>
<th colspan=”2″>せる1</th>
</tr>
<tr>
<td rowspan=”2″>せる2</td>
<td>せる3</td>
</tr>
<tr>
<td>せる4</td>
</tr>
</table>

まとめ


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

<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">セル1</th>
        </tr>
        <tr>
            <td rowspan="2">セル2</td>
            <td>セル3</td>
        </tr>
        <tr>
            <td>セル4</td>
        </tr>
    </table>

</body>

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

画像はその辺の出来合いのものを使いました

なんとなくサイトを作るための材料が理解できたところで本日はこのくらいで終わりましょう

自分がやっていることがこうやって形になることで今後も続けていくことができそうです。

また次回の記事でお会いしましょう

↓使用した教材はこちら↓
1冊ですべて身につくHTML & CSSとWebデザイン入門講座

コメント

タイトルとURLをコピーしました