無料ドットインストールでHTMLを勉強【基礎文法入門全30回】1/3終了。文字起こししつつ、コード記入で自作テキスト化

ドットインストールでhtml

ドットインストール」っていう無料のプログラミング学習サイトがあります。基礎学習がサクサク進みます。

HTMLというプログラミングに入る前の基礎を勉強しているのですが、30回の内容(HTML基礎文法入門)のうち1/3ほど終わったので学んだことの一部を紹介します。

(HTMLの学習に入る前の情報は【入門】プログラミング(HTML)の学習環境を作る。無料Google chromeなどでカンタンで紹介しています)

私は、30代半ばを過ぎたアナログな人間ですが、3ヶ月後にプログラミングができることを目指して勉強中です。

HTMLの最初は、基本ルールや基本用語を混ぜつつ、簡単なテクニックを教えていく内容です。

・・・ですが、プログラミングというのはゴチャゴチャしていて覚えにくい・・・(ちなみにHTMLはプログラミング言語ではなく、マークアップ言語と言います。「プログラミング言語は自動で動くようにするやつ」「マークアップ言語は文書を読みやすくするやつ」みたいな感じです。)

そこで、音声文字起こしを使って「自作ノート化」

復習しやすいので、超絶便利(月額980円で文字起こしされたものを見られるのでそちらは見やすい。誤字が無く、プロが正しく文字にしてくれているので良いです。

私の場合は、自作した方が復習になり頭に残ると思うので自分でやっています)。

こんな感じ。音声の自動文字起こしなので、誤字はあります。でも、誤字を直すのも勉強の一部になる。

文字起こしをした自作テキスト

文字起こしした自作ノートを元に、ドットインストールで学んだことを紹介していきます。

文字起こしの方法はWindowsでかんたん「文字起こし」。動画作成に向けて、YouTuberを研究!で詳しく書いています。

( ↑ 文字起こしの方法についてWindows版で紹介していますが、Macの人はSoundflowerを使うといいです。詳しくは、Macで writer-app + Soundflower を使った完全自動文字起こしを行う方法。ドットインストールの文字起こしは、writer-app不要です)

ドットインストールでHTML。「字下げ」「コメント」

「字下げ」「コメント」について学習しました。HTMLは見やすいように、段のような構造になっています。これを「字下げ」と言います。

また、HTML内にメモを残すことができる。これによって、「プログラミングコードを書いておいて、一旦無効にしておき、必要な時に元に戻す」ということができるようになります。

「字下げ」

HTMLの字下げ

このように、右側へ少しずれることによって、構造が分かりやすくなります。

  • やり方は「選択して、tabキー
  • 戻すときは「選択して、shift + tabキー

ちなみに、ドットインストールの音声をGoogleドキュメントを使って文字起こししつつ、コードはMacにインストールしたエディタツールのAtomで作りつつ文字起こしをしているGoogleドキュメントにもコードを手入力

何回も入力することで覚えていっています。

「コメント」

コメントはプログラミングコード内のメモ書きです。

<!-―メモ内容を書く―->

こんな感じで<!–  –>で囲まれて、表されます。

  • ショートカットは、選択して「command + / 」これでメモの形に
  • また、元に戻す時も「command + /

コード内にメモとして残しておいて、必要な時にメモを戻すことで、webページに表示させることができるようになります。

「メタタグ」webページ上に直接見られるものではないが、文書に影響する書き方

「メタタグ」というのがあります。

<meta  ・・・>

と書くやつ。headタグに入れていきます。

文書に現れるわけではありませんが、webページの文字に影響を与えたり、検索結果の表示に影響を与えたりします。文字コード・文書の説明・オルト属性などです。詳しく見ていきましょう。

文字コード

文字コードとは、コンピューターが文字を表示するための文字セットを表すもの。文字のルールみたいなものです。

こんな感じで表示。utf-8というものが一般的。

<meta charset=“utf-8”>

文書の説明

検索結果に使われることもある「文書の説明」です。webサイトに直接現れるわけではありませんが、検索結果で表示されたりします。

<meta name=“description” content=“いどはるのサイトです。人間関係やデジタルなものについて書いています(ここに文書の説明を入れる)。”>

オルト属性。画像の説明をする

オルト属性は、画像ファイルがまだなかったり、画像が表示されるまでの間に表示されたりする説明。

<img src=“img/logo.png” alt=“ドットインストールのロゴです”>

img srcは、イメージのソース。画像の元を示す。

また、幅や高さを指定することもできる。たとえば、width=”240″、height=”40″で表示します。

<img src=“img/logo.png“ alt=“ドットインストールのロゴです” width=“240” height=“40”>

widthで幅、heightで高さを指定。

罫線・改行・太字・引用など

そのほか、学んだことを紹介します。

罫線<hr>

hrは、horizontal rule ホリゾンタルルール 水平の罫線。ちょっと話が変わるときに使います。見出しよりは弱い。

↓ こういう感じ。

HTMLで罫線を引く

文中に横に線を引くことができる。

改行<br>

brは、break ブレイク。改行です。

太字<strong>

strongで、文字を太字にして、大事なところを強調することができます。

HTMLで太字にする

引用<blockquote>

ちょっと文章が下げられて、引用っぽくなる。

HTMLで引用を表す

コードを書くとこんな感じ。

<blockquote>

<p>HTMLは大事byドットインストール</p>

</blockquote>

<p> </p>はパラグラフのpで、段落を表しています。

ドットインストールを文字起こしして、Googleドキュメントで編集。自分のテキスト化

文字起こしして、コードは自分で書く。いろいろなコードが出てきて、書くたびに覚えていけるし、自分だけのオリジナルテキストにすることができる。

このやり方でHTMLとCSSをやっていこうと思います。文字起こししての学習、おすすめです。

以上となります。では!