【20200427】静けさの中にある本当の自分

今日も日記を書いていきたいと思います。書きたいことを思いついたままに書いているので、構成などがばらばらしていて見辛い部分もあるとは思いますが、ご容赦ください。

本日の「論語と算盤」朗読

今日は終日雨でした。雨のため、録音の音声にも、うっすら雨の音が入っているところがあります。

録音している間は、雨は降ったり止んだりで、たまに鳥の鳴き声なんかも聞こえました。

読んだところの感想

今日から新たに「立志と学問」という章に入りました。読んだところは「精神老衰の予防法」というセクションです。

最も印象的なところは、「青年が大事だと言われているけれども、老年もまた、大切である」というところです。来年、とうとう30歳を迎え、もう決して若くない年齢になりましたが、いつまでも自分自身のことで苦心もしていられないなと、改めて思いました。

早く一人立ちして、作り上げたものをこれからの世代に還元していきたいのに、自分自身でさえも、満足にしてあげられない今があります。

でも、これにもいろいろな考え方があって、早いうちに安泰してしまうと、その後に燃えるエネルギーの質が悪くなる可能性がある、と考えることもできます。

今はコロナも手伝って、世の中の常識から少し離れて、山籠りでもしたつもりになりながら、ゆっくり本を読んだりする時間を少しでも作りたいなと思います。

現代語訳版、読みやすいのでぜひ読んでみてください。

記事をひたすら書いていく日々

今日も「経費の教科書」に記事を寄稿しました。検収などの作業を経て、アップロードは数日先になると思われます。

それから、新しいライティング関係の案件も受注しました。今度は投資関係のサイトへの寄稿案件ですが、詳しいテーマは明日届きます。

どんなことを書くことになるのか楽しみな反面、自分自身も、このブログを使ってもっともっと多くのことを発信していきたいという思いが芽生えてきました。

オンラインから逃げるには

インターネットは、通信を急速に便利にし、生活に根づきました。もちろん喜ばしい部分が大半なのですが、その弊害として、私たちは「1人でいること」が難しくなったように思います。

物理的には1人になることはあれど、精神的にずっと繋がっている感覚を辛く感じる人も、中にはいるかもしれません。

いろいろな人がデジタルデトックスなどの「オンラインから逃げる方法」を探っていますが、なぜこういうことをしなくてはいけなくなってしまったのか、ということは、一考の余地があると思います。

個人的にやっていること

今やっている作業の影響で、常にパソコンやスマホを使用する環境にありますが、基本的にメール、LINEやSlackなどの連絡ツールの通知はOFFにしています。

ただし、これだと重要な連絡に気づけない場合があるので、昼・夕方・夜にチェックする時間を設けています。人間の集中力の性質からみても有効な手段だと思ったので、このようにしています。

多録企画もぼちぼち進めています

先日の下記の記事で宣言した「アカペラ多重録音企画」も、今日から着手しました。

ちょっとずつですが、良い動画が作れるように準備していきます。

今日は久々にボイスパーカッションを録音しました。やっていて思い出したのですが、私は口に大変に唾が溜まりやすい人間でして、ボイスパーカッションを一曲通してやることができないんですね。

ゆっくりな曲なら唾を飲み込むタイミングがあるのですが、今回取り組んでいる曲は速い曲なので、4〜8小節ごとに録音を中断せざるを得ませんでした。笑

ボイスパーカッションが本職の方は、唾が溜まったりするような悩みってないんですかね?もし対策とかあったら教えて欲しいです。

瞑想を始めて1年

瞑想を始めたのが具体的にいつのことなのかあまり覚えてはいないのですが、少なくとも1年は経ったのかな、と思います。

瞑想をすることによる効果は、正直今の時点でもよくはわかっていないし、瞑想中も雑念湧きまくり状態は相変わらずなのですが、ここ最近は、瞑想の時間を一気に一日30分〜45分程度まで増やしました。

朝・昼・晩の3回

一気にこの時間瞑想するわけではなくて、1日最低3回、10〜15分程度の瞑想をすることにしています。

これによって何が変わるのかは、おそらく数年後の自分が身をもって証明してくれるでしょう…笑

自分の見直しが終わったら、すぐ行動

もしかしたら瞑想の時間は、「自分の見直し」をするための時間として、役に立っているのかもしれません。というのも、4月前半の落ち込んでいる期間中、瞑想をする気力もないほどに落ち込んでいたもので、この時は常に自分自身の中で思考回路がぐるんぐるんしてしまって、結局何の答えも出ないような日々を過ごしていました。

