みなさん、お疲れ様です。

 

突然ですが、CSSが動かないことってありますよね。なぜ動かないのか、すぐに見つかればいいのですが、コードがぐちゃぐちゃだとどこが間違っているのか探すだけでも一苦労ということも・・・。

今回はそんなCSSの解決方法について考えたいと思います。

 

CSSが動かないとき、私がいつも理由として考えるのは主に以下の3つです。

①CSSファイルが正しく読み込まれていない。

②セレクタが間違っている。

③詳細度

 

スタイルが効いてないコードを見ると、この3つに当てはまることが多い気がします。

では、それぞれの解決方法を考えていきましょう。

 

①CSSファイルが正しく読み込まれていない。

これはHTMLでlinkタグで読み込むときに、パスを間違えているわけですが、これはきちんとパスを確認してあげれば大丈夫ですね。特に途中でディレクトリの構造を変更したときは注意が必要です。

 

②セレクタが間違っている。

単純なスペルミスもありますが、それ以外に指定したくない要素にも効いてしまっているというパターンがあります。特に要素を指定する場合は多いと思います。これを解決するには、新たにクラス名を付けるという方法もありますが、セレクタの指定方法を変えることで解決できる場合があります。以下にいくつか紹介します。すべて覚える必要はないと思いますが、知っておくと便利です。

 

子孫セレクタ （a b）	言わずと知れた子孫セレクタ。半角スペースを空けて指定するセレクタです。子要素以下すべての内包する要素を指定できます。
子セレクタ （a>b）	子孫セレクタと違い、子要素のみを指定します。多重構造のリストなどに使えます
属性セレクタ （E[attribute=”属性値”]）	指定した属性値のattribute属性を持つEという要素を指定するセレクタです。例えばimg[src=”photo.png”]みたいにするとその画像だけを指定するといった使い方です。 いくつかバリエーションがあります。
[n]	n属性を持つ要素 ex.）[title]・・・タイトル属性を持つ
[n^=”a”]	属性値がaで始まるn属性を持つ要素 ex.）[class^=”item-“]・・・item-で始まるclass属性を持つ
[n$=”a”]	属性値がaで終わるn属性を持つ要素 ex.）[src$=”.png”]・・・.pngで終わるsrc属性を持つ
[n*=”a”]	属性値がaを含むn属性を持つ要素 ex.）[href*=”about”]・・・aboutを含むhref属性を持つ
nth-child疑似クラス	その要素が何番目かで指定します。1番目のliならli:first-child、2番目ならli:nth-child(2)、最後ならli:last-childといった具合。 ちなみに偶数ならeven、奇数ならodd、3つおきなら3nという指定も可能。

 

 

 

今、紹介したものはほんの一部です。気になる方はいろいろ調べてみてください。今回は以下のサイトを参考にさせていただきました。
意外と知らない!?CSSセレクタ20個のおさらい

 

③詳細度

詳細度とはセレクタの優先順位のことです。順位は

１．!important

２．インライン記述（style属性）

３．IDセレクタ

４．クラスセレクタ・属性セレクタ・疑似クラス

５．要素セレクタ、疑似要素

６．ユニバーサルセレクタ

のようになっています。この順番は基本的にひっくり返らないみたいです。

 

ここで注意してほしいのは、JavaScriptでスタイルを設定する場合とメディアクエリーに記述する場合です。

まず、JavaScriptでスタイルを設定する場合ですが、この場合はstyle属性としてスタイルが記述されるので、CSSファイルの記述が上書きされてしまうということです。なので、JavaScriptでスタイルを変更する場合は、CSSにそのスタイルを記述しないほうがよさそうです。

 

2点目のメディアクエリーですが、こちらでうまくいかない人が多いみたいです。

@mediaの中に記述するのがメディアクエリーですが（ざっくりしすぎですが）、実は@media内に記述したからといって必ずその画面サイズで適用されるというわけではないのです。

例えば下の場合

この場合、画面幅600px以下でliの背景色は何色になるでしょう？

 

 

 

答えは、赤色です。

メディアクエリーは、その画面サイズになったときに@media内の記述を読みこむようになるだけで、優先順位は詳細度によるのです。なので@media内に記述するときにセレクタを省略して記述すると、「スタイルが効かない！」なんてことになるのです。

というわけで、@media内に記述するときはセレクタを同じにしておくのが良いと思います。

 

今回は概要だけまとめました。今後、機会があれば一つひとつ掘り下げてみたいと思います。

以前投稿したCSSのボタンを紹介する記事がうまく動かなくなったので、投稿しなおします。
中身は前と変わってません。

 

動きとしてはホバーすると色が変わり、押すとへこむというものです。

下にDEMOがあります。リンクしてないので、押しまくって楽しんでください。
 
以下はコードです。

 

 
DEMO

みなさん、お疲れ様です。

 

今回はSVGアニメーションに挑戦しました。→DEMO

 

存在自体は知ってたのですが、使いどころがわからずほったらかしになっていました。

で、なんとなく上のDEMOを作っていたら、知人が「サイトの初めに出したら面白そう」と言ってくれたので、それをヒントに実装しました。もしよければ後でポートフォリオサイトのほうに行ってみてください。ページ上部のロゴからリンクしてます。

 

では、使い方です。

今回はこちらのサイトを参考にさせていただきました。サイトが詳しいのでここでは簡単に説明させていただきます。

http://ascii.jp/elem/000/000/901/901319/

 

①まず、Illustratorでイラストを描きます。アンカーポイントは少ないほうがよさそうです。

 

②イラストをsvg形式で保存します。このときレイヤーの名前は半角英数にしておきましょう。

 

③svgの画像をDreamweaverなどのテキストエディタで開きます。すると以下のようなコードが出ます（見えないと思いますが、雰囲気だけ）。

 

④このコードの<svg>～</svg>をコピーしてHTMLの埋め込みたいところにペーストします。このときブロック要素で囲んでおいて、その要素の幅で画像の大きさを操作します。

 

    ⑤CSSでアニメーションの動きを決めます。 stroke・・・線の色 fill・・・塗りつぶしの色 stroke-width・・・線の幅 stroke-dasharray・・・破線の間隔 stroke-dashoffset・・・破線の開始位置 仕組みとしては破線の間隔を見えなくなるくらい長くして、破線の開始位置をすごく大きいところから小さくしていくことで、描画するような動きになるということだそうです。    

 

一応以上で完成です。まだやり始めでわかってないこともたくさんあるので、またいろいろ試してみて載せたいと思います。