HTMLはじめたおじさんのブログ

30過ぎて急にHTMLはじめたおじさんです。学習の過程をブログ記事にしていきたいと思います

HTML学習2日目

やったこと

  • ドットインストールのhtml基本講座
  • ドットインストールのcss基本講座

 

ドットインストールのhtml、cssの基本講座を終了して思ったこと

ドットインストールのhtml基本講座の学習が終了して思ったことは、とりあえず今のところ思ったよりは難しくはなさそうだということだ

基本の理解としては、htmlは文章がどのような要素かを説明し、cssが要素を装飾するということで間違いないだろう

そしてこの二つの要素が組み合わさって、我々がいつも見るようなホームページができているようだ

つまりこの学習の目的は、ホームページを作るにはどういった要素があるのかを把握して、どう記述すれば反映されるのかを学ぶということになるだろう

何だ簡単じゃないか。勝ったな。よし風呂はいってくる!

と、机上で言うのは簡単なのだが、実際にやってみるとまあ難しい。というかややこしい。すなわち記述の順番とか、ミスが出ている場所の特定とか、要素と要素が絡み合ってがんじがらめになる頭がこんがらがるタイプのややこしさだ

実際基本講座でいくつも記述ミスを行ってしまい、そのたびに頭を抱えさせられた。このミスを見つけるのは宇宙のなぞを解明するのに等しく、すなわち紐解く必要が出てくるということだ(うまい!)

atomエディターについて

今回htmlとcssを勉強するに当たって特にすごいとおもった(小並感)のがATOMエディターだ

ATOMエディターはいわばプログラム用に作られたすンごいメモ帳(小並例)みたいなもので、適当にアルファべットを打ち込むだけで、候補となる要素を上げてくれるのだ

たとえばリンクを張るときに【href】とかいう記号をつかうのだけど(たぶんそう。間違ってたらゴメン><)頭の悪いおじさんには【href】という記号すらも覚えられない

あー、あの【h何とか】【h何とか】だよ、わかる? みたいな感じなのだが、そこをこのATOMエディターはもしかして【href】? と親切に教えてくれるのである

なんて素晴らしい機能なのだろうか。年々脳シナプスがつながらなくなってきたおじさんの強い味方だ

おそらくATOMエディターを擬人化すれば敏腕有能メイドであろう。栗毛でメガネのロングスカートメイドに違いない。誰かイラストにしてくれないだろうか…あ、いや、案外検索したら普通にある気がする。後で「ATOMエディター・擬人化」でググってみよう

と、存分に気持ち悪さを発揮したところで今回は終わり

ちなみに今回のブログはATOMエディターちゃんでhtmlとして記述して書いている

覚えたことをすぐに試してみたくて仕方ないんだね。子供のときからいつもそう。ちなみにほとんど【h2(見出し2)とかp(文章)】くらいしか使っていないのは公然の秘密だ

というかはてなブログはhtmlの記述にも対応してるんだね

ブログもかけて勉強もできるなんてなんてはてなブログはなんて素晴らしいサービスなんだあ(東芝全自動ゴマすり機

もしかしてcssにも対応しているのだろうか。今度ちょっと調べてみよう。ブログもかけてcssの勉強もできるなんてはてなブログはなんて素晴らし(略

一応記述したコードを載せておきます。何の参考にもならないかもしれないけど、まあ記録用ってことで

 

 

 

以下コード

<h2>
やったこと
</h2>
<ul>
<li>
ドットインストールのhtml基本講座
</li>
<li>
ドットインストールのcss基本講座
</li>
<li>
ホームページの作り方の基礎的な理解
</li>
</ul>
<section>
<h3>
ドットインストールのhtml、cssの基本講座を終了して思ったこと
</h3>
<p>ドットインストールのhtml基本講座の学習が終了して思ったことは、とりあえず今のところ思ったよりは難しくはなさそうだということだ</p>
<p>基本の理解としては、htmlは文章がどのような要素かを説明し、cssが要素を装飾する</p>
<p>この二つの要素が組み合わさっていつも見るようなホームページができているようだ</p>
<p>つまりホームページを作るにはどういった要素があるのかを把握して、どう記述すれば反映されるのかを学べばいいということになる</p>
<p>そして、その方法はネットで検索すればいくらでも出てくる</p>
<p>と、まあ、机上で言うのは簡単なのだが、実際にやってみるとまあ難しい。というかややこしい。すなわち記述の順番とか、ミスが出ている場所の特定とか、要素と要素が絡み合ってがんじがらめになる頭がこんがらがるタイプのややこしさだ</p>
<p>実際基本講座でいくつも記述ミスを行ってしまい、そのたびに頭を抱えさせられた。ミスを見つけるのは宇宙のなぞを解明するのに等しく、すなわち<strong>紐解く</strong>必要が出てくる(うまい!)</p>
</section>
<section>
<h3>atomエディターについて</h3>
<p>今回htmlとcssを勉強するに当たって特にすごいとおもった(小並感)のがATOMエディターだ</p>
<p>ATOMエディターはいわばプログラム用に作られたすンごいメモ帳(小並例)みたいなもので、適当にアルファべットを打ち込むだけで、候補となる要素を上げてくれるのだ</p>
<p>たとえばリンクを張るときに【href】とかいう記号をつかうのだけど(たぶんそう。間違ってたらゴメン><)頭の悪いおじさんには【href】という記号すらも覚えられない</p>
<p>あー、あの【h何とか】【h何とか】だよ、わかる? みたいな感じなのだが、そこをこのATOMエディターはもしかして【href】? と親切に教えてくれるのである</p>
<p>なんて素晴らしい機能なのだろうか。年々脳シナプスがつながらなくなってきたおじさんの強い味方だ</p>
<p>おそらくATOMエディターを擬人化すれば敏腕有能メイドであろう。栗毛でメガネのロングスカートメイドに違いない。誰かイラストにしてくれないだろうか…あ、いや、案外検索したら普通にある気がする。後で「ATOMエディター・擬人化」でググってみよう</p>
<p>と、存分に気持ち悪さを発揮したところで今回は終わり</p>
<p>ちなみに今回のブログはATOMエディターちゃんでhtmlとして記述して書いている</p>
<p>覚えたことをすぐに試してみたくて仕方ないんだね。子供のときからいつもそう。ちなみにほとんど【h2(見出し2)とかp(文章)】くらいしか使っていないのは公然の秘密だ</p>
<p>というかはてなブログはhtmlの記述にも対応してるんだね</p>
<p>ブログもかけて勉強もできるなんてなんてはてなブログはなんて素晴らしいサービスなんだあ(東芝全自動ゴマすり機</p>
<p>もしかしてcssにも対応しているのだろうか。今度ちょっと調べてみよう。ブログもかけてcssの勉強もできるなんてはてなブログはなんてすばらし(略</p>
</section>
<section>
<p>一応記述したコードを載せておきます。何の参考にもならないかもしれないけど、まあ記録用ってことで</p>
</section>
<section>
<h2>
以下コード
</h2>

</section>