HTML・CSS部 入門
この部活で作るもの
HTML・CSS部 入門の練習メニュー
レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます！
無料で受講してみる次の練習へ進む ボタンで解除
Lesson 01「HTMLとは？」
HTML言語とはいったいなんなのか！？１分ちょっとで分かりやすく解説！！
次の練習へ進む ボタンで解除
Lesson 02「HTMLの書き方」
HTMLの構成と基本的な書き方を無料のテキストエディタソフト「CotEditor」を使って学んでいきます。
次の練習へ進む ボタンで解除
Lesson 03「画像を表示させてみよう！」
imgタグを使ってホームページに画像を表示させてみましょう！
次の練習へ進む ボタンで解除
Lesson 04「リンクを使って画面を切り替えよう！」
aタグを使ってリンクを作ってみよう！ 画面遷移（画面の切替）ができるようになるよ！
次の練習へ進む ボタンで解除
Lesson 05「表を作ってみよう！」
tableタグ、trタグ、tdタグを使って表を作ってみましょう！
次の練習へ進む ボタンで解除
コーヒーブレイク「バックエンドよりフロントエンドが稼ぎやすくて美味しい理由」
次の練習へ進む ボタンで解除
Lesson 06「リストを作ってみよう！」
ul,liタグを使ってリストを作ってみよう！ リストはホームページのメニューなどにも使われているよ！
次の練習へ進む ボタンで解除
Lesson 07「フォームを作ってみよう！」
テキストボックスやチェックボックス、ラジオボタンにセレクトボックス、テキストエリアなど。 お問合せフォームやユーザー登録フォームなどWEBアプリケーションには欠かせないフォームの作り方を学んでいこう！
次の練習へ進む ボタンで解除
コーヒーブレイク「競争とはなんだろう？学習とはなんだろう？」
次の練習へ進む ボタンで解除
Lesson 08「CSSってなに？」
CSS言語とはいったいなんなのか？ 2分でさくっと解説します！
次の練習へ進む ボタンで解除
Lesson 09「CSSの書き方」
CSS言語の書き方を学習していきます。
次の練習へ進む ボタンで解除
Lesson 10「id属性とclass属性」
スタイル指定の幅を広げるid属性とclass属性について学習していきます。
次の練習へ進む ボタンで解除
Lesson 11「セレクタ」
CSS言語での要素へのスタイル指定方法とスタイル指定が被った場合のスタイルが適用される優先順位を学習していきます。
次の練習へ進む ボタンで解除
Lesson 12「ブロックレベル要素とインライン要素」
CSSでホームページをレイアウトしていく際に必須の知識となる要素の種類について学習していきます。
次の練習へ進む ボタンで解除
Lesson 13「marginとpadding」
ホームページのレイアウトを組んでいく際に重要な「余白」について学んでいきます。
次の練習へ進む ボタンで解除
Lesson 14「単位の指定」
CSSで指定できる「大きさの単位」と「色の単位」について学んでいきます！
次の練習へ進む ボタンで解除
コーヒーブレイク「プログラミングで稼ぐとはどういうことなのか？」
次の練習へ進む ボタンで解除
Lesson 15「positionとfloat」
CSSでボックスの配置を指定できる「position」「float」を学んでいきます！
次の練習へ進む ボタンで解除
コーヒーブレイク「高いの？安いの？出来るの？出来ないの？」
次の練習へ進む ボタンで解除
Lesson 16「実際にHPを作ってみよう！part１」
今までの集大成！トップページとお問合せページを実際に作っていきましょう！今回はHTMLでトップページを作っていきます。 テキストエディタも今までより優れた「Atom」を使っていきます。
次の練習へ進む ボタンで解除
Lesson 17「実際にHPを作ってみよう！part２」
今回はお問い合わせフォームの作成といよいよCSSを使って見た目を整えていきます。 新たに学ぶもの：GoogleChromeの開発ツールの使い方、placeholder属性、フォントファミリー（フォント種類）の変更、Googleウェブフォントの使い方、文字の上下中央揃え
次の練習へ進む ボタンで解除
Lesson18「実際にHPを作ってみよう！part3」
とうとう、トップページが完成します！ボックスの中央寄せや、ボックスの縦幅の揃え方、marginの相殺やpaddingやborderをボックスの幅に含める方法など実践的に使える内容を学んでいきます。
次の練習へ進む ボタンで解除
Lesson19「実際にHPを作ってみよう！part4」
とうとう最終回！お問い合わせフォームのスタイルを作って完成です！
次の練習へ進む ボタンで解除
コーヒーブレイク「はたらくプログラミング 第2話」
ホームページを作る上で一番最初に学ぶのがHTML言語とCSS言語。この２つのプログラミング言語を使えるようになると、基本的なホームページが作れるようになります！WEBサービス・WEBアプリはこのホームページに色々なものを加えることで出来ているので、WEBサービスの基礎となるスキルです。