見出し・リスト・リンク・画像などの基本タグと、header/main/footerを使ったページ構造の組み方を、毎レッスン実際にコードを書いて自己紹介ページを育てながら学べる無料コースです。プログラミング完全未経験の方を対象としており、環境構築や事前知識は一切不要です。全 20 レッスンを修了すると、自己紹介ページのHTMLが完成し、CSS入門へ無理なく進めるようになります。
レッスン
20件
所要時間
約5.5時間
ランク
初級
学習環境
ブラウザ完結
15分・無料・登録なしで読めます
1. 骨組みだけ
1. 骨組みだけ
index.html（自己紹介ページの完全な構造）
ブラウザがHTMLを表示する流れを説明できる
見出し・段落・リスト・リンク・画像の基本タグを使い分けられる
header/main/footerでページを構造化できる
表とフォームを自分で組み立てられる
自己紹介ページのHTMLを最後まで書き切れる
ブラウザ完結（インストール不要）
触れる図解
20本
導入スライド
62枚
手を動かす演習
20問
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
ブラウザがHTMLを読んで画面にするまでを、実際に書きながらつかむ。
見出し・段落・リスト・リンク・画像で、自己紹介の中身を埋めていく。
divとセマンティックタグでページを区切り、表とフォームまで組み上げる。
このコースを終えると取れるバッジ
HTML/CSS 第4コース
0 / 20 レッスン
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
Chrome や Safari など、Web ページを見るためのアプリです。アドレスを受け取ると、ページの材料を取りに行き、読みやすい画面に組み立てます。
表示されたWebページ
パン屋さんのお知らせ
新しいメニューを公開しました。
ブラウザの役割
取りに行く → 読む → 画面にする
ブラウザはインターネットそのものではありません。インターネットを通して材料を受け取り、私たちが読める画面にするアプリです。
1 / 4
前回は名前をそのまま表示しました。h1タグで囲むと、文字は消えずに残り、その1行がページの見出しだとブラウザへ伝わります。
前回 タグなし
山田 太郎
文字として表示される
今回 h1で囲む
ページの見出しとして表示される
大きく太く見えるのは、ブラウザが『これは見出し』と受け取った結果です。文字そのものを書き換えたわけではありません。
1 / 4
HTML入門 - HTML と CSS の役割分担
CSS を外して、同じ中身の並び方と大きさがどう変わるか見比べてください。
1 / 3
HTML入門 - head と body の役割
本当の HTML ファイルには最初から決まった型があります。手紙に宛名と本文の欄があるのと同じで、置く場所が決まっています。
中は2つに分かれます。head は設定を書く場所、body は画面に出す中身を書く場所です。
先頭の1行は「これは今の HTML です」という宣言です。その下の html が、ページ全体を包む一番外側の入れ物になります。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>山田 太郎</h1>
</body>
</html>1 / 4
動かしながら、仕組みや変化を目で確かめられます。
陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
HTML/CSS道場 ハレノヒ珈琲を開店させる10問
同時に進めると、理解が早くなる組み合わせです
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>山田 太郎</h1>
</body>
</html>