境界線を表示しよう!

はじめに

皆様、お疲れ様です。
プログラミングスクールADVANCEの福島です。

Scratchが小学校の授業にも導入されるようになり、Scratchでのゲームクリエイターが増えてきました。
そして、来年以降は中学校・高等学校でもプログラミングの授業を追加することが予定されています。

ということで、僕の担当回ではScratchより難しい、文字で作成する本格派プログラミングを担当させていただきますので、よろしくお願いしますね♪

※当校の授業・ブログでは「VSCode」を使った説明をさせていただくことになりますので、インストールをお勧めします。
インストール手順はこちらをご覧ください。

※当ページに関係のある過去記事は以下の通りですので、先にご覧いただくことをお勧めします。
HTMLの基礎  CSSの基礎  名前の指定  ショートカットキー  テーブル

今回の内容

今回は、前回作ったテーブルに境界線をつけていきましょう。

境界線とは

境界線は要素と要素を区切る線のことで、日常生活でもたまに耳にしますよね。
htmlでも同じ意味で使用され、指定はborderで行います

設定が必ずいるというわけではないですが、テーブルなんかだと設定しておくことで表が見やすくなったりするので、設定できるようになりましょう♪

実際にコーディング!

実際の動作は以下の動画をご覧ください。

以下のコードをコピペしてもOKです♪

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>境界線を表示しよう!</title>
  </head>
  <body>
    <table border="1">
      <tr>
        <th>ステータス</th>
        <th>数値</th>
      </tr>
      <tr>
        <td>攻撃力</td>
        <td>100</td>
      </tr>
      <tr>
        <td>防御力</td>
        <td>100</td>
      </tr>
    </table>
  </body>
</html>
table {
  border-collapse: collapse;
}

以下のzipファイルにhtmlファイルや解説等の必要データをまとめていますので、ダウンロードして同じ様に動かしてみましょう。

今回は《境界線を表示しよう!.html》というファイルを用意していますので、動画と同じ様に動かしていただければ大丈夫です。

※動画内ではショートカットキーを使用しています。ショートカットキーについてはこちらをご覧ください。

手順は「記述→保存→表示の確認」となります。
表示の確認は『文字を表示してみよう!』の記事をご覧ください。

さいごに

今回は境界線についてお話をさせていただきました。
上手に使いこなして、要素の区切りをわかりやすくしましょう♪

それでは、ご覧いただきありがとうございました!

ADVANCEでは

ゲーム制作をメインとして小学生・中学生・高校生に向けてのプログラミング教室を運営しております。

無料のイベント(アクティビティ)も開催しているのでご覧くださいね☆

↓↓↓

アクティビティ詳細

また、解説ブログは随時更新!
更新日時は公式ホームページでご確認ください☆