今日から『HTML/CSS入門編 (全3レッスン)』を始めよう。
まずは『HTML/CSS入門編1: HTML/CSSを理解しよう (全4回)』を受講。
01:Webページの仕組みを知ろう
あれなんか講師の声（霧島京子）が違う？声優さん変わったのか？逆にこっちの方が初期なのかな？
- HTML：Hyper Text Markup Language
- Webページの内容と構成を指定する
- テキストファイルとして記述する
- 基本的に、1ページにつき1ファイル
- CSS：Cascading Style Sheets
- Webページのスタイルを指定する
(サイズ・色・フォント・レイアウトなど) - テキストファイルとして記述する
- 複数のCSSを組み合わせたり、複数のHTMLから共通のCSSを利用したりできる
- Webページのスタイルを指定する
- Bootstrap：ツイッター社が開発した高機能なHTMLフレームワーク。
- HTMLフレームワークは、あらかじめデザインされたHTML/CSSをセットにしたもの。CSSフレームワークと呼ばれることもある
- オープンソースで誰でも自由に利用OK
- Webページ用の便利な部品を多数装備
- レスポンシブデザインに対応
02:Webページを作ってみよう
- タグの書式
- <html>と</html>にはさまれた部分が、Webページになる
- ＜h1＞と＜/h1＞にはさまれた部分が、見出しになる
- ＜!-- コメント --＞
↑タグが機能してしまうのを避けるため、＜＞を全角で記述。
03:テキストを表示してみよう
- 主なタグ
- pタグ： ＜p＞と＜/p＞ではさまれた部分が、段落になります。
- brタグ： ＜br＞単独で使用するタグです。この位置で改行します。
- strongタグ：＜strong>と＜/strong＞ではさまれた部分を、強調します。
04:Bootstrapを使ってみよう
- HTML5の雛形
<!DOCTYPE html> <html lang="ja"> <head> <title>Project Nyaan</title> </head> <body> 吾輩は猫である。</body> |
- Bootstrapを導入したページ
<!DOCTYPE html> <html lang="ja"> <head> <title>Project Nyaan</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> 吾輩は猫である。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> |
感想
かなり初歩だが、Bootstrapについては知らなかったので、勉強になった。