WEB上で学ぶ、CSS基本とWeb制作
Posted by advernya : 5月 20, 2010
世界最大! 東京屋外広告 |
お宝広告館 まれみれ |
twitterを 使っています |
MOTO-HAL BLOG |
Webスクールって結構高いね〜。
時間も金もないって人のために、WEB上で無料で学べるサイトを集めてみました。
<スタイルシート概要>
動画で、CSSの概要が理解出来ます。
【CSS】 スタイルシート入門講座 第0回【Webデザイン】‐ニコニ コ動画
【CSS】 スタイルシート入門講座 第2回【Webデザイン】
【CSS】 スタイルシート入門講座 第3回【Webデザイン】
【CSS】 スタイルシート入門講座 第4回【Webデザイン】
【CSS】 スタイルシート入門講座 第5回【Webデザイン】
【CSS】 スタイルシート入門講座 第6回【Webデザイン】
<DWでの具体的な操作>
上記の動画で概念を理解出来たら、こちらで具体的な操作方法を学習。
Dreamweaver8+CSS入門・動画講 座(スタイルシートの使い方)
<1カラム+ヘッダ+フッター (前編)>
(1)XHTMLドキュメントの新規作成
http://www.dougamanual.com/blog/87/498/e2483.html
(2)新規スタイルの追加
http://www.dougamanual.com/blog/87/498/m2484.html
(3)ロゴとサイトキャッチコピーのスタイルシート
http://www.dougamanual.com/blog/87/498/e2485.html
(4)グローバルナビゲーションの背景設定
http://www.dougamanual.com/blog/87/498/e2486.html
(5)リストへのスタイル追加
http://www.dougamanual.com/blog/87/498/e2487.html
(6)メイン部分のmargin調整
http://www.dougamanual.com/blog/87/498/e2490.html
<1カラム+ヘッダ+フッター (後編)>
(1)フッターをつくる/フッターの設定と背景画像
http://www.dougamanual.com/blog/87/523/e2535.html
(2)フッターをつくる/テキストとロゴの挿入
http://www.dougamanual.com/blog/87/523/e2536.html
(3)フッターをつくる/コピーライト部分の作成
http://www.dougamanual.com/blog/87/523/e2537.html
(4)フッターをつくる/ブラウザでチェックしながら仕 上げ
http://www.dougamanual.com/blog/87/523/e2538.html
<Dreamweaverとスタイルシートの初歩>
(1)コードの編集で、スタイルを追加
http://www.dougamanual.com/blog/87/497/e2480.html
(2)コードビューとCSSパネルを使って新規スタイル 設定
http://www.dougamanual.com/blog/87/497/e2481.html
(3)CSSプロパティを使ってスタイルを編集する
http://www.dougamanual.com/blog/87/497/e2482.html
(4)CSSダイアログを使ってスタイルの追加
http://www.dougamanual.com/blog/87/497/e2479.html
(5)リンク色とマウスオーバーのスタイルを追加
http://www.dougamanual.com/blog/87/497/e2478.html
(6)外部スタイルシートを追加する
http://www.dougamanual.com/blog/87/497/e2477.html
<スタイルシート 定番テクニック集>
(1)背景画像を使ったボタンの作り方
http://www.dougamanual.com/blog/87/721/e3357.html
(2)背景画像を使ったノート罫線の作り方(7:56)
http://www.dougamanual.com/blog/87/721/e3359.html
(3)dlを使った表の作り方(4:22)
http://www.dougamanual.com/blog/87/721/e3360.html
(4)背景画像を使った見出し
http://www.dougamanual.com/blog/87/721/e3366.html
(5)CSSを使った角丸ボックスの作り方(前編)
http://www.dougamanual.com/blog/87/721/e3361.html
(6)CSSを使った角丸ボックスの作り方(後編)
http://www.dougamanual.com/blog/87/721/e3362.html
<ソースコードでCSSデザイン>
(1)テキストと画像の挿入
http://www.dougamanual.com/blog/87/525/e2544.html
(2)コードヒントを利用しながらCSS入力
http://www.dougamanual.com/blog/87/525/e2545.html
(3)テーブルのスタイルを設定する
http://www.dougamanual.com/blog/87/525/e2546.html
(4)スニペットを使ってコードを入力
http://www.dougamanual.com/blog/87/525/e2548.html
(5)フロートの後をクリアする方法
http://www.dougamanual.com/blog/87/525/e2549.html
(6)ページの上に戻るボタン
http://www.dougamanual.com/blog/87/525/e2550.html
スタイルシート 研究室1
http://www.youtube.com/watch?v=hKydtofYM1k&feature=related
スタイルシート 研究室2
http://www.youtube.com/watch?v=RmFGXlTNFUk&feature=related
スタイルシート 研究室4
http://www.youtube.com/watch?v=YCaEImPJ8MU&feature=related
Adobe Dreamweaver 8の使い方 ”CSS(カスケーディング・スタイルシート)”
http://www.youtube.com/watch?v=omS7Bw5j8YA&feature=related
スタイルシート講座! ホームページの見栄えを良くする必須の技術
http://www.youtube.com/watch?v=mYqIJkbKHyw&feature=related
ホームページ ソース画面説明 CSS説明
http://www.youtube.com/watch?v=431DEEe1_Aw&feature=related
スタイルシート(CSS)作成講座 リンク集
http://allabout.co.jp/internet/hpcreate/subject/msubsub_lecturecss.htm
HTMLとスタイルシートのテクニック集 | ホームページ作成
http://www.1kara.net/htmlcss/
超初心者のためのホームページ作成講座
http://park16.wakwak.com/~html-css/index_hpkoza.html
CSSレイアウト実践講座
http://css.uka-p.com/
5日で分かるスタイルシート・CSS講座 ~サイト作りをもっと楽しく!もっと自由に!~
http://www.worldfolksong.com/css5/
2Step CSS – リアルタイムCSSレイアウト講座 –
http://www.2step-css.com/
HTMLタグ JavaScriptサンプルなどHP作成支援サイト:AWCS
http://www.awcs.org/
ホームページ作成 いまさらHTML,CSS講座
http://homepagelecture.web.fc2.com/
CSS講座-MENU-Webデザイナ独立支援サイト
http://www.webers.jp/css/cssmenu.html
XHTMLとCSS-実践XHTML+CSSでつくるホームページ講座
http://www.css-xhtml.net/
CSS基本講座 / ウェブデザインライブラリー
http://www.webdesignlibrary.jp/2007/02/basic_css_beginners.php
WWW講座〜CSSの文法
http://www.nurs.or.jp/~sug/html/chap64.htm
CSSレイアウト 実践講座1 | CSS Lecture
http://www.css-lecture.com/log/css-beginner/016.html
レイアウトの基本、ボックス – CSS講座
http://www6.plala.or.jp/go_west/beginner/css/box.htm
ホームページビルダー・グレート初心者講座 「スタイルシート」
http://www.aimix.jp/stylest.html
無料HTML/スタイルシート講座
http://dorubako.nishitokyo-city.com/muryo_styleseet.html
CSS作成講座
http://www.h5.dion.ne.jp/~torauma7/cssmaking.htm
WEB作成の豆知識 -CSS講座-
http://www.web-mame.net/css_course/
カスタムCSS
http://start.typepad.jp/manual/customcss.html
http://nextindex.jp/web/tut/CSStut/index.html
スタイルシート講座 -ミスティーネット-
http://style.misty.ne.jp/
CSSレイアウト入門講座
http://csslesson.blog22.fc2.com/
CSSによる段組(マルチカラム)レイアウト講座
http://www.geocities.jp/multi_column/
カスケーディングスタイルシート(Cascading Style Sheet)
http://www.scollabo.com/banban/lectur/style.html
CSSレイアウト講座
http://www.csskouza.com/
XSLTスタイルシート書き方講座(1):XSLTスタイルシートの基礎の基礎
http://www.atmarkit.co.jp/fxml/tanpatsu/10xslt/xslt01.html
初めてのホームページ講座 – CSSの実際のところ
http://www.hajimeteno.ne.jp/stylesheet/index.html
digilog.CSS – スタイルシート講座
http://digilog.client.jp/css/
ぱそおーるCSS講座http://css.pasoall.net/スタイルなCSSの基礎講座http://chaichan.web.infoseek.co.jp/src/cssmain.htm上級CSSレイアウト講座http://www.css-designsample.com/csslayout/index.html1と2の間辺りからはじめるCSS講座http://www6.plala.or.jp/go_west/beginner/css/ CSSボックスサンプルなぜ余白が2つ(margin、padding)も必要なのか?
しかし、なぜmarginと、paddingに分けて、余白を指定する必要があるのでしょうか?ねぇ?
それは、borderの存在を念頭において考えれば分かり良いはずです。
例えば、paddingが世の中に存在しなかったら、どうなるでしょうか?・・・そうです。文字にborderの罫線がびったりくっついた形になっ てしまいます。
あるいは、marginが世の中に存在しなかったら、どうなるでしょう?・・・そうです。各タグの罫線が重なって、罫線としての役割は制限されま す。
borderを境にした、外側の余白(margin)と、内側の余白(padding)の必要性が、ご理解いただけたかと思います。[CSS]マージンとパディングの使い分けをおさらい
マージン(margin)を採用する場合
borderの外側にスペースが必要な場合。
スペースに背景色(画像)を適用したくない場合。
上下に隣接したボックスにスペースを設ける場合、マージンの相殺を期待して、大きいサイズを有効にしたい場合。
例:15px + 20px の場合、スペースは20px。
※相殺されない場合もあります。
パディング(padding)を採用する場合
borderの内側にスペースが必要な場合
スペースに背景色(画像)を適用したい場合。
上下に隣接したボックスにスペースを設ける場合、上下に指定した合計の値を有効にしたい場合。
例:15px + 20px の場合、スペースは35px。
ブラウザによる問題
IE5.x, 6では、float指定したボックスにマージンを指定すると、左側が指定された値の2倍のマージンになってしまう場合があります。
その場合、「padding」を使用したり、ボックスに「display:inline;」を指定することにより回避できます
paddingとmargin相殺
コメントを残す