55.CSSプロパティ指定の失敗談 ～戒め～
思い通りにCSSが適用されない！
学び始めた頃よりは回数が減りましたが、それでもまだま出会います。
そんな失敗談を集めれば誰かのつまづき改善になるのでは？
と思い記事にすることに。
一応、CSSの書き方だけ最初におさらいして、この後の記事内で使う
言葉の確認もしておきます。
セレクタ {
プロパティ : バリュー ;
}
具体例
.test {
margin-top : 50px;
}
上の例だと、
.testがセレクタ
margin-topがプロパティ
50pxがバリューです。
では準備はここまでにして早速やっていきましょう。
失敗例と解決策を列挙していきますよ
CSSが全然適用されない
→バリューの最後のセミコロンが抜けている。
これ、全然気づかなくて当時30分くらい無駄にしました。
苦しい想いをしたので、今ではクセづけされて忘れることはほぼないです。
aタグ内のテキストがtext-align : centerしてもセンターにならない
→インライン要素のaタグはtext-align指定できない。親のブロック要素に指定する
これも最初の頃によく「何でだよ」ってなったやつです。ブロック要素、インライン要素という分け方がなくなったものの、性質は今も残っているので、注意したいものです。
ブロック要素にmargin-left : auto;をしても右に寄らない
→marginをつける要素がそもそも親要素。
margin : auto;系は神みたいな、最初の頃の信仰心をへし折られた出来事でした。
レイアウトを意識しつつ要素のブロック分けを考えるようになってからは殆ど出会うことはないですね。
親にposition : relative、子にposition : absoluteでtop、leftを指定しているのにズレる。
→line-heightの単位抜け。
line-heightの32pxが32になっていただけ、というカンタンなミス。ただ、見つけるのに結構かかったのでheightやmarginを触っても思うよにズレが直らない時には疑っても良いかもしれません。
Sassで入れ子にしているクラスに適用したい内容書いても反映されない
→&の下記忘れ。
これも、やりがちでしたがSassの入れ子の際に&の有無で意味が変わります。文法的には&がなくても間違っていないので、忘れていると気づけません。
例えば、
①
a {
.miss-test{～適用したいスタイル内容～}
}
②
a {
&.miss-test{～適用したいスタイル内容～}
}
の2パターンがあった場合、
①はaタグの中にある要素でクラスがmiss-testのものに適用されます。
<a href=""><span class="miss -test">これはテスト</span></a>
このspanタグに対してスタイルが適用されます。
②はaタグに対してmiss-testクラスが指定されている要素に、スタイルが適用されます。
<a href="" class="miss -test">これはテスト</a>
height : 100%指定しても高さが出ない
→親に高さがない
これは、あまり出くわさないと思いますが色々試していた時に気づいたので。
%指定は基本親要素の値の割合です。なので親が0pxなら子がいくら100%にしようと0pxなのです。
aタグにheight指定しても高さが出ない
→インライン要素に高さ指定しようとしている
最初はやっていました。インライン要素は幅はコンテンツ(内容)にフィット、
高さは指定不可です。ブロック要素におさめて、そちらに高さを指定しましょう。
もしくはセレクタで絞り込んでdisplay : inline-block;を指定しましょう。
<div class="misstake"><a>高さはブロック要素に</a></div>
backgroundに画像配置してサイズ指定した時の縦横比がおかしい
→marginとかpaddingと違ってsizeプロパティは横、縦の順で書く
background : url (./img/test.png) no-repeat center center / 横 縦です。
marginのショートハンドは縦 横の順なので間違えます。
上手くいかない時の確認順序
私は
のような流れで大体やっています。
こんなやり方がいいよ、というのがあれば教えていただけると嬉しいです。
今日のまとめ
上手くいかないと心が折れそうになりますよね。
「どうしてだよ」が止まりません。
苦労した分だけ、次は忘れないので解決時間が早くなったり、
ミスがなくなったりします。
お互い頑張りましょう。
では、また。
