はじめに // 配布テンプレ&利用規約

<< とりあえず書き換えてみよう。 + main + レイアウトの作り方(floatとposition) >>

よくある質問集

えーコメントをつける方は最低でもよくある質問集はチェックしてください。この記事にコメントつけてるのに、ここに書いてある項目を見ていないとか???ってなってしまいます。 今後はここに書いてあるのに、っていうコメントを頂いた時はコメント数の氾濫を防ぐためにも解答後そのコメントを削除させて頂きます。


ユーザー助け合い掲示板にもあるんですが
目次の意味も兼ねて。随時追加予定。
自分のスキルを上げたい、1から身につけたいって人は
まずcss講座xhtml講座を見てください。


■基本的なことである色換えや背景、文字装飾などは下のcss。
アイコン追加、不要項目削除などはhtmlと独自タグを見てください。


■具体的カスタマイズ

スポンサーサイト

一定期間更新がないため広告を表示しています

| | Comment 0 | - |

cssのどこを弄るんだろうという時。

初心者講座です。
htmlは大体分かるんだけど、この部分のデザインは
cssのどこを弄るのか分からない!という時。


cssは


AAA {
●●:▲▲;
}

って感じになってますが
AAAの部分には大きく分けて2タイプあります。


1 .entryや#layoutのように.や#が前につく場合
これはhtml側でclassやid指定がされている箇所に
適用させる為の記述です。


2 ul imgのように前に何もない場合
これはhtmlタグにそのまま直結してます。
<ul>や<img以下略 タグに適用するわけです。


またこれら二つは半角スペースをとることで
徐々に適用範囲を絞ることもできます。
#contents #main .pad
はid名contentsの中にあるid名mainの中の更にclass名pad
に適用させますよ、ってことです。
a imgはaタグの中のimgタグに適用させるってことです。
.linktext liはclass名linktext内のliタグに適用です。
ここまでこんがらがってませんか? ok okって人は続きを。


classやidはhtmlタグの中に紛れて指定されます。
<div id="layout">や<img src="URL" class="pict" />
って感じですね。
で、デザインを変えたい場所があるのに該当css項目が
分からない!って場合はまず、htmlソースをみて
問題の箇所の手前にあるタグを疑います。


<div class="entry_body">ここを変えたいな</div>

って時には.entry_bodyを疑うわけです。
でもここを変えても何にもならない!
って場合は更に親になっている指定を疑います。


<div class="entry">
<div class="entry_body">ここを変えたいな</div>
</div>

ってなってたら.entryが怪しいです!
ただ


<div class="entry">
<p class="entry_author">猫</p>
<div class="entry_body">ここを変えたいな</div>
</div>

みたいになってた場合、
.entry_authorはとりあえず関係がないです。
変えたい箇所とは並列に完結済みですよね。
変えたい箇所は.entryと.entry_bodyの
入れ子の中に入ってますが
.entry_authorの中には入っていません。


ただ二つのものの隙間を狭めたい時などはまた変わってきます。
その時は隣接する箇所の指定も疑わないといけません。
猫と変えたい場所の隙間を狭めたい場合は
猫のmarginやpaddingが影響しているのか、
変えたい場所のmarginやpaddingが影響しているのか、
また二つを内包しているもののline-heightが影響しているのか
全部見て見ないといけません。


これらは実際何度もtry&errorを繰り返すことによって
どこが怪しいのかすぐ分かるようになってきます。
私も何度も、何でこうなるんだろう・・・・ってのを経て
現在に至ってたりするわけです。


これとcssの適用範囲を調べるborder技を組み合わせると
css熟練度が身についていきます。
頑張ってください!

| 16:51 | Comment 1 | - |

スポンサーサイト

| 16:51 | Comment 0 | - |

Comment

http://www.longchampbag.us.com/ longchamp backpack
http://www.nikeairvapormaxflyknit.us.com/ nike air max 2016
http://www.fitflopsshoes.us.com/ fitflops clearance
http://www.katespadepurses.us.com/ kate spade laptop bag
http://www.adidas-ultraboost.us.com/ yeezy boost
http://www.hermesbirkin-handbags.us.com/ hermes purse
http://www.jordan11spacejams.us.com/ jordan 12
http://www.kyrie-4.us.com/ kyrie 1
http://www.yeezyboost350shoes.us.com/ adidas yeezy boost
http://www.nikeairmax-90.us.com/ nike air max women
http://www.pandora-jewelrysale.us.com/ pandora charms
http://www.pumafentyrihannashoes.us.com/ rihanna puma shoes
http://www.pandorajewelryrings.us.com/ pandora earrings
http://www.birkenstocksandalssale.us.com/ birkenstock outlet
http://www.pandorajewelryscharms.us.com/ pandora bracelet
http://www.lebron15-shoes.us.com/ basketball shoes
http://www.curry4-shoes.us.com/ stephen curry new shoes
http://www.adidasyeezy-350.us.com/ yeezy 750
http://www.fitflops-sale.us.com/ fitflop sandals
http://www.adidasnmdrunnerr1.us.com/ adidas nmd
http://www.airmax90shoes.us.com/ nike vapormax
http://www.kd10-shoes.us.com/ kd 5
http://www.jordans11shoes.us.com/ jordan 11 space jam
http://www.salomonspeedcross3.us.com/ salomon speedcross 3
http://www.louboutinredbottoms.us.com/ christian louboutin shoes
ドリフトliuyuzhen

| yeezy boost 350 | 2018/04/03 6:05 PM |

Submit Comment