ドットインストールを通じてカレンダー作りをしてみた（HTML Entity,Table)

ドットインストールを通じてカレンダー作りをしてみた（HTML Entity,Table)

前書き

勉強に対するやる気が出ない！昨日はPythonでもやってみようと思いProgateを課金しましたが、今日はなぜかどうしてもやる気が起こらず、仕方がないのでドットインストールでカレンダー作りをやってみることにしました。こんなことでプログラマーなんかに成れるのか？と思われる方もいるかもしれませんが、まず無理かと思いますｗ。

まあでも僕らしく、ひとまずその日その日にやってみたいことを続けていずれ知識がたまって花が開く・・・こともないかもしれませんが、とりあえず途中経過書きました。今日もみんなよろしく。

今週のお題「好きなおやつ」

以前のSNSHELPERで実験したインスタグラムアカウント何気に運用しています。
これTVCMで話題のココナラ で知り合った方から紹介されて記事化しましたが、今やその日のおやつを紹介するアカウントと化した。たまに上げてるので、もしよかったら知り合いになってやってください。

 

 

 

View this post on Instagram

今日のデザート in malaysia #デザート

A post shared by Tsuyu Naruhito (@tsuyunaruhito123) on Sep 24, 2020 at 11:12pm PDT

本日のコンテンツは下記の通りです。

〇&laquo と &raquoとは何ぞや
〇テーブルの作り方

■&laquo と &raquoとは何ぞや

 ドットインストールをやると何がいいって、なんか自分で作った感がすごい。
もちろん実際はドットインストールの中の人の知識をそのまま〇パクリして作ってるだけなんで自分の実力で作ったものでは決してない。そこで学んだことをきちんとまとめて吸収してあげることが大事だ。ってことで、きちんとレッスン中出てきた用語を咀嚼してやることにした。そうすることでJavascriptだけではなくcss,htmlも同時に吸収することができるはずだ。

では早速何気なくレッスン中に出てきた«と»とは何だろう？

これはHTML Entityと呼ばれる物の一部で、この二つ以外に山ほどある。

©だったり、∀だったりだ。

 HTML上で«や»と打つと自動で変換されて以下のような表記となる。

«
»

主な使われ方は以下の通りだ。

ちなみに、正式名称は下記の通りだ。

«　＝　left-pointing double angle quotation mark

«

»　＝　right-pointing double angle quotation mark 

»

参考に下記ウェブサイトを見るといいかもしれない。

HTML 4 Entities

■テーブルの作り方

正直告白しよう。僕はテーブルを作るのが嫌いだ。わけのわからんtbodyやらtheadやら見てて吐き気がした。
しかし、今日きちんと見てみると結構単純な仕組みであることが判明した。めでたいことやで。。。。。

少し本題から離れると、「ヘッダー」「フッター」というカタカナ言葉が病を生んだと僕は思う。私は最初、これがどっちがどっちか悩むことが多かった。なぜならこれらの言葉がヘッダー＝headerであり、フッター＝footerであることを理解していなかったからだ。当然headerは頭なのだから上で、footerは足なんだから下だ。

さて本題だ。

簡単にテーブルとは何かといえば、カレンダーで言えば枠組みのようなものだ。

下記自体テーブルタグを通じて作成されている。

これを作るにはまずtableタグで大きな枠組みを作る必要がある。

<table></table>これだけである。

これがあると、HTMLでこれからテーブルを作るんだなーという具合に情報を伝えることができる。

次にテーブルの詳細な情報を作るわけだが、先ほどの話題が少し役に立つ。
テーブルの中は以下のように作るのだ。tと繋げてそれぞれ書かれているから分かりにくかったんだが、中身は要するに、head,body,footである。それにtがついているだけだ。

<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>

次に、thead,tbody,tfootの中に入れるtrタグのtrとは、「table row」の略である。

rowとは、列のことで、これから列を作っていくでという宣言のようなもの。

実際の列の中身はth,tdで作っていく。ここで若干許せなかったのはtfタグはないらしい。 さて試しにテーブルを一個作ってみる。下記コードを動かすとどうなるか想像がつきますでしょうか。

<table>
<thead>
<tr>
<th>head</th>
<th>head</th>
<tr>
</thead>
<tbody>
<tr>
<td>body</td>
<td>body</td>
<td>body</td>
<tr>
</tbody>
<tfoot>
<tr>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<td>foot</td>
<tr>
</tfoot>
</table>

答えは下記。

head	head
body	body	body
foot	foot	foot	foot

終わりに

さて、ここまでテーブルやHTML Entityについて記事にしましたがいかがでしたでしょうか。まだドットインストールのJavascriptでカレンダーを作る編の2講座目なんですが気分が乗ってしまい記事にしてしまいました。多分明日か明後日当たりまた更新しますよろしこ。

 あ、応援してくださる方は下記、ポチっていただけると助かります。

にほんブログ村

近日中の私の記事は以下の通り。

interier.hatenablog.com

interier.hatenablog.com

interier.hatenablog.com

＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

ツイッターやってます！今年ようやく1000人超えました！1100人まであと？

↓↓↓↓↓

Tweet 

読者登録をしていただけると大変助かります。

 

 本サイトが参考になったらクリックをお願いします。

人気ブログランキング