Les miZenables

ブログをメモ帳と勘違いしている

HTML学習(1)

ブログをhtmlで書いてみようと思う。

ドットインストールに挑戦したのは今回で三度目。1回目はなんでもいいからはじめようとしていたが、何からはじめれば良いのかわからなくて断念した。2回目は学習環境なるものを構築しなければならないのだと知って、どうすりゃいいのかわからず断念した。そして3回目の今回は、とりあえず、「Web関係からはじめよう」「学習環境の構築からしなきゃだな」と、あらかじめ調べる方針が決まっていたことが大きい。まだ断念はしていない。

  • 1回目: なんでもいいからはじめようとしていたが、何からはじめれば良いのかわからなくて断念
  • 2回目: 学習環境の構築という現実的な問題で断念
  • 3回目: あらかじめ何を調べればよいかが決まっていた。まだ断念していない。

Markdown方式でブログを書いていた時は、このリストの作り方も思うようにいかなかったんだけど、これひょっとしてHTMLの方が書く上でわかりやすいまであるか?

  1. 一人暮し
  2. 三面六臂
  3. 五人囃子
  4. 二人羽織

なるほど、上のは先頭に番号がつくんだった。昼頃に学んできたばかりなのに忘れているものだ。

合わせて、「自動で順序を入れ替えてくれないものか」「漢数字でも適切に(数字順に)並び替えてくれないものか」を同時に満たそうとしたが、そういう機能ではないらしい。

あーこのパラグラフとパラグラフの間が空くのいいですねぇ。

  1. 一人暮し
  2. 一人暮し  
        
    1. 一人暮しに憧れていた。1日の全ての時間を自分のために使うことができるからだ。
    2.   
    3. しかし実際には、働くことと体調管理のための睡眠に忙しく、なかなか思うように使いこなせない。
    4.   
    5. とはいえ、思い立った時間に、たとえそれが深夜の2時であっても、コンビニに行くことができるのは望んでいた贅沢のひとつでもある。
    6.  
     
  3. 入れ子構造について
  4.  
  5. あとこの、「
  6. 」まで入力すると後ろの「
  7. 」が補完されるの便利だな。

ただし、一度、プレビュー画面にうつると、せっかく構造化したものが全部左詰になってしまうのはちょっと手間。頭が混乱する。

ここでプレビューを確認。すっかり〈li〉〈/li〉が消えていて面白いことになっている。

入れ子構造について

入れ子構造とは何か

実践

  1. 序文
  2. 第1章
    1. 第1章 第1節
    2. 第1章 第2節
    3. 第1章 第3節
  3. 第2章

どうなってる?

経過報告

上の画像の貼り方だけがわからなかったので、「見たまま」編集モードで貼り付けた。貼り付けたあとで、HTMLを見てみると、ちゃんとclassとかsrcとかが出ている。

しかし、考え方としてはこれで合っているらしい。

まとめ

いかがでしたでしょうか?(僕も一度くらいはこの言葉を使ってみたかった)

このように、ドットインストールで「HTML入門」を一周見ただけで、こういう風に書いてみることができる。これは面白いかもしれない。

HTMLとCSSは2つで1セットのようなので、来週末にこれが学習できると良いな、と思う。できた暁には、またこうしてアレンジすることもできるのだろうか。

 

↓こんな感じで書いていた(プレビュー確認後のものなので、全部仕方なく左詰)

f:id:orikuramizen:20181216210610p:plain