今もその痕跡はたまに出てしまう(治したはずの悪癖が再発してしまった等)のですが、また少しずつ時間をかけて治していこうと思います。おそらくストレス性のものなので、しっかり瞑想して、目の前の課題をしっかりこなしていけば、また治ります。とにかく今はやるべきこと、やりたいことが明確になったので、動いていくしかありません。

悩んだ時に答えを持っているのは、自分だ

おそらく多くの人が、同じような悩みを抱えていると思います。瞑想をすることで、楽になれる人もいるかもしれません。

でも、私と同じように、瞑想をすることさえできないくらいの無気力になってしまう人もいるはず。そういった人は、私のTwitterにDMをください。何もしてあげられないかもしれないけど、話を聞くことくらいならできます。その中で、自分自身で答えを見つけることができるかもしれないです。

忘れてはいけないのは、「最終的な答えを持っているのは、いつだって自分自身だ」ということです。

誰かが与えてくれた答えに沿って進んでいくのは、楽かもしれないけど、どこかで必ず違和感が生じます。それは、自分自身が決めたことではないからです。

ゆっくりでも良いから、一緒に、答えを見つけていきましょう。

明日もまた、更新します。

【HTML5入門】2-1 段落と見出し

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

前回のおさらい

前回は、HTMLファイルにおいて良く使われるタグについて、4つのタグをご紹介しました。

今回は、実際の文章を書く際に必要になる、「段落」や「見出し」を表すタグについて、見ていきましょう。

「段落」に使われるタグ

まずは、段落に使われるタグからご紹介していきます。

pタグ

段落に使われるタグは、「pタグ」と呼ばれます。pはparagraph(パラグラフ)の略で、段落を意味する単語です。

divタグやspanタグと同じように閉じタグを用い、<p>〜</p>とすることで、一段落を構成します。

「見出し」に使われるタグ

次に、見出しに使われるタグをご紹介します。

h1~h6タグ

見出しに使われるタグは、h1, h2, h3, h4, h5, h6の6段階あります。hはheadline(ヘッドライン)の略で、本で言うところの「章」や「節」を意味します。

こちらも、閉じタグを用います。

ダミー文章に使われる「Lorem Ipsum」

HTMLにおいては、実際の記述をWebページで確認したい時に、サンプルとなる文章があった方がイメージしやすい場合が沢山あります。そういった場合のために、「Lorem Ipsum(ローレンイプサム)」というタイトルの無意味な文章を差し込むことがあります。

