【20200522】77.2kg

ここ数日、体重は77kg台を行ったり来たりしている。なかなか76kg台が遠い。

相変わらず、

  • 朝:抜き
  • 昼:ナッツ
  • 夜:普通に食べる

を繰り返している。昼は最近グミとか食べちゃってるので、今のグミ在庫が無くなったら、またナッツのみに切り替える予定。

朝にやったこと

  • 瞑想 7分
  • 運動 1時間

朝の振り返り

早歩きかジョギングかわからないくらいの速さで走っていたら、8:38min/kmという大記録を叩き出した。このくらいのペース、とても気持ちが良い。

昼にやったこと

  • メール返信など雑務 30分
  • 瞑想 14分
  • プログラミング学習・技術ブログ執筆 1時間30分
  • 読書 15分
  • 社労士学習 1時間

昼の振り返り

昼はほぼいつも通りの感じ。喫緊の課題は、これ以外の溜まっているタスクになかなか着手できる時間が確保できないこと。ルーティンワークが肥大化しているか、効率の悪いルーティンワークになっている可能性があるため、メリハリを付けていきたい。

夜にやったこと

  • メール返信など雑務 30分
  • 「論語と算盤」朗読動画作成 1時間
  • nana 30分
  • 社労士学習 1時間

夜の振り返り

今日の夜にやったことは少なめ。社労士の学習を徐々に増やすことができてきている。去年の本試験の復習が一通り終わったので、明日からは網羅的学習に入っていく。テキストを最初から読み返しながら、該当する箇所の過去問を徹底的に解いていき、知識だけでなく論点も丸ごと叩き込む。

今年の社労士試験は、他の人よりスタートはかなり遅くなってしまったが、1日をどう設計するかは自分次第なので、引き続き社労士勉強を中心に据えて進めていく。

泣いても笑っても、あと3ヶ月。ここで受かることができれば、フリーランス生活に大きな弾みがつく。頑張ろう。

今日のコーラス

今日は、いつもピアノ伴奏などでお世話になってるこたつさんの歌にジョイン。

今日の「論語と算盤」朗読動画

お金の話がバンバンと出始めてきた。お金を蔑ろにすることはできない。フリーランスになって改めて痛感した。「お金は信用」という言葉もある。今の自分に信用はない状態だ。これからどのように作っていくかを考えるのも、また楽しみと言えるかもしれない。

お茶やお湯の効能

ここ数日、寒い日が続いていることもあり、積極的に紅茶やお湯を飲むようにしている。特に夜は、睡眠との兼ね合いで効果が高いように感じる。

実際によく寝れるようになったかどうかといわれると、自覚症状があるほど目覚ましい成果が出ているわけではないが、寝起きは幾分か爽やかになった気がしないでもない。

お茶も、飲み過ぎるとトイレが近くなるので考えものだが、身体が一日中冷たくなりにくいので、やはり温かい飲み物は一定の効果があるのだろうと思う。

これから暑くなり、冷たい飲み物が美味しく感じる季節になるが、あまり身体を冷やしすぎて、壊すことのないようにしたい。

【HTML5入門】3-1 リスト項目(HTMLのリスト表記)

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

前回のおさらい

前回は、コード・改行・プリフォーマットについて学んできました。

今回は、HTMLにおけるリスト表記の作り方について学んでいきましょう。

2種類のリスト

HTMLでリスト表記をする場合には、下記の2パターンが考えられます。

  • 順番のかかわるリスト
  • 順番のかかわらないリスト

どちらを適用するかによって、使うタグが異なるので、順番に見ていきましょう。

olタグ

olタグは、順番のかかわるリストを表記する場合に使用するタグとなります。olの正式名称は「ordered list」となります。orderには”順番”という意味合いもありますので、和訳すると「順番付けられたリスト」となります。

ulタグ

ulタグは、順番のかかわらないリストを表記する場合に使用するタグとなります。ulの正式名称は「unordered list」となります。orderにunがついているので、olとは対照的に「順番付けられていないリスト」と解釈することができるでしょう。

liタグ

上記2つのタグでは、それぞれのタグの中身がリストであることを示すことはできますが、実際にリスト化するには、項目を示すためのタグが別に必要になります。それがliタグです。

liタグは「list」の省略で、項目自体を作る際に使用します。

HTMLに記述してみよう

では、今回学んだ3つのタグを使って、実際にHTMLファイルに記述をしてみましょう。初期状態のHTMLコードは下記の通りです。

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

  </body>
</html>

順番のかかわるリストを作成してみよう

では、まずはolタグを使用し、順番のかかわるリストを作成してみましょう。まずはolタグを用意し、その中にliタグで4つほど項目を用意していきます。この時、olタグの中にliタグがあることがすぐにわかるように、インデントを一段下げておきましょう。コードは下記のようになります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ol>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>3つめ</li>
      <li>4つめ</li>
    </ol>
  </body>
</html>

この状態でWebブラウザを確認すると、下記のような表示になることが確認できると思います。

各項目の最初に番号が振られているのが確認できますね。これはWebブラウザがHTMLに記述してあるolタグを読み取った結果となります。これにより、このリストに順番が付けられていることがわかります。

項目の順番を変えてみよう

