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

大阪南港ATC ソフト産業プラザイメディオでは、様々なセミナーを開催しています。
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

【詳細・お申込みはこちら】
https://www.sansokan.jp/events/eve_detail.san?H_A_NO=22291

開催日時: 2017年2月16日(木) 13:00-17:00
       2017年2月17日(金) 13:00-17:00
       ※二日連続レッスンです
料金: 20,000円/名 (税込)

 

■講座内容■


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

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

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

《出直し再勉強! HTML&CSS読解入門》
HTML(タグ)やCSS(スタイルシート)など、Webページをコードで触るのが怖いという方に。
なんとなく知ったつもりになってるWebコーディングのルールを必要最低限学びます。
よくあるパターンのWebページを教材として解説し、実務で使うソースコードに触れながら理解を深めます。
実務レベルですぐ活かせるコーディングの基礎知識を身につけることを目標にしています。

《CSSを使いこなす、Webページレイアウト実践》
HTMLやCSSなどコーディングのルールを理解し、読めるようになったら、いよいよ次はページ作成に挑戦しましょう!
本格的なCSSページレイアウトの基礎を学習します。単にCSSレイアウトの手法を覚えるだけではなく、
● ページを作る作業の全体の流れ
● 落とし穴に気をつける注意ポイント
● CSSコードをわかりやすく効率的に管理するコツ
● ブラウザの進化に伴った、「イマドキ」のCSSレイアウト手法
なども、あわせて学びましょう。

 

 

■講座構成(予定)■

【1日目】

▼HTMLの基本構造
<html>に始まり、<head>があって<body>がある…
というHTMLの基本構造や、
<h1>と<p>と<li>の使いどころの違い…など、
文書構造を作る基本的なHTMLタグを確認します。
わからないタグが出てきたときの調べ方から、よく見かける間違った使い方、
文法チェックの仕方などトラブル解決方法も学びます。

▼CSSの基本的な使い方
タグ・クラス・複合セレクタ、CSSの優先順位…などのルールから、
floatを使った基本的なページレイアウト組みを確認します。
また、スタイル指定のコツやコードの管理方法も紹介します。

▼特殊コードの組み込み
Web上のさまざまなサービスでは、自分のページへコンテンツを組み込むための
特殊コードを提供してくれます。YouTubeの動画を組み込んだり、
TwitterタイムラインやFacebookページの情報を表示できるのをご存知ですか?
ここでは、代表的サービスの組み込みをご紹介します。

▼教材ページ
教材の完成ページは、こんな(↓)感じのシンプルなページです。
Webページレイアウトの基本的な部分がギュッと詰まっています。
YouTubeの動画(左)を表示したり、
TwitterやFacebookページの情報(右)を表示したりもします。


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

 

【2日目】

▼ リセットスタイルで、ブラウザスタイルの初期化
プロが組むページでは、
ブラウザごとの表示の差異をなくすためにリセットスタイルというものを使います。
その代表的な手法をご紹介します。

▼ レイアウトの基本、ボックスモデルについて
・レイアウトのかなめ、ボックスのこと
・marginやpaddingを正しく理解する
・ネガティブマージンについて

▼ もっと実践的なレイアウトテクニック
・floatレイアウトについて
・positionレイアウトについて
・display:inlineで横に並べる
・float レイアウトでナビゲーションを作る
・float レイアウトで商品一覧を作る
・スクロールテーブルで新着一覧を作る
・ネガティブマージンを使ってレイアウトする
・positionレイアウトでヘッダーを自由にレイアウトする

▼ jQueryを使って、動きを組み込む
JSlider を組み込んで、スライドショーを指定する


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

 

■対象者■

・独学したがあいまいなところが多くて、HTMLとCSSの基礎をしっかり学びたい方
・CSSページレイアウトの基本をしっかり学びたい方
・外注業者に依頼したサイトを社内で更新する時に苦労している方
・企業のWebサイト更新担当者や初級レベルのWebクリエイター

 

 

■受講に必要な条件■

以下の条件全てを満たしている場合に限り受講が可能です
・基本的なPC操作スピード、キーボードからの英数字等入力が難なくできること(講義内でソースコード入力が多く、講義についていけない可能性があります)
・HTMLやCSSを少しでも勉強したことのある方(勉強したけどよくわからなかったという出直しのかた大歓迎

 

 

■講師プロフィール■

森(もり) 和恵(かずえ)(r360studio)

r360studioで活動するWeb系セミナー講師。

『 むずかしいことでも、わかりやすく伝える 』 をモットー に楽しく学べるセミナーを開催。
今後は、eラーニングや電子書籍の形式で、Web制作を学ぶための教育コンテンツにも注力中。

● 著書に『iPhone&Android スマートフォンサイト 制作の仕事術』(マイナビ)など。

●Dreamweaver CS5 ACI (Adobe認定トレーナー)

 

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

インデックス
検索エンジンがWebページをデータベースに保存しているデータベース。データベース ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]