HTML・CSS部

部活トップ画像

ホームページを作る上で一番最初に学ぶのがHTML言語とCSS言語。この2つのプログラミング言語を使えるようになると、基本的なホームページが作れるようになります!WEBサービス・WEBアプリはこのホームページに色々なものを加えることで出来ているので、WEBサービスの基礎となるスキルです。

この部活で作るもの

部活で作るもの

HTML・CSS部の学習動画一覧

Lesson 01「HTMLとは?」

HTML言語とはいったいなんなのか!?1分ちょっとで分かりやすく解説!!

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を作ってみよう!part1」

今までの集大成!トップページとお問合せページを実際に作っていきましょう!今回はHTMLでトップページを作っていきます。 テキストエディタも今までより優れた「Atom」を使っていきます。

Lesson 17「実際にHPを作ってみよう!part2」

今回はお問い合わせフォームの作成といよいよCSSを使って見た目を整えていきます。 新たに学ぶもの:GoogleChromeの開発ツールの使い方、placeholder属性、フォントファミリー(フォント種類)の変更、Googleウェブフォントの使い方、文字の上下中央揃え

Lesson18「実際にHPを作ってみよう!part3」

とうとう、トップページが完成します!ボックスの中央寄せや、ボックスの縦幅の揃え方、marginの相殺やpaddingやborderをボックスの幅に含める方法など実践的に使える内容を学んでいきます。

Lesson19「実際にHPを作ってみよう!part4」

とうとう最終回!お問い合わせフォームのスタイルを作って完成です!