【旧版】HTML基礎文法入門 (全24回)
最新版のレッスンはこちらから »
【最新版】HTML基礎文法入門 (全30回)
ホームページやウェブサービスの画面を作る際に必要な、構造的な文書を書く方法について学びます。
このレッスンでは HTML5 を使用しています。
-
#01 HTMLとはなにか？ (02:56)
- 概要
- レッスンがカバーする範囲
- 仕様の確認方法
- caniuse.com
-
#02 必要なツールを用意しよう (02:55)
- Chrome
- Atom
- Ricty Diminished
- エディタの設定
-
#03 タグと属性を理解しよう (02:20)
- タグ
- 属性
-
#04 はじめてのHTML (02:07)
- HTML
- index.htmlの作成
- ブラウザでの表示
-
#05 meta､linkタグを使ってみよう (02:53)
- meta
- 文字化け対策
- link
- favicon
-
#06 styleタグを使ってみよう (02:33)
- style
- CSSファイル
- コメント
-
#07 id､class､style属性を使ってみよう (02:28)
- id
- class
- style
-
#08 セクションについて理解しよう (02:35)
- header
- footer
- nav
- article
- aside
- section
- h1-h6
-
#09 アウトラインを意識してみよう (02:43)
- セクションのマークアップ
-
#10 h1-h6タグで見出しを付けよう (02:28)
- 見出し
-
#11 p､hr､pre､blockquote､divを使おう (02:52)
- p
- hr
- pre
- blockquote
- div
-
#12 ol､ul､li､dl､dt､ddでリストを作ろう (02:48)
- ol / ul / li
- dl / dt / dd
-
#13 strong､br､spanを使ってみよう (01:45)
- strong
- br
- span
-
#14 aタグでリンクを設定しよう (02:37)
- 別サイトへのリンク
- 別ファイルへのリンク
- ページ内リンク
-
#15 imgタグで画像を表示させよう (01:27)
- img
- width / height
- alt
-
#16 tableタグで表組みを作ろう (02:57)
- table
- thead
- tbody
- tr
- th
- td
-
#17 formタグでフォームを作ろう (03:00)
- form
- input
-
#18 inputタグで入力部品を作ろう (02:53)
- size
- maxlength
- value
- placeholder
- password
- hidden
-
#19 textarea､buttonタグを使ってみよう (02:44)
- textarea
- button
- disabled
-
#20 checkbox､radio､labelを使ってみよう (02:57)
- checkbox
- radio
- label
-
#21 selectタグでセレクトボックスを作ろう (02:41)
- select
- option
- selected
- multiple
-
#22 HTML5から使える属性を使ってみよう (02:31)
- number
- date
- required
- novalidate
-
#23 文字参照を使ってみよう (02:30)
- 文字参照
-
#24 コンテンツモデルを理解しよう (02:54)
- カテゴリー
- コンテンツモデル
- トランスペアレント
#02 必要なツールを用意しよう
2017年2月7日
補足情報 Ricty Diminished のインストールについて
ユーザの方よりご指摘いただきましたが、Ricty Diminished のダウンロードページは以下に移転したようです。 tar.gz ファイルを解凍してインストールをしてください。
・プログラミング用フォント Ricty Diminished
http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html
なお、Windows OS をご利用の方は「Lhaplus」などのファイル解凍ソフトをお使いください。
(追記: 2017-02-07) 現在、以下の URL からもダウンロードできます。
https://github.com/edihbrandon/RictyDiminished
・プログラミング用フォント Ricty Diminished
http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html
なお、Windows OS をご利用の方は「Lhaplus」などのファイル解凍ソフトをお使いください。
(追記: 2017-02-07) 現在、以下の URL からもダウンロードできます。
https://github.com/edihbrandon/RictyDiminished
2016年2月19日
補足情報 フォント導入時のAtom再起動について（Windows）
Ricty Diminishedですが、設定後にAtomの再起動が必要となる場合がございます。すぐに反映されなかった方はそちらもお試しください。
2016年1月13日
補足情報 AtomのJapanese wrapパッケージについて
Atomに日本語の折り返し機能が追加されたため、動画内2:18より紹介している『Japanese wrap』というパッケージのインストールの必要はなくなりました（ユーザーの方よりご指摘いただきました。ありがとうございます！）。
2018年2月26日
補足情報 Atomの使い方について
今回紹介しているAtomですが、以下のレッスンで使い方を説明しています。こちらもあわせて参考にしてみてください。
・Atom入門 (全15回)
http://dotinstall.com/lessons/basic_atom_v2
・Atom入門 (全15回)
http://dotinstall.com/lessons/basic_atom_v2
2015年4月27日
補足情報 フォント名の綴り間違いについて
動画内で紹介されているフォント名ですが、綴りを間違えていました・・・（ユーザーの方よりご指摘いただきました。ありがとうございます！）。
「Ricty Dinimished」ではなくて、正しくは「Ricty Diminished」なので、そちらで検索してみてください（nとmが入れ替わっていました）。
「Ricty Dinimished」ではなくて、正しくは「Ricty Diminished」なので、そちらで検索してみてください（nとmが入れ替わっていました）。
#05 meta､linkタグを使ってみよう
2017年11月14日
補足情報 文字化けが起きない場合
動画中、0:52あたりで紹介されている文字化けの動作ですが、最近のChromeでは文字コードの検出精度があがってきているため、 charset が指定されていなくても本来の文字コードで正しく表示される場合があります。
最新のブラウザを使っている場合は文字化けが再現できなくても気にせずに学習を進めてみてください。
「ページのソースを表示」をクリックすると HTML を見ることができます
とありますが、「ソース」と...
「HTMLは構造的な文章で、CSSは見た目を規定する」とありますが、「構造的な文章」とはどういう意味なのでしょうか？ ...
バージョンがどんどん新しくなったら、その度に勉強していく必要があるのでしょうか？ また、どのくらいの頻度で更新されて...
エンコーディングにはいろいろな種類があるのでしょうか？ 主流ではなくなったら、のちのち全て直す必要がありますか？
HTMLの属性をいくつも付ける時は例えばどんなケースですか？
タグに使う不等号記号や p、class などの表記は、全角でもいいのでしょうか？
meta タグの charset の設定で utf-8 と書いても、 utf8 とハイフンなしで書いても意味は同じな...
ブラウザにドラッグ＆ドロップしたら、作成した HTML が表示されましたが、これはインターネット上に公開されたというこ...
meta タグについてより理解を深めたいと思っています。body タグとの違いなどを含めて解説が欲しいです。
「meta charset というのはこのページの文字コードを utf8 にするよ」という部分がわかりません。文字コー...
Atom 入門のレッスンで、コメントを入力するときは command + / というショートカットキーを使うという...
コメントは「ページのソースを表示」で誰にでも見えてしまいますが、具体的にどのような時に使うものなのでしょうか？
今回は「mystyles.css」という名前にしましたが、例えば「はじめてのCSS.css」という名前でもいいのですか...
「{ background: skyblue; }」のように、単語の間に半角スペースがある書き方と、今回のように半角ス...
動画内で「id は ページ内に 1 つしかない要素に対して使う、class はページ内に複数ある要素を指定する場合に使...
大きな見出しから h1 を付けていって h6 まである、とありますが、h2 から始めてもいいのでしょうか？ また、必ず...
header 要素には文章の header 情報を書く、ということですが、html には head 要素というよく似た...
文字や記号の前後に入れる空白は全角か半角か決まりはありますか？またここには空白を入れてよい、入れてはいけないなどの決ま...
マークアップしている時に、行頭の位置をたびたび右の方へずらしながら書いていますが、これは何か意味があるのでしょうか？ ...
次のように書いたところ、
「おいしいごはん#31」の表示が小さくなってしまいました。
...
pre タグや blockquote タグで囲ってある部分も、日本語の文章としてはパラグラフだと思うのですが、そのよう...
dl、dt、dd を使った定義リストの使い方が説明されていましたが、利用シーンが想像できませんでした。もう少し詳しく知...
文章中に重要な項目がたくさんあった場合、strong を随所に使ってもよいのでしょうか？ このくらいの重要度の時しか使...
見た目を規定する CSS は別ファイルで記述できる、と以前のレッスンで説明がありましたが、ではこの span タグで ...
動画のようにページ内のリンクに飛ばす設定をしたのですが、リンクをクリックしてもリンク先の「材料」のページに飛んでくれま...
ソースをコピー＆ペーストしたところ、タグなどに色がつかなくなってしまったのですが、解決方法を教えてください。
...
HTML を扱う際、通常は閉じタグがありますが、img タグに閉じタグがないのは何か理由があるのでしょうか？ meta...
例えば用意している画像が小さく、ブラウザでは少し大きめに表示させたい場合は、数値を大きめに設定してもいいのでしょうか？...
thead と th の違いがよくわかりません。thead が table のヘッダーを表すのであれば、th を使って...
hidden 属性の利便性についてもう少しわかりやすく教えて頂いてもよろしいでしょうか？どういうシーンで使われるもの...
input タグの中で出てくる size 属性が「50」という数値でしたが、この単位は pixel ですか？ mm で...
前回のレッスンで、input タグで作成した部品に value 属性を使うと初期値が設定できる、とのことでしたが、te...
「フォーム部品とラベルが離れていることがある」という状態が分からないのですが、具体的にどういう状態のときに label...
全ユーザーの学習状況
完了済
23,356
学習中
56,317
閲覧数
5,703,177
このレッスンについて
- 最終更新日
- 2015年3月5日 (1233日前)
- バージョン情報
- HTML5
- 関連キーワード (4)
補足情報 フォントの指定箇所について
Atomのバージョンアップに伴い、フォントに指定箇所は「設定画面」中の「Editor」タブに移動しています。そちらからご指定ください。