HTML＆CSS 基本文法からレイアウトまで 超入門　大阪南港イメディオにて

人気の“出直し再勉強！ HTML＆CSS読解入門”と“CSSを使いこなす、Webページレイアウト実践”をまとめて学べる講座です。



タグやスタイルシートの基本ルールから、ページレイアウトの仕組みまでを２日で一気に学べます。二日間連続でお会いできるので、授業後の質問もいつもの講座よりたっぷりできますよ。（前日質問して帰り、翌日回答することも。）



まとめて一気に学べるので、集中して学びたい方や忙しい方にオススメします。２つ別々に受けるより、ちょっぴりだけお安く受講いただけます。

---

《出直し再勉強！ HTML＆CSS読解入門》

HTML（タグ）やCSS（スタイルシート）など、Webページをコードで触るのが怖いという方に。

なんとなく知ったつもりになってるWebコーディングのルールを必要最低限学びます。

よくあるパターンのWebページを教材として解説し、実務で使うソースコードに触れながら理解を深めます。

実務レベルですぐ活かせるコーディングの基礎知識を身につけることを目標にしています。

---

《CSSを使いこなす、Webページレイアウト実践》

HTMLやCSSなどコーディングのルールを理解し、読めるようになったら、いよいよ次はページ作成に挑戦しましょう！

本格的なCSSページレイアウトの基礎を学習します。単にCSSレイアウトの手法を覚えるだけではなく、

● ページを作る作業の全体の流れ

● 落とし穴に気をつける注意ポイント

● CSSコードをわかりやすく効率的に管理するコツ

● ブラウザの進化に伴った、「イマドキ」のCSSレイアウト手法

なども、あわせて学びましょう。

【１日目】



▼HTMLの基本構造

＜html＞に始まり、＜head＞があって＜body＞がある…

というHTMLの基本構造や、

＜h1＞と＜p＞と＜li＞の使いどころの違い…など、

文書構造を作る基本的なHTMLタグを確認します。

わからないタグが出てきたときの調べ方から、よく見かける間違った使い方、

文法チェックの仕方などトラブル解決方法も学びます。



▼CSSの基本的な使い方

タグ・クラス・複合セレクタ、CSSの優先順位…などのルールから、

floatを使った基本的なページレイアウト組みを確認します。

また、スタイル指定のコツやコードの管理方法も紹介します。



▼特殊コードの組み込み

Web上のさまざまなサービスでは、自分のページへコンテンツを組み込むための

特殊コードを提供してくれます。YouTubeの動画を組み込んだり、

TwitterタイムラインやFacebookページの情報を表示できるのをご存知ですか？

ここでは、代表的サービスの組み込みをご紹介します。



▼教材ページ

教材の完成ページは、こんな（↓）感じのシンプルなページです。

Webページレイアウトの基本的な部分がギュッと詰まっています。

YouTubeの動画(左)を表示したり、

TwitterやFacebookページの情報(右)を表示したりもします。





※教材ページは、こんな（↑）感じです。このコードを読み解きながら、HTMLやCSSのルールを学びます。

---

【２日目】



▼ リセットスタイルで、ブラウザスタイルの初期化

プロが組むページでは、

ブラウザごとの表示の差異をなくすためにリセットスタイルというものを使います。

その代表的な手法をご紹介します。



▼ レイアウトの基本、ボックスモデルについて

・レイアウトのかなめ、ボックスのこと

・marginやpaddingを正しく理解する

・ネガティブマージンについて



▼ もっと実践的なレイアウトテクニック

・floatレイアウトについて

・positionレイアウトについて

・display:inlineで横に並べる

・float レイアウトでナビゲーションを作る

・float レイアウトで商品一覧を作る

・スクロールテーブルで新着一覧を作る

・ネガティブマージンを使ってレイアウトする

・positionレイアウトでヘッダーを自由にレイアウトする



▼ jQueryを使って、動きを組み込む

・ JSlider を組み込んで、スライドショーを指定する





※教材ページは、こんな（↑）感じです。レイアウト事例は、実務でよく使う技を取り入れています。

・独学したがあいまいなところが多くて、HTMLとCSSの基礎をしっかり学びたい方

・CSSページレイアウトの基本をしっかり学びたい方

・外注業者に依頼したサイトを社内で更新する時に苦労している方

・企業のWebサイト更新担当者や初級レベルのWebクリエイター

以下の条件全てを満たしている場合に限り受講が可能です

・基本的なPC操作スピード、キーボードからの英数字等入力が難なくできること（講義内でソースコード入力が多く、講義についていけない可能性があります）

・HTMLやCSSを少しでも勉強したことのある方（勉強したけどよくわからなかったという出直しのかた大歓迎）