なんでも書いていきます！
|
今日は、��ﾃｰﾌﾞﾙの表に色つけたり、��DIVﾀｸﾞ設定しました♪
�（�法は３つ（以上？）ある  (1)table td のｺﾝﾃｷｽﾄで設定。（一部したい場合はclassでどうぞ。） ２つある場合は両方変わっちゃうよ。 (2)２つあって上と下の表の色変えたい！ #hyou1で設定→ ｽﾃｰﾀｽﾊﾞｰ＜table＞（片方）で#ID設定する (3)表の中だけ変えたい！！ #hyou1 td で設定 �∧儿垢靴燭い箸海蹐鯀�択！ ↓ ﾒﾆｭｰ→挿入→ﾚｲｱｳﾄｵﾌﾞｼﾞｪｸﾄ→DIVﾀｸﾞ ↓ DIVﾀｸﾞｳｨﾝﾄﾞｩ→ｸﾗｽorIDで名前設定！（.や＃はいらない。勝手につく） ↓ 新規CSSで上記名で定義設定 または・・・ 新規CSSで先に設定！ ↓ DIV設定する（挿入から） ｽｸﾛｰﾙで出てくるよ♪ （IDの場合は、一度使われてるとｽｸﾛｰﾙに出ない。） ※空白をつけたい場合、ﾃｰﾌﾞﾙにつける場合と＜ｐ＞につける場合と幅が 変わってくる。。 ＜ｐ＞でしたらえ〜んちゃうか？ 後は・・・復習問題[lesson01.html]をしたよー☆ ●行間のあけ方  CSSから→ﾀｲﾌﾟ→ライン高→□%ﾃｰﾌﾞﾙﾀｸﾞに行間あけるﾀｸﾞは使わない。＜ｐ＞につける。 ●＜ｐ＞ﾀｸﾞのあけ方 ・余白であけると、＜ｐ＞の性質、１行+指定pixあく。 ・ﾏｰｼﾞﾝであけると、一行あく代わりに、指定pixあく。 ●前をちょっとあける仕方 #table td の中→ﾌﾞﾛｯｸ→ﾃｷｽﾄｲﾝﾃﾞﾝﾄ□pix ●ﾃｰﾌﾞﾙの幅を広げるときは、余白ですると良い☆ #table td の中→余白→上・下□pix ●全体を真ん中に表示 全体を選択(＜div＞でくくるとか＜body＞）につけるCSSの中 →ﾎﾞｯｸｽ→ﾏｰｼﾞﾝ 右・左：自動 →OK 上のあいているのも、ここで上ﾏｰｼﾞﾝ0にしてもいい。 orﾍﾟｰｼﾞﾌﾟﾛﾊﾟﾃｨでもしてもよし！ |
|
�，泙些稜Г垢襦�
DW→編集→環境設定→一般→□HTMLﾀｸﾞの代わりにCSSを使用 にﾁｪｯｸ入ってるか？！ P.S □＜b＞＜i＞の代わりに＜strong＞＜em＞を使用にもﾁｪｯｸ。 ��css_lesson1.htmlをしまーす！ 文字のｻｲｽﾞ変更→ 普通にﾌﾟﾛﾊﾟﾃｨでも出来る♪ ↓ 確認 ： ｳｨﾝﾄﾞｩ→CSSｽﾀｲﾙ（orﾃﾞｻﾞｲﾝ） ��CSSｽﾀｲﾙから新規で出来る  ☆ｾﾚｸﾀﾀｲﾌﾟ ： ○ｸﾗｽ →. のものが出来る ○ﾀｸﾞ →ﾀｸﾞ選んで指定可能 ○詳細 →上記以外 ID/ｺﾝﾃｷｽﾄ/ｸﾞﾙｰﾋﾟﾝｸﾞ/ p.sampleなどの.の前に要素がつく場合/擬似ｸﾗｽ ☆定義場所 ：○現在のﾄﾞｷｭﾒﾝﾄ →適用→OK �づ�用する場所を選択。 ｽﾃｰﾀｽﾊﾞｰ をﾁｪｯｸ。 |
|
●CSSのﾒﾘｯﾄ（P12）
��HTMLが簡潔になる。 「文書の構造司る記述」HTML ： 「表示を司る記述」CSS ��一度の記述で複数のﾍﾟｰｼﾞを管理できる。 ��詳細で自由なﾃﾞｻﾞｲﾝができる。 文字の間隔・行の間隔を広げる・ﾃｰﾌﾞﾙのﾎﾞｰﾀﾞｰ ��SEO（検索ｴﾝｼﾞﾝ最適化）をはかる �イ気泙兇泙粉超�で読めるﾍﾟｰｼﾞができる ﾃﾞｻﾞｲﾝにこだわらなければ、文字は見れる ��将来のWeb環境に備えられる。 font/centerなど将来は廃止されることなっている。 ●CSSの書式（P17） �ヾ靄榲�な定義方法→ h1{color:red;} h1の部分 →ｾﾚｸﾀ colorの部分→ﾌﾟﾛﾊﾟﾃｨ（属性） redの部分 →値（宣言部） �∧�数のﾌﾟﾛﾊﾟﾃｨを定義→ ｢;｣ｾﾐｺﾛﾝで区切って、定義する。 ex) h1{color:red;font-size:2em;} ��ｺﾒﾝﾄの記述 →ｺﾒﾝﾄは表示されない。 /* ○○○ */ 1)ﾒﾓ代わり（日本語OK） 2)一時的にｽﾀｲﾙの設定を無効にしたい場合にも使用。 ●CSSの設定方法(p.18) ��ｴﾝﾍﾞﾃﾞｨﾝｸﾞｼｰﾄ → ＜head＞〜＜/head＞の中で定義 ��ｲﾝﾗｲﾝｼｰﾄ → 要素（〜など）の中で定義 ↑あまり使われてない。 ��ﾘﾝｷﾝｸﾞｼｰﾄ → link要素を使って外部CSSを読み込む style○.css の○を変更するとﾚｲｱｳﾄも変更できる。 ※3つの優先順位 → �◆Ν�・� � ↓↓↓ ●優先順位（p.32) �＼�作者、ﾕｰｻﾞｰ、ﾌﾟﾗｳｻﾞの優先順位 ？？？ ��CSSの設定方法による優先順位 ？？？ ��１つの文書内での優先順位 高 ・!importantを指定（☆） ↑ ・より詳細なｽﾀｲﾙの指定 ↓ ・より後に指定された師弟されたｽﾀｲﾙ 低 ・競合のないｽﾀｲﾙ ☆｢ﾌﾟﾛﾊﾟﾃｨ：値｣の後に !importantを入れると優先度のﾙｰﾙに関係なく最優先される。 ●ｾﾚｸﾀの種類(p.21〜） �〕彖任�ｽﾀｲﾙを設定する (1) 基本ｾﾚｸﾀ （ﾀｸﾞｾﾙｸﾄ） h1{color:#○○○○○○} (2)複数のｾﾚｸﾀ（ｸﾞﾙｰﾋﾟﾝｸﾞ） →｢,｣で区切る。 h1,h2{color:#○○○○○○} (3)全称ｾﾚｸﾀ →｢*｣で区切る。 *{background-color:#○○○○○○} ��任意の範囲にｽﾀｲﾙを設定する (1)ｸﾗｽｾﾚｸﾀ←要素とｸﾗｽの間に｢.｣を付けます。 ☆要素名.ｸﾗｽ名 h1.sample{color:#○○○○○○} ↑名は自由（半角英数）（初めの文字は数字ﾀﾞﾒ） ☆.ｸﾗｽ名 .sample{color:#○○○○○○} (2)IDｾﾚｸﾀ ←｢#｣ 優先順位高い ☆要素名#ID名 h1#sample{color:#○○○○○○} ☆#ID名 #sample{color:#○○○○○○} �Ｍ彖任料蟯愆愀犬�ｽﾀｲﾙを設定する (1)子孫ｾﾚｸﾀ（ｺﾝﾃｷｽﾄ）←要素名との間に「ｽﾍﾟｰｽ」 ☆親要素 子要素 pﾀｸﾞの中にemあればこうしましょう！ p e{color:#○○○○○○} ●ボックス （p36〜） 過去互換ﾓｰﾄﾞと標準準拠ﾓｰﾄﾞで設定が違う。 詳しくは、p38.p39を参照！ |
|
プロフィール |
|
Author:ujikintoki
|
|
最近の記事 |
|
|
|
月別アーカイブ |
|
|
|
カテゴリー |
|
|
|
タグリスト |
|
料理 恵比寿 お店 イタリアン 白金台 web icon 和食 お風呂 site hobby bridal css photoshop sozai+ HTML flash actionscript
|
|
カウンター |
|
|
|
ブログ内検索 |
|
|
|
RSSフィード |
|
|
|
リンク |
|
|