HTML & CSS入門
HTMLとCSSはWebページの構造とデザインを作るための基本となる言語です。 この2つを学ぶだけで、レイアウトや色、フォントを自由に組み合わせた魅力的なWebサイトを作成できるようになります。
-
7 レッスン
-
22 記事
-
目安 19 時間
HTML & CSSが学べるレッスン一覧
環境構築不要ですぐに学び始められるHTML & CSSのレッスン一覧です。
HTML & CSS 初級編 プラス
WEBページはHTML、CSSという言語によってその見た目が作られています。 実際にWEBページを作りながら学んでみましょう！
目安 3時間50分
このレッスンで学べること
-
1. HTMLに触れてみよう！
-
HTMLに触れてみよう！
-
見出しと段落
-
リンク
-
画像
-
リスト
-
-
2. CSSに触れてみよう！
-
文字の色
-
文字の大きさと種類
-
高さと幅と背景の色
-
タグに名前をつける
-
-
3. レイアウトを作ろう！
-
HTMLの全体構造
-
HTMLの全体構造（2）
-
全体のレイアウト
-
-
4. ヘッダーを作ろう！
-
ヘッダーの構造
-
ヘッダーのレイアウト
-
ヘッダーの余白
-
-
5. フッターを作ろう！
-
フッターの構造
-
フッターのレイアウト
-
-
6. コンテンツを作ろう！
-
メインのレイアウト
-
コンテンツの構造
-
ボーダー
-
paddingとmargin
-
-
7. お問い合わせフォームを作ろう！
-
お問い合わせフォームのレイアウト
-
お問い合わせフォームのレイアウト（2）
-
HTML & CSS 中級編 プラス
中級編では、ランディングページと呼ばれる、サイトを訪問したユーザーが一番最初に目にするWEBページを作っていきます。WEBデザインの応用知識を身につけ、よりモダンなWEBページを作ってい...
目安 4時間30分
このレッスンで学べること
-
1. レイアウトを作ろう
-
目標物を確認しよう
-
全体のレイアウトを作ろう
-
-
2. トップ部分を作ろう
-
トップ部分のレイアウトを作ろう
-
透明度、文字の間隔を調整しよう
-
ボタンを作ろう
-
レイアウトを整えよう
-
アイコンを使おう
-
-
3. ヘッダーを作ろう
-
ヘッダーのレイアウトを作ろう
-
ログインリンクを作ろう
-
ログインリンクを完成させよう
-
-
4. レッスン一覧部分を作ろう
-
レッスン一覧のレイアウトを作ろう
-
レッスンを並べよう
-
レイアウトを整えよう
-
-
5. メッセージ部分を作ろう
-
メッセージ部分のレイアウトを作ろう
-
立体的なボタンを作ろう
-
クリック時に変化をつけよう
-
-
6. フッターを作ろう
-
フッターを作ろう
-
-
7. ヘッダーを固定しよう
-
ヘッダーを固定しよう
-
HTML & CSS 初級編 道場 プラス
HTML & CSSの腕試しをしてみましょう！与えられた仕様書に沿って、「HTML & CSS初級編」のWEBページを一から創ります。
目安 2時間30分
このレッスンで学べること
-
1. 初級編を復習しよう
-
ヘッダーを作ろう
-
トップ部分を作ろう
-
コンテンツ部分を作ろう
-
お問い合わせフォームを作ろう
-
フッター部分を作ろう
-
HTML & CSS 中級編 道場 プラス
「HTML & CSS中級編」を一から創りあげましょう。このレッスンを自力で乗り越えることができれば、あなたのHTML & CSSのレベルは十分に...
目安 3時間20分
このレッスンで学べること
-
1. 中級編を復習しよう
-
トップ部分を作ろう
-
ヘッダーを作ろう
-
レッスン一覧部分を作ろう
-
メッセージ部分を作ろう
-
フッターを作ろう
-
HTML & CSS 上級編 プラス
上級編では「レスポンシブデザイン」を学びます。スマホやタブレット、PCなど異なる画面幅でもレイアウトをきれいに保つ「レスポンシブデザイン」は、WEBページ開発の必須のスキルです。がんばり...
目安 2時間
このレッスンで学べること
-
1. レスポンシブデザインとは
-
目標物を確認しよう
-
-
2. メディアクエリ
-
メディアクエリを設定しよう
-
メディアクエリによるレイアウト
-
box-sizing
-
-
3. レスポンシブデザインの実装
-
レスポンシブデザインの型を準備しよう
-
タブレット向けのレイアウトを作ってみよう
-
レイアウトの崩れを修正しよう
-
スマートフォン向けのレイアウト（１）
-
スマートフォン向けのレイアウト（２）
-
フォントをレスポンシブ化しよう
-
max-width
-
ヘッダーメニューを切り替えよう
-
HTML & CSS 上級編 道場 プラス
「HTML & CSS上級編」を一から創りあげていきます。様々な画面幅に対応したWEBサイトの作り方をマスターしましょう！
目安 1時間40分
このレッスンで学べること
-
1. 上級編を復習しよう
-
ヘッダーをレスポンシブ対応させよう！
-
トップ部分をレスポンシブ対応させよう！
-
レッスン一覧部分をレスポンシブ対応させよう！
-
フッターをレスポンシブ対応させよう！
-
HTML & CSS Flexbox編 プラス
このレッスンではCSSを使ったレイアウト方法の1つであるFlexboxを学んでいきましょう。 学習する内容はFlexboxのたくさんあるプロパティの中でも、特によく利用されるものになり...
目安 1時間
このレッスンで学べること
-
1. Flexboxとは
-
目標物を確認しよう
-
-
2. Flexboxの実装
-
display: flex
-
flex: auto
-
-
3. レスポンシブデザインの実装
-
flex-wrap: wrap
-
メディアクエリ
-
flex-direction
-
HTML & CSS学習後に取り組む実践ステップ
学習したHTML & CSSを活かして、環境構築や応用的なアウトプットに挑戦してみましょう。
HTML & CSSの基礎理解とTipsまとめ
HTML & CSSに関する知識や実践的なTipsを学び、理解をさらに深めましょう。
HTML & CSSを学ぶ前に知っておきたい学びのコツ
学ぶときの心構えやAIの活用方法を知っておくことで、自分のペースに合わせてより効率的に学習を進められます。
HTML & CSSに関連するコース
関連するコースを通じて、HTML & CSSで学んだ知識を他の分野にも広げていきましょう。
あなたの書いたコードは削除され、
最初の状態から学習し直すことができます。
あなたの書いたコードを残したまま、
レッスンの内容を見直すことができます。