advernya's Youtube
WEB上で学ぶ、CSS基本とWeb制作
Posted by advernya : 5月 20, 2010
| 世界最大！ 東京屋外広告 |
お宝広告館 まれみれ |
twitterを 使っています |
MOTO-HAL BLOG |
Webスクールって結構高いね〜。
時間も金もないって人のために、WEB上で無料で学べるサイトを集めてみました。
＜スタイルシート概要＞
動画で、CSSの概要が理解出来ます。
【CSS】 スタイルシート入門講座 第０回【Webデザイン】‐ニコニ コ動画
【CSS】 スタイルシート入門講座 第２回【Webデザイン】
【CSS】 スタイルシート入門講座 第３回【Webデザイン】
【CSS】 スタイルシート入門講座 第４回【Webデザイン】
【CSS】 スタイルシート入門講座 第５回【Webデザイン】
【CSS】 スタイルシート入門講座 第６回【Webデザイン】
＜DWでの具体的な操作＞
上記の動画で概念を理解出来たら、こちらで具体的な操作方法を学習。
Dreamweaver8＋CSS入門・動画講 座（スタイルシートの使い方）
＜１カラム＋ヘッダ＋フッター （前編）＞
（１）XHTMLドキュメントの新規作成
http://www.dougamanual.com/blog/87/498/e2483.html
（２）新規スタイルの追加
http://www.dougamanual.com/blog/87/498/m2484.html
（３）ロゴとサイトキャッチコピーのスタイルシート
http://www.dougamanual.com/blog/87/498/e2485.html
（４）グローバルナビゲーションの背景設定
http://www.dougamanual.com/blog/87/498/e2486.html
（５）リストへのスタイル追加
http://www.dougamanual.com/blog/87/498/e2487.html
（６）メイン部分のmargin調整
http://www.dougamanual.com/blog/87/498/e2490.html
＜１カラム＋ヘッダ＋フッター （後編）＞
（１）フッターをつくる／フッターの設定と背景画像
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とスタイルシートの初歩＞
（１）コードの編集で、スタイルを追加
http://www.dougamanual.com/blog/87/497/e2480.html
（２）コードビューとCSSパネルを使って新規スタイル 設定
http://www.dougamanual.com/blog/87/497/e2481.html
（３）CSSプロパティを使ってスタイルを編集する
http://www.dougamanual.com/blog/87/497/e2482.html
（４）CSSダイアログを使ってスタイルの追加
http://www.dougamanual.com/blog/87/497/e2479.html
（５）リンク色とマウスオーバーのスタイルを追加
http://www.dougamanual.com/blog/87/497/e2478.html
（６）外部スタイルシートを追加する
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
ｽﾀｲﾙｼｰﾄ 研究室２
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/
５日で分かるスタイルシート・ＣＳＳ講座 ～サイト作りをもっと楽しく！もっと自由に！～
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
ＷＷＷ講座〜ＣＳＳの文法
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
ＣＳＳ作成講座
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相殺
コメントを残す