こりずにHTMLを書く

前回までのあらすじ

noteを初めて３日目。
ブログでいろんな装飾をしよう。そしてTwitterに連携して🆙しよう！
と意気込んで始めたものの、noteとは何物なのか始めてしまったために勘違いが続出。
そもそもnoteはHTMLのコードで文字に色を付けたり線を引いたり、そんなことはできない、という事実を２日目にして知る。
調べてから始めろよ、という声は聞かない。習うより慣れよ。取扱説明書は読まずに電化製品を使う私だ。
とはいえ、無理なことは無理なわけで。noteの文字に色はつかない。
でも、もう少しHTMLと親しくなろう。
通勤時に駅でたまに見かける人から、道端で「こんにちは」と言い合えるくらいの間柄にはなりたい。

HTMLの前に

少しnoteに歩み寄ろう

noteには「見出し画像」というシステムがある。
表紙みたいなもので、noteの中身に関連する画像を載せることができる。
なるほど。
試しに今回はそれっぽい画像を添付してみた。デジタルっぽい画像という時点で素人感が前面に出ている。

ダークモードって、見やすい？

ただ、プログラムを書いたり、コードを書いたりするときは、画面がダークモードの方が断然見やすい。素人の私が仕事などで見ている画像もダークモードだ。背景が黒、文字が白の方が文字は見やすい。なぜなのかは他のWebサイトを参照頂けるとありがたい。
といって他人任せではいけない。せっかく読んでくださっている方もいる。

ダークモードは見やすいのか？

「Qiita」Nobuko YAMADA　さんのブログより

今日のHTML

今日はいくつか書いてみよう

• 見出し

• リンク

• 下線

なぜこの３つなのか。
知りたかったから。そして初心者向けで見栄えがよくなりそうだから。
ただそれだけ。では、いってみよう。

見出し

noteはボタン一つで見出しが作れる。覚える意味がない。その通り。
では、書いていこう。
<h*>（文章）</h*>
これで見出しが書ける。「*」には１以上の数字を入れる。１が一番大きく、数字が大きくなるにしたがって見出しが小さくなる。

<h1>みだしだよ</h1>

これでよし。

リンク

リンクは以下の通り
<a href="（リンク先）">（文字）</a>
「a」はアンカータグ、「href」は「hypertext reference」の略。
引用元は下記の通りです。詳しくはこちらを参照してください。こう書けばリンクできるよ、という説明のみですので。

HTMLのhrefとは？

DMM Webcampより

<a href="（移動するURL）">リンクしたい文字</a>

下線

下線はわかりやすい。
「underline」だ。
<u>（文字）</u>
とはいってもこれだけだと黒い線が文字の下に書かれるだけ。それはさみしい。
でもたくさん覚えるのは嫌だし、書いている方も嫌だ。下線は奥が深そう。また後日書こう。

<u>下線引きたい</u>

今日も頑張った

HTMLと親しくなったか？

どうだろうか。少しはHTMLと親しくなっただろうか。
「こんにちは」と言って、HTMLは「こんにちは」と返してくれるだろうか。
いや、いいのだ。こちらが「こんにちは」と歩み寄ったことが大事だ。相手のことは相手にしかわからないのだ。HTMLにも心があると、私は信じてならない。

下線という相手

文字の下に線を引くだけ、と思っていたのだが、色を付けたり太さを変えたりと、下線は手間のかかる相手のようだ。
人間も同じだ。見た目よりも頑固な人はいる。手間がかかっても、長く付き合えば分かり合える、かもしれない。
下線にも目を向けてあげよう。