どうも、keitaです。今まで、ミスを改善するという部分に注目を置いてきましたが、今回は初歩的な部分に関して、書いていきたいと思います。
初心者がはまりやすいポイント
CSSが反映されていない
私も昔よくやりがちでしたが、書いたCSSが反映されていなくて崩れることがあります。
まずこれをチェックしてください
CSS反映されてないときにするチェックリスト（簡略版）
- クラス名のスペルが間違ってる
- ファイルに一部全角が入っている
- クラス名ID名の頭に数字が入っている(01hogeとか)
レスポンシブになっていない
メディアクエリが入っているのに、レスポンシブにならない。この原因は、
メディアクエリの記述間違いや、Viewportが設定されていないことが原因が多いです。
間違った例
@media screen and (min-width:768px and max-width:1024px){
・・・
}正しい例
@media screen and (min-width:768px) and (max-width:1024px){
・・・
}上記は、タブレットのメディアクエリの例です。min-widthとmax-widthの範囲を指定するときは、
別々に分けてand指定しましょう。
さらに発展する躓きやすい部分
SVGが読み込めない！
最近アイコンにSVGを使うことが多いと思います。
SVGは大きくしても荒れない利点があるわけです。
私も、最近こういうつぶやきをしました。
Photoshopからアセット書き出しして出力されるSVGはそのまま読み込むと、Chromeのみ読み込めないようになってしまっています。このつぶやきの様に、テキストエディタでSVGを開き、該当部分を編集します。SVGは他の画像テータと違い、設定の集合体なので、編集することができます。
Flexboxが効かない！
近年、横並びの要素にはFlexboxを使う場合が多いと思います。ただ使い方を誤ると、効かないというときがあります。
Flexboxが効かない例はこれです。
以下のHTMLがあるとします
<div class="yokonarabi">
横並び要素
</div>
<div class="yokonarabi">
横並び要素
</div>
<div class="yokonarabi">
横並び要素
</div>
<div class="yokonarabi">
横並び要素
</div>それで以下のCSSを反映させます。
.yokonarabi{
display:flex;
}横並びにならない！
Flexboxは、display:flexを設定した要素の子要素に適用されるプロパティであるため、実際横並びにする要素に適用しても、適用されません。反映させたい要素の親要素にdisplay:flexを設定するようにしましょう。
以下のコードになります。
HTML
<div class="yokolist">
<div class="yokonarabi">
横並び要素
</div>
<div class="yokonarabi">
横並び要素
</div>
<div class="yokonarabi">
横並び要素
</div>
</div>CSS
.yokolist{
display:flex;
}まず、横並びさせたい親要素を書き、その子要素に横並びさせたい要素を書き、親要素にdisplay:flexを設定するといった感じです。
最後に
今回は、簡略的に説明しましたが、時間があればどんどん書いていきたいと思います。
より良いWeb制作ができるように願っております。
コメント