具体的には、下記のような文章となります。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wikipedia「Lorem Ipsum」より引用(https://ja.wikipedia.org/wiki/Lorem_ipsum

また、Lorem Ipsumを略して「Lipsum(リプサム)」と呼ばれることもあります。

この文章自体は、どんな言語においても意味を持たないことがメリットとされており、意味を考えてしまわずにWebページのデザインのチェックだけしたいような場合に使用されることの多い文章です。

段落と見出しをHTMLに記述してみよう

では、実際に2つのタグを用いて、HTMLファイルに段落と見出しを記述していきましょう。

最初のHTMLは、以下の状態にしておきます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
  </body>
</html>

段落を追加してみよう

早速、bodyタグの中にpタグを入れて、段落を作ってみましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
    </p>
  </body>
</html>

次に、pタグの中に、先ほどのLorem Ipsumの文章をペーストしていきましょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

ここまでできたら、実際にこのHTMLファイルをWebブラウザで開いてみましょう。すると以下のようになることが確認できると思います。

段落を複数にしてみよう

では次に、段落が複数になった場合にWebブラウザ上でどのような表示になるのかをみていきましょう。pタグ全体を2回ほどコピー&ペーストして、合計3段落のLorem Ipsumが記述されるようにします。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで確認すると、下記画像のようになると思います。

同じ文章が3回表示されていることがわかりますね。そして、段落と段落の間にスペースがあることも確認できます。

このスペースは、pタグ自体による効果ではなく、Webブラウザの初期設定に基づいているものです。本記事では、Google Chromeを使用しています。

見出しを入れてみよう

それでは次に、見出しについてHTMLファイルに記述をしていくことにしましょう。

まずは、一番大きい見出し「h1」を使ってみたいと思います。h1タグを使って、「これはh1です」という文章を表示させてみましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで見てみると、下記画像のようになると思います。

一番上に、大きく「これはh1です」と表示されているのがわかると思います。これもWebブラウザの初期設定で、見出しが段落よりも目立つ表示になるようになっています。

6種類の見出しで見え方はどう変わるのか

では、h2~h6も記述して、Webブラウザで表示させた時にどのように表示が変わるのかを確認していきましょう。

h1タグの下に、h2~h6タグを記述してみます。コードは下記となります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <h1>これはh1です</h1>
    <h2>これはh2です</h2>
    <h3>これはh3です</h3>
    <h4>これはh4です</h4>
    <h5>これはh5です</h5>
    <h6>これはh6です</h6>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

上記のコードをWebブラウザで確認すると、以下の画像のようになります。

1から6にかけて、どんどんサイズが小さくなっているのがわかりますね。これにより、ユーザーはコードを見なくても、視覚的に見出しの構造を把握することが可能になります。

見出しのルール

基本的に、h1タグの次にはh2タグがきます。同じようにh2タグの次にはh3タグがきます。

本に例えると、h1タグが「本の題名」、h2タグが「章」、h3タグが「節」などと対応するようなイメージです。

「章」がないところに急に「節」がきたら、違和感がありますよね。それと同じような形で、見出しの構造を考えるようにすればOKです。

おわりに

今回は、HTMLファイルに使用する「段落」と「見出し」に使うタグと、その使い方について学んできました。今回学んだことは、HTMLファイルを作るときだけでなく、本記事のようなブログ記事を書いたりする際にも、身につけておくと役に立つ技術ですので、ぜひマスターしてみてください。

次の記事はこちら

【20200426】走り始めるまでが勝負

4月前半の鬱屈とした悩み期間とは人が変わったかのように、毎日パソコンと向き合っております。

なんとかスタートはしたけれど、まだまだフリーランスLv.1、武器はこんぼう、防具なしという極弱ステータスのため、まずはスライムを倒し続ける日々を楽しめるようにマインドチェンジを図っています。

今日の「論語と算盤」

さあ、段々とお決まりになってきましたこの表題。今日朗読した「論語と算盤」動画はこちらです。

ちょっと長めでした。

作者の渋沢さんが「得意時代」や「失意時代」と言っているのは、簡単に言えば、「うまくいっている時」と「うまくいっていない時」のことです。

これらをどのように対処していくべきかの処世術が書いている部分を読みました。

文章自体が少し難しいので、全篇が気になった方は、ぜひ下記の現代語訳版の方を読み進めてみてください。とても読みやすいです。

現代語訳版

初めて他人のサイトに自分の実績として名前が載りました

先日、「経費の教科書」というサイトで記事を掲載してもらえたことを下記の日記で紹介致しました。

なんと今日、初めて、自分の名前で本サイトに記事が投稿されました。

簿記で多くの人がつまづいた経験があるであろう、「減価償却の計算方法」について解説した記事を頼まれまして、なんとか頑張って書いてみました。

この他にも数記事アップロードされる予定なので、アップロードされ次第、また日記の方で報告させて頂こうと思います。

オンラインセミナーにも参加しました

その他、IT関係の知識も幅広く知っておきたい気持ちがあるので、今日は、Connpassで見つけた下記イベントにも参加しました。

【Web勉強会】いまさら聞けないネットワーク基礎!
https://connpass.com/event/173718/

ネットワークエンジニアの方が、IPアドレスやネットワークの概念などについて90分間、基礎的な部分を教えてくれるものでしたが、プログラミング以外にもこういったITの外観というか、全体像的なことにも興味を持てるようになったのも、プログラミングを学ぶという選択をした賜物なんじゃないかと思っています。

セミナーに申し込んだ時はまだ迷走中だったのですが、今はとにかくやるべきこととやりたいことがある程度明確になった状態まで来ることができたので、とりあえずセミナー系はしばらくはお休みしようと思います。

まだまだ理想の進捗にはほど遠い

今日予定していたものの中にも、時間が足りなくて明日以降へペンディングになってしまったものが複数あります。

心理学的には、この状態はあまりよろしくない状態ではあるのですが、一気に理想の状態に持っていけるほど器用だったらおそらく今のような苦労はしていないはずなので、今後も少しずつ、時間はかかるかもしれないけど着実に、前に進んでいこうと思います。

個人的には、まだまだフリーランスとしてのスタートラインには立っていない感覚なので、まずはしっかりスタートラインに立てるように、日々研鑽を積んでいきたいとも思います。

皆さんも、体にお気を付けてお過ごしください。

ではでは。