最近やっていること

戒めが必要な20日間

まず、最近このブログを更新できていない不甲斐ない自分を戒めたい。

生活環境が大きく変わったと言えど、自分のやるべきことを自分の立てたスケジュールで遂行することができない状態というのは、とてもよろしくない。

この20日間でこなすはずだったことのほとんどを、まだ完了できていないことを踏まえると、自分には「計画時に、作業時間を短く見積もる」という癖があるらしい、ということがわかった。

これがわかっただけでも、まあ良しとしよう。

コロナが自分にもたらしたもの

気づけば4月も折り返しを過ぎ、今日からは下旬。

3月までの怒涛の日々を過ぎた途端、コロナの猛威が日本を襲い、経済停滞状態になった。

昨年12月で仕事を辞めた身にとっては、正直あまり経済的な影響が無いというか、そもそも無収入を覚悟して今の生活をしているわけなので、改めて気が引き締まったに留まった。

これからの食い扶持

1人で稼ぎ始めて、早20日が経った。

頼みの綱であるプログラミング関係の案件は、まだ取れていない。

やはり未経験からフリーのエンジニアになるにはまだ学習が足りないようで、様々なクラウドソーシング系のサイトで紹介されている案件のほとんどに、応募することさえできない状態である。

そこでまずは、目の前の食い扶持を稼ぐために、ずっと好きだった「書くこと」を仕事にしてみようと思い、クラウドソーシングを使っていくつかの案件をこなしてみた。

書くことを仕事をするのは思ったよりも難しくて、こちらがあまりよく理解していないようなテーマで3,000字以上の文章を書かなければならなかったりする。

言い訳をすれば、こちらの記事作成で書くための力を使い果たしてしまった部分があり、数日間、ブログを書く気力が起きなかった。

2度目のクラウドソーシング

実はこのタイプの仕事をするのは2回目で、前職で働き始める前にも一度、同じような形で、格安SIMやクレジットカードなどのテーマを中心に、文章を書いて稼いでいたことがある。

その時の知識がある分、スムーズに案件をこなすことはできるが、如何せん、ブランクがあって、単価も安いため、しばらくは鬼のように働かなければならない時期が続くだろうと思う。

リモートワークは未来のスタンダードになるだろう

でも、今までと違って、働きたいときに働け、通勤などが無いのはとても心地が良い。

今はコロナの影響で、リモートワークをしている人も多いと思うが、将来的にはこういった働き方がスタンダードになっていくんだな、と思った。

正直、コロナ禍がなくてもリモートワークは遅かれ早かれ浸透したはずで、コロナ禍がそれを後押ししたに過ぎない。

好きなことの表現を積極的に始めた

ここからが本題。

先日から、YouTubeを使って動画をアップロードする活動を再開し始めた。

チャンネルを2つ持っているのだが、1つ目は音楽系の動画をアップロードするチャンネル。

直近では、単純に歌を歌った動画を投稿してみた。

今まではアカペラの動画が中心だったが、今後はそれに加えて、こういったただ歌ってみただけの動画も、気軽にアップロードしていけたらと思う。

そしてもう1つのチャンネルは、音楽系以外の動画を自由に投稿するチャンネル。

こちらでは、渋沢栄一の著書である「論語と算盤」の朗読を始めた。

論語と算盤は、1916年に出版された本だが、100年以上経った今でもなお、根強い人気を持っている本であり、一見すると何の関係も内容に思える「論語」と「算盤(そろばん)」が、実は密接に関わっていることを教えてくれる。

自分自身の人生のバイブルになっている本は数冊あるが、著作権的にOKなこの本を、今後も時間をかけて朗読していきたいと思う。

このほか、やりたいことはまだまだ沢山あるし、やらねばならぬこともそれ以上に沢山あるが、毎日少しずつ成長しながら、楽しんでやっていけたら、これより本望なことはないと思う。

【HTML5入門】1-4 よく使われるタグ

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

前回のおさらい

前回は、HTMLの基本となる構造について、4つのタグを通して学んでいきました。

今回は実際に、4つのタグの中に入るタグのうち、よく使われるものについて学んでいきましょう。

よく使われるタグ

まずはタグの紹介からします。今回学ぶタグは、以下の4種類です。

  • metaタグ
  • titleタグ
  • divタグ
  • spanタグ

それぞれ順番にみていきましょう。

metaタグ

metaタグは、文書の情報を伝えるために使われるタグです。記述する場所は、headタグの内側です。

前回は以下のコードまで記述しました。

<!doctype html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

それでは早速、headタグの内側にmetaタグを入れていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>

このように記述してみました。metaタグは、情報を伝えるためのタグですので、「ここからここまで」を表す</meta>のような閉じタグは必要ありません。

charset=”UTF-8″について

metaタグの後ろに書かれたcharset="UTF-8"は、文字コードを意味しています。この記述によって、index.htmlが「UTF-8」という文字コードで書かれていることを示しています。

titleタグ

titleタグは、文書のタイトルを伝えるためのタグです。例えば、パソコンで何かページを見る時に、上のタブにタイトルが表示されますよね。このタイトルの表示の役割を担うのが、titleタグとなります。

titleタグも、headタグの内側に記述していきます。実際の記述例が下記となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
  </body>
</html>

