paizaラーニング『HTML/CSS入門編3: HTML要素を学ぼう (全6回) 』を受講してみた

本講座最後のレッスン3『HTML/CSS入門編3: HTML要素を学ぼう (全6回)
』を受講。

最後は再びHTMLらしい。

https://paiza.jp/works/html/primer/beginner-html3

あれ？またまた、声優さんの声が違う！？

レッスン1と同じかな？レッスン2とは違うよな？😟 

01:画像とリンクを載せよう

• imgタグ：＜img＞タグのsrc属性で指定した画像を表示。単独で使う。
• アンカータグ：＜a＞タグのhref属性で指定したアドレスにリンクを張る。＜a＞と＜/a＞の間のテキストや画像が、リンクとして表示される。
  • target属性は、リンク先を同じウィンドウで開くか、別ウィンドウで開くかを指定できる。
    • 「_blank」とすると別ウィンドウで開く
    • 省略すると、同じウィンドウで表示
• Bootstrapを使って画像を自動調節する
  • ＜img class="img-responsive center-block" src="http://(URL)"＞

02:リストとナビゲーションバーを追加しよう

• 見出し
  ＜h1>と</h1>の間が、表題になる。
  ＜h2>と</h2>の間が、大見出しになる。
  ＜h3>と</h3>の間が、中見出しになる。
  ＜h4>と</h4>の間が、小見出しになる。
• 箇条書き

＜ul> 　＜li>ねこ</li> 　＜li>いぬ</li> 　＜li>うさぎ</li> ＜/ul>

• Bootstrapを使ったナビゲーションバーの表示
  • ＜nav class="navbar navbar-inverse navbar-fixed-top">
• ページ内のリンク
  • href="#"はページの先頭へのリンク

＜a href="#list">List</a> ＜h2 id="list">動物リスト</h2>

なんか次で最後のチャプターとか言ってたけど、このレッスン3はチャプター6まであるよな。

昔はチャプター3までしかなかったのだろう。

03:テーブルを表示しよう

• テーブルの基本形

＜table> 　＜thead>＜!-- ここが表題--> 　　＜tr>＜!-- 横一行ごとに記述する--> 　　　＜th>#</th> 　　　＜th>名前</th> 　　　＜th>特徴</th> 　　　＜th>住所</th> 　　＜/tr> 　＜/thead> 　＜tbody>＜!-- ここが表の本体--> 　　＜tr>＜!-- 横一行ごとに記述する--> 　　　＜td>1</td> 　　　＜td>たま</td> 　　　＜td>くつ下</td> 　　　＜td>東京都港区南青山</td> 　　＜/tr> 　＜/tbody> ＜/table>

04:基本的なフォームを作ろう

• フォームの基本形

＜form action="#" method="post"> 　＜label for="comment_1">コメント</label> 　＜input type="text" name="comment"> 　＜button type="submit">送信する</button> ＜/form>

05:フォームにパーツを追加しよう

• 複数行のテキストエリアの基本形

＜form action="#" method="post"> 　＜label for="message">メッセージ</label> 　＜textarea name="message" id="message" rows="3"></textarea> 　＜button type="submit">送信する</button> ＜/form>

• Bootstrapでの複数行のテキストエリアの基本形

＜form action="#" method="post"> 　＜div class="form-group"> 　　＜label for="message">メッセージ</label> 　　＜textarea class="form-control" name="message" id="message" rows="3">　　　</textarea> 　＜/div> 　＜button type="submit">送信する</button> ＜/form>

• プルダウンメニューの基本形

＜form action="#" method="post"> 　＜select name="select" id="select"> 　　＜option>タマ</option> 　　＜option>ミケ</option> 　　＜option>トラ</option> 　＜/select> ＜/form>

06:グリッドでフォームを作ろう

• Bootstrapのグリッドの基本形

＜div class="container"> 　＜div class="row"> 　　＜div class="col-sm-12"> 　　　＜h1>1行目</h1> 　　＜/div> 　＜/div> 　＜div class="row"> 　　＜div class="col-sm-4"> 　　　＜h2>2行目のA</h2> 　　＜/div> 　　＜div class="col-sm-4"> 　　　＜h2>2行目のB</h2> 　　＜/div> 　　＜div class="col-sm-4"> 　　　＜h2>2行目のC</h2> 　　＜/div> 　＜/div> ＜/div> ＜!-- /.container -->

感想

とりあえず、『HTML/CSS入門編 (全3レッスン)』の全3レッスンに関して、認定証を取得した。

認定証をまたみたいときはどうやってアクセスするんだろう？

まぁこれが何の役に立つかわからないけど。