IT~情報と技術

ドットインストールでHTML基礎文法入門とCSS基礎文法入門①【初心者向け】

「ドットインストール」というオンライン講座でプログラミングの勉強を始めました。

前回はHTML入門(全15回)とCSS入門(全17回)の紹介でした。

今回はHTML基礎文法入門(全30回)とCSS基礎文法入門(全37回)の紹介です。

まずは前半のHTML基礎文法入門についてです。

ドットインストールでHTMLとCSSの勉強

の続きです。

HTML入門とCSS入門は、「太郎のポートフォリオサイト」という自己紹介サイトをHTMLとCSSを使って作成する、という講座でした。

次はこの2講座をやってみましょう。

この2つの講座は、あるサイトを作って行くというよりはHTMLとCSSのいろいろな文法を講座を通して学習していく形になっています。

回数は両方で全67回と多いように思いますが、1回あたり約3分なので全部見ても200分くらいです。

2時間の授業を2コマ受けるくらいのもんです。これで、HTMLとCSSの基礎文法を一通り体験できるのです!ということで頑張りましょう。

2つの講座今回はこの2講座が対象です。

さて、あいかわらず講師の田口先生の進行スピードが速くて面食らいます。一時停止を駆使して、がんばってついていきましょう。

HTML基礎文法入門(全30回)

まずは前半のHTML基礎文法入門です。

HTML入門/CSS入門と同じくエディタとしてAtomを使います。忘れずに右下HTMLモードの設定をしておきましょう。

気になったところやメモとして残しておきたいところ

用語の説明

HTMLタグの説明です。「#3 はじめてのHTML」で出てきます。

イメージタグの説明です。 「#04 imgタグで画像を配置しよう」で出てきます。

連番リストの説明です。「#11 リストを表現してみよう」で出てきます。

同じく箇条書きリストの説明です。

同じく説明リストの説明です。

表の表現方法です。「#18 tableタグで表を作ってみよう」で出てきます。

画像サイズの指定

「 #08 imgタグの属性を見ていこう」で、画像の高さと幅を指定します。

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

元の画像の大きさを調べると、幅480ピクセル、高さ80ピクセルなので、ちょうど縦と横を半分にしています。

指定方法の違いによって表示画像の大きさがどう変わるかをやってみました。

  • width=”240″ height=”40″ → 縦横半分
  • width=”240″ → 同じく縦横半分
  • width=”240″ height=”60″ → 縦横比が崩れます

widthとheight両方を指定する場合、指定方法を間違えると縦横比が崩れるので、widthだけ値を変えながら適度な大きさを探す、というやり方がいいですね。

id属性を使う

「#20 form、input、labelを使ってみよう」あたりからid属性を使う例がいくつか出てきます。

id属性を使うことで、その要素に固有の識別子をつけてあげましょう、ということです。

  • 氏名入力欄に初期値として「本名を入力してください」を表示。

<label for=”name”>氏名</label>
<input type=”text” id=”name” placeholder=”本名を入力してください”>

  • パスワード入力欄

<label for=”pwd”>パスワード</label>
<input type=”password” id=”pwd”>

  • 対象商品を選択するリスト欄

<label for=”product”>対象商品</label>
<select id=”product” size=”3″ multiple>
<option>Product A</option>
<option>Product B</option>
<option>Product C</option>

  • メッセージ入力欄に初期値として「140文字以内でお願いします。」を表示。

<label for=”message”>メッセージ</label>
<textarea id=”message” placeholder=”140文字以内でお願いします。”></textarea>

  • チェックボックスで対象を選択する。

<input type=”checkbox” id=”iphone”>
<label for=”iphone”>iPhone</label>
<input type=”checkbox” id=”android”>
<label for=”android”>Android</label>

  • ラジオボタンで対象を選択する。

<input type=”radio” name=”phone” id=”android” checked>
<label for=”android”>Android</label>
<input type=”radio” name=”phone” id=”iphone”>
<label for=”iphone”>iPhone</label>

Atomエディタのキーボードショートカット

あいかわらずキーボードショートカットをどんどん使いながら講座が進んでいくのでタイヘンです。

講座でよく使っているショートカットを表にしておきました。

Mac Windows
現在行を上に移動 Cmd + Ctrl + ↑ Ctrl + Shift + ↑
現在行を下に移動 Cmd + Ctrl + ↓ Ctrl + Shift + ↓
現在行を複製 Cmd + Shift + D Ctrl + Shift + D
コメントのOn/Off Cmd + / Ctrl + /

ひとこと

内容が多岐にわたっていてイマイチまとまりが無い印象ですが、一通り浅く広くHTMLの勉強をすることができます。

まずははじめてみて、手を動かしてやってみましょう!

内容が難しくて意味が分からなかったら、とりあえずまねして進めて、後で意味を調べましょう。