これにより、このHTML文書のタイトルが「MyPage」という名前になりました。実際にこのHTML文書をGoogle Chromeで開いてみると、以下の画像のような形で、ちゃんとタイトルが表示されているのが確認できると思います。

お気に入りやブックマークをする際にも、titleタグで付けたタイトル名が表示されることになります。

divタグ

divタグは、一つの塊を示すためのタグです。divタグで囲まれる内容は、実際に表示をさせる内容なので、bodyタグの内側に記述します。

早速、コードを書いていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これはdivです。</div>
  </body>
</html>

これを実際にブラウザで表示してみると、以下のようになると思います。

bodyタグに書いたので、しっかりと実際のページに表示されました。

spanタグ

spanタグは、文書の一部を示すためのタグです。spanタグも、divタグと同様、bodyタグの中に記述していきます。

こちらも早速、コードを書いていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これはdivです。</div>
    <span>これはspanです。</span>
  </body>
</html>

この状態でブラウザを更新すると、以下のようになることが確認できると思います。

ブロック要素とインライン要素

これまで、実際に文字がページに表示されたところまで確認できましたが、これだけだと、divタグとspanタグの違いがわかりにくいですよね。

divタグとspanタグの決定的な違いは、ブロック要素であるかインライン要素であるかというところです。ブロック要素は、それ自体が一塊であることを示しますが、インライン要素は、文章の一部を示しています。

タグで表示が変わる例

タグは、タグの内側にタグをいれる、いわゆる「入れ子」の状態で使われることがあります。ここまでのコードを見ると、htmlタグの中にheadタグやbodyタグがあり、bodyタグの中にdivタグやspanタグがある、という構造になっているのが理解できると思います。

ここでは、実際にdivタグの内側にspanタグを入れた場合とdivタグを入れた場合で、どのように表示が変わるのかを見ていきましょう。

divタグの内側にspanタグを入れた場合

先ほど記述したdivタグの内側にspanタグを入れてみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これは<span>div</span>です。</div>
    <span>これはspanです。</span>
  </body>
</html>

この状態でブラウザを更新しても、表示には一切変わりがないことがわかると思いますが、実際には、「div」という文字がspanタグによって囲まれている状態となっています。

ただ、spanタグはあくまでも文書の一部を選択しているだけの状態ですので、特に見た目に変化が起きることはありません。

divタグの内側にdivタグを入れた場合

では、先ほどdivタグの入れ子にしたspanタグを、以下のようにdivタグに変えてみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>MyPage</title>
  </head>
  <body>
    <div>これは<div>div</div>です。</div>
    <span>これはspanです。</span>
  </body>
</html>

そうすると、ブラウザの表示は以下のように変わることがわかると思います。

divタグで囲まれた内容は、あくまでも一つの塊を意味しますから、「div」という文字をdivタグで囲んだことによって、一つの塊として独立したような形になっています。

ブロック要素の特徴として、改行されるというものがあります。これはインライン要素にはない特徴となります。

おわりに

今回は、HTMLでよく使われる4つのタグについて見てきました。metaタグやtitleタグはheadタグの内側に書き、divタグやspanタグはbodyタグの内側に書きます。そして、divタグとspanタグは、ブロック要素とインライン要素という特徴の違いがある、ということが理解できれば、この時点では完璧です。

次回は、文書の根幹となる「見出し」や「段落」について、学んでいきます。

次の記事はこちら

意外にも長い?防犯カメラの変革の歴史

※本記事は、株式会社トリニティーの広告記事です。

2020年現在、世界で1番使われているカメラは、スマートフォンのカメラだと言われています。

おそらくこれには誰も反論の余地はないと思いますが、私たちが知らないところで、多くの人を守っているカメラがあります。

それが、防犯カメラです。

防犯カメラの歴史

防犯カメラの歴史は意外にも古く、1970年代に遡ります。
米国の銀行でATMが普及したことにより、治安維持の理由から防犯カメラが用いられるようになりました。

当時は科学技術も今に比べれば全然発達していないため、磁気テープによる保存に留まっていました。

1980年代に入ると、一般の商業施設でも利用されるようになり、1990年代には、日本でも一般的な防犯対策の一環として利用されるようになりました。

また、インターネットが台頭したことにより、ネットワーク上の遠隔監視も可能になったのも、同時期のことです。

防犯カメラの変革

防犯カメラが普及したのち、科学技術の発展と省コスト化が進み、今ではスマートフォンを利用した家庭用の防犯カメラなども普及してきております。

空き巣対策はもちろんのこと、小さい子供やペットなどが家族にいる場合には、防犯カメラの存在は、我が家の平和を確認できるツールにまでなりました。

また、車を運転する際のドライブレコーダーについても、カメラ技術向上の副次的産物として挙げることができます。

あおり運転や交通事故などの証拠としてドライブレコーダーの映像が利用される例も多く、自動運転の技術が普及するまではカメラ産業の大きな柱として活躍するでしょう。

奥深い防犯カメラの世界

今回は株式会社トリニティーの広告として、防犯カメラについて書かせて頂きましたが、調べてみると、防犯カメラの意外な奥深さを感じることができました。

普段、何気なく生活している中でも、防犯カメラは、治安維持の立派な主柱として働いてくれているのだと思います。