The World's billboards Memo Blog

世界の広告ビルボードの記録ブログ。

WEB上で学ぶ、CSS基本とWeb制作

Posted by advernya : 5月 20, 2010

世界最大!
東京屋外広告
お宝広告館
まれみれ
twitterを
使っています
MOTO-HAL BLOG

Webスクールって結構高いね〜。
時間も金もないって人のために、WEB上で無料で学べるサイトを集めてみました。

<スタイルシート概要>

動画で、CSSの概要が理解出来ます。

【CSS】 スタイルシート入門講座 第0回【Webデザイン】‐ニコニ コ動画

【CSS】スタイルシート入門講座 第1回【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

スタイル シート研究室第3回

スタイルシート 研究室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

CSS スピード・ラーニング

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.html

1と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相殺

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

 
%d人のブロガーが「いいね」をつけました。