では、試しに、項目の順番を変えてみて、表示がどのようになるかを確かめてみましょう。今回は、「3つめ」を項目の一番上に持っていってみます。コードは下記の通り書き換えます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ol>
      <!-- 「3つめ」を項目の1番上へ -->
      <li>3つめ</li>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ol>
  </body>
</html>

では、これをWebブラウザで確認してみましょう。以下のようになると思います。

HTMLファイルに記載した通りの順番になったため、olタグで付けられた順番と対応しなくなってしまいましたね。

順番のかかわらないリストにしてみよう

上記のコードで、olタグを使用したままだと、ユーザーが表示を見にくくなってしまうため、olタグからulタグに書き換えてみたいと思います。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <!-- olタグからulタグに変更 -->
    <ul>
      <li>3つめ</li>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ul>
  </body>
</html>

実際にどんな表示になるのか、Webブラウザで確認してみましょう。

数字だった部分が”なかぐろ”に変わったことがわかると思います。これにより、順番が関係ないリストであることが判別できるようになりました。

リストの階層を増やしてみよう

リストの中に更にリストを作ることも可能です。これにより、リストが階層で表示されるようになります。

最初に作ったリストをコピーして、一番上の項目の中に、更にulタグを用いてリストを作ってみましょう。コードは下記の通りです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>HTMLの練習</title>
  </head>
  <body>
    <ul>
      <li>3つめ</li>
      <!-- リストの中に更にリストを追加 -->
        <ul>
          <li>3つめ</li>
          <li>1つめ</li>
          <li>2つめ</li>
          <li>4つめ</li>
        </ul>
      <li>1つめ</li>
      <li>2つめ</li>
      <li>4つめ</li>
    </ul>
  </body>
</html>

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

リストが別の記号によって階層表示されていれば、OKです。こうした技法を用いることによってわかりやすくなるリスト表示も沢山あります。

おわりに

今回は、HTMLのリスト表記の作り方について見てきました。覚えてしまえばその構造は極めて単純ですが、似たような名前のタグのため、それぞれの名前と使い方をしっかり理解するまでは、何度か自分でリストを作成してみてください。

次の記事はこちら

【20200521】77.8kg

ここ最近は、肌寒い日が続いている。耐えきれなくなって、昨夜、押入れから毛布を戻した。

毛布ってすごい。めちゃくちゃ暖かい。その暖かさは自分自身から出されたものだけれど、それをホールディングする技術が並外れている。

朝にやったこと

  • 瞑想 9分
  • 運動 1時間

朝の振り返り

やってしまった6分台。今日は調子が良く、ゆっくり走るつもりが、ついペースアップしてしまった。明日は7分台を目指したい(普通は逆)。

昼にやったこと

  • メール返信など雑務 1時間
  • 瞑想 16分
  • プログラミング学習・技術ブログ執筆 1時間
  • 法人設立業務 1時間
  • 読書 15分

昼の振り返り

ありがたいことに、King Scoreのお問い合わせが増えてきて、その対応をしたりした。学校からのお問い合わせもあり、徐々に日常が戻ってきている気配を感じた。

夜にやったこと

  • メール返信など雑務 1時間
  • テックキャンプ週次ミーティング 1時間
  • 「論語と算盤」朗読動画作成 1時間
  • nana 30分
  • suisaiオンラインミーティング 1時間30分

夜の振り返り

毎度のことながら、木曜日はミーティングが重なる。ライティング業務や社労士学習の時間を確保するつもりだったが、無理はせず、明日に回す。

今日のコーラス

気持ちを揺さぶられる歌を聞くと、自分自身の歌も揺れる。そういう不器用な歌もあって良いと思う。

今日の「論語と算盤」朗読動画

昨日で「常識と習慣」の章は終了、今日から「仁義と富貴」の章に入った。初っ端から長い文章ではあったが、引き続き、読み進めていく。

選択と集中

前に、周りの人が自分よりも優秀すぎる話をした覚えがあるが、そう感じる理由の1つに、選択と集中のスキルが高いというものがある。これは、実践できている人ほど、2人や3人いるように思えるもので、そういった人が職場にいると、大抵の人は頼りにされる。

つまり、自分の周りにいる人は、職場でも頼りにされている確率が非常に高いことになる。今までの自分は、そうした事象に辟易していた。つまり、嫉妬と劣等感の塊で会った。しかし今、会社からも社会からも解放され、1人になってみて、改めて思うことは、そうした嫉妬や劣等感は、社会にとって何の役にも立たない、ということだ。

嫉妬や劣等感は、自分自身が持つ”変な”プライドが引き起こしていた。組織にいると、経済的にも精神的にも安定する。それが人間の本能であり、ここまで地球を牛耳ってきた所以である。

だから、それに逆らうことは、ある意味、人間であることを放棄することなのかもしれないが、自分は、「人間」というものを放棄したいわけではない。しかし、今に自分にとって、1人になることは、改めてこの社会を見直す上で、非常に大切なことである、と思っている。

並外れたスキルや集中力もなければ、組織や世間をうまく渡り歩ける力もない。こんな自分に何ができるか、そして何を身に付けるべきかを考えつつ、今は、社会の動きをゆっくり見つめながら、今やるべきことを決め、やっている。