無料

HTML入門:Webページの骨組みをつくる

見出し・リスト・リンク・画像などの基本タグと、header/main/footerを使ったページ構造の組み方を、毎レッスン実際にコードを書いて自己紹介ページを育てながら学べる無料コースです。プログラミング完全未経験の方を対象としており、環境構築や事前知識は一切不要です。全 20 レッスンを修了すると、自己紹介ページのHTMLが完成し、CSS入門へ無理なく進めるようになります。

レッスン

20件

所要時間

約5.5時間

ランク

初級

最初のレッスンを読む

15分・無料・登録なしで読めます

index.html

1. 骨組みだけ

目標

index.html(自己紹介ページの完全な構造)

できるようになること

ブラウザがHTMLを表示する流れを説明できる

見出し・段落・リスト・リンク・画像の基本タグを使い分けられる

header/main/footerでページを構造化できる

表とフォームを自分で組み立てられる

自己紹介ページのHTMLを最後まで書き切れる

前提知識・必要な環境

必須

  • • プログラミング未経験でもOK
  • • 環境構築は不要(ブラウザだけで書ける)

環境

ブラウザ完結(インストール不要)

このコースに入っているもの

触れる図解

20本

導入スライド

62枚

手を動かす演習

20問

監修

ゆめさくコード編集部

プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。

生田 陸人

ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。

  1. ブラウザがHTMLを読んで画面にするまでを、実際に書きながらつかむ。

  2. 見出し・段落・リスト・リンク・画像で、自己紹介の中身を埋めていく。

  3. divとセマンティックタグでページを区切り、表とフォームまで組み上げる。

HTML/CSS 第4コースのバッジ 未獲得

このコースを終えると取れるバッジ

HTML/CSS 第4コース

0 / 20 レッスン

このコースの動く図解

動かしながら、仕組みや変化を目で確かめられます。

腕試しに、1問だけ解いてみる

陽葵「ハレノヒ珈琲、開店を手伝ってくれる?」

1問目は無料で解けます。教材を見ないで、依頼と完成条件だけを読んで書いてみてください。

HTML/CSS道場 ハレノヒ珈琲を開店させる10問

あわせて学びたい

同時に進めると、理解が早くなる組み合わせです