× 無料のユーザー登録をすると学習状況を管理することができるようになります

HTML入門 (全24回)

ホームページやウェブサービスの画面を作る際に必要な、構造的な文書を書く方法について学びます。

このレッスンでは HTML5 を使用しています。

#02 必要なツールを用意しよう
2016年7月11日
ユーザの方よりご指摘いただきましたが、Ricty Diminished のダウンロードページは以下に移転したようです。 tar.gz ファイルを解凍してインストールをしてください。

・プログラミング用フォント Ricty Diminished
http://www.rs.tus.ac.jp/yyusa/ricty_diminished.html

なお、Windows OS をご利用の方は「Lhaplus」などのファイル解凍ソフトをお使いください。
2016年2月19日
Ricty Diminishedですが、設定後にAtomの再起動が必要となる場合がございます。すぐに反映されなかった方はそちらもお試しください。
2016年1月13日
Atomに日本語の折り返し機能が追加されたため、動画内2:18より紹介している『Japanese wrap』というパッケージのインストールの必要はなくなりました(ユーザーの方よりご指摘いただきました。ありがとうございます!)。
2015年5月2日
今回紹介しているAtomですが、以下のレッスンで使い方を説明しています。こちらもあわせて参考にしてみてください。

・Atom入門 (全13回)
http://dotinstall.com/lessons/basic_atom
2015年4月27日
動画内で紹介されているフォント名ですが、綴りを間違えていました・・・(ユーザーの方よりご指摘いただきました。ありがとうございます!)。
「Ricty Dinimished」ではなくて、正しくは「Ricty Diminished」なので、そちらで検索してみてください(nとmが入れ替わっていました)。
ソースとHTMLは同じものですか? PREMIUM - #01 HTMLとはなにか?
「ページのソースを表示」をクリックすると HTML を見ることができます とありますが、「ソース」と...
構造的な文章とは何ですか? PREMIUM - #01 HTMLとはなにか?
「HTMLは構造的な文章で、CSSは見た目を規定する」とありますが、「構造的な文章」とはどういう意味なのでしょうか? ...
HTML にはバージョンがあるのですか? PREMIUM - #01 HTMLとはなにか?
バージョンがどんどん新しくなったら、その度に勉強していく必要があるのでしょうか? また、どのくらいの頻度で更新されて...
エンコーディングの「utf-8」とは何ですか? PREMIUM - #02 必要なツールを用意しよう
エンコーディングにはいろいろな種類があるのでしょうか? 主流ではなくなったら、のちのち全て直す必要がありますか?
タグは全角でもいいですか? PREMIUM - #03 タグと属性を理解しよう
タグに使う不等号記号や p、class などの表記は、全角でもいいのでしょうか?
作成したファイルはすぐに Web 上で公開されてしまいますか? PREMIUM - #04 はじめてのHTML
ブラウザにドラッグ&ドロップしたら、作成した HTML が表示されましたが、これはインターネット上に公開されたというこ...
「meta charset というのはこのページの文字コードを utf8 にするよ」という部分がわかりません。文字コー...
コメントはどのような場合に使うのですか? PREMIUM - #06 styleタグを使ってみよう
コメントは「ページのソースを表示」で誰にでも見えてしまいますが、具体的にどのような時に使うものなのでしょうか?
CSS のファイル名は何でもいいのでしょうか? PREMIUM - #06 styleタグを使ってみよう
今回は「mystyles.css」という名前にしましたが、例えば「はじめてのCSS.css」という名前でもいいのですか...
style 属性の書き方は統一しなくていいのですか? PREMIUM - #07 id、class、style属性を使ってみよう
「{ background: skyblue; }」のように、単語の間に半角スペースがある書き方と、今回のように半角ス...
id と class はどう使い分ければいいですか? PREMIUM - #07 id、class、style属性を使ってみよう
動画内で「id は ページ内に 1 つしかない要素に対して使う、class はページ内に複数ある要素を指定する場合に使...
h1 などの見出しタグの数字は自由に決めていいのですか? PREMIUM - #08 セクションについて理解しよう
大きな見出しから h1 を付けていって h6 まである、とありますが、h2 から始めてもいいのでしょうか? また、必ず...
「head」と「header」の違いについて PREMIUM - #08 セクションについて理解しよう
header 要素には文章の header 情報を書く、ということですが、html には head 要素というよく似た...
行頭の位置をずらす(字下げ)をするのはなぜですか? PREMIUM - #09 アウトラインを意識してみよう
マークアップしている時に、行頭の位置をたびたび右の方へずらしながら書いていますが、これは何か意味があるのでしょうか? ...
<pre> <blockquote> は <p> で囲まなくていいのですか? PREMIUM - #11 p、hr、pre、blockquote、divを使おう
pre タグや blockquote タグで囲ってある部分も、日本語の文章としてはパラグラフだと思うのですが、そのよう...
dl、dt、dd の詳しい使い方について PREMIUM - #12 ol、ul、li、dl、dt、ddでリストを作ろう
dl、dt、dd を使った定義リストの使い方が説明されていましたが、利用シーンが想像できませんでした。もう少し詳しく知...
strong はどのくらいの重要度の時に使うのでしょうか? PREMIUM - #13 strong、br、spanを使ってみよう
文章中に重要な項目がたくさんあった場合、strong を随所に使ってもよいのでしょうか? このくらいの重要度の時しか使...
span タグに style を指定するのは、どのような場合でしょうか? PREMIUM - #13 strong、br、spanを使ってみよう
見た目を規定する CSS は別ファイルで記述できる、と以前のレッスンで説明がありましたが、ではこの span タグで ...
img タグに閉じタグがないのはなぜですか? PREMIUM - #15 imgタグで画像を表示させよう
HTML を扱う際、通常は閉じタグがありますが、img タグに閉じタグがないのは何か理由があるのでしょうか? meta...
width と height という属性では、元画像のサイズに関係なく自由に大きさを指定できますか? PREMIUM - #15 imgタグで画像を表示させよう
例えば用意している画像が小さく、ブラウザでは少し大きめに表示させたい場合は、数値を大きめに設定してもいいのでしょうか?...
thead の中にさらに th タグを入れるのはなぜですか? PREMIUM - #16 tableタグで表組みを作ろう
thead と th の違いがよくわかりません。thead が table のヘッダーを表すのであれば、th を使って...
size 属性で規定できる幅の単位はなんですか? PREMIUM - #18 inputタグで入力部品を作ろう
input タグの中で出てくる size 属性が「50」という数値でしたが、この単位は pixel ですか? mm で...
textarea の初期値を value 属性で指定できますか? PREMIUM - #19 textarea、buttonタグを使ってみよう
前回のレッスンで、input タグで作成した部品に value 属性を使うと初期値が設定できる、とのことでしたが、te...