コーディングの現場あるある事件簿
Penseur
2016.05.25
皆様こんにちは（時間的にこんばんはですね。）お久しぶりです。web制作にかかわってる人です。
今回はとあるコーディング担当の事件簿をお送りしようかと思います。
日々の仕事の中、ふとした隙間に顔を出す事件事件事件！
我々はその真相を確かめるべくアマゾンの奥地へ旅立った（ないないwwwww）
これは総合制作会社に勤めるMさんに起こった出来事である。
彼女はWEB制作に携わっており、その日もコーディング作業を行っていた。
ある程度調子よくcssを書きあげ、定期的に確認していく。
何度目かの表示確認のをおこなったとき、それは起こった。
当時のことを振り返り彼女はこう話している
「いやー、一瞬自分の目を疑いましたね。ははは」
デザイン上before疑似要素を使用して実現することがちょうどいいと思われる部分。
そこで設定したbefore疑似要素が全く表示されず、デザインを再現しきれていない状態だったのだ！！
before疑似要素に使われているプロパティにブラウザが対応しきれていないのか？
このブラウザだけで起こっている出来事なのか！？
表示と確認をおこない、それでも表示されない…
なぜ？
もう一度、該当のcssの記述を確認する。
そこには！なんと「あるべきはずのもの」が存在していなかったのだ！！！！
とあるデザイン会社にコーディング担当として勤めるWさん。
この日もwebサイトのコーディングを進めていた。
cssを書き、表示の確認をおこない、着々と構築していく。
そしてある部分に差し掛かった時、彼女は違和感に気付いた。
記述したcssが効いていないのだ。
これ自体は長いCSSを記述していると時折起こってしまうことだ。
階層を長く書きすぎた、セレクタの書き方が適切ではなかった……
などといったことが原因として挙げられるので落ち着いて確認する。
しかし、セレクタに書かれている階層、クラス名、タグ名に間違いは見られない…
なのに、いくらリロードしてみてもcssが効く様子がない。
クラス名をコピーしそこなって不完全な指定になっているのだろうかと、
再度、指定したいクラスをコピーし該当箇所にペーストしなおしてみる。
だが、効かないのだ。
なぜだ、何が足りない？目眩すら覚えそうな心地でcssに書かれた文字をにらむ。
そして、気づく「……あぁ……、なんだ、そういうことだったのか」
デザインを主軸に多くのメディアを取り扱う
「考える人」を社名に頂く会社に勤めるMさんはWEBを取り扱う部署に在籍している。
今日は少し凝った表現が必要になり、css3のtransformプロパティを使用することにした。
transformプロパティは指定した要素に変形を加えるプロパティで、
要素を回転させたり、縦や横にゆがめたりできる。
古いブラウザには効かないが、今回は
「新しいもので見た時はリッチな表現になり、
古いブラウザで見た時に読めるのであればリッチな表現は省く」という
「プログレッシブエンハンスト」という考え方で構わないため遠慮なくこの方針で構築する。
適切なセレクタにtransformプロパティの記述を加え、表示の確認を行う。
概ねこちらが意図したように表示されているようだ。
ほ、と胸をなでおろしたところで、とあるブラウザでの表示が目に入る。
それは本来表示が可能であるはずの「IE9」というブラウザの表示だった。
「……あれ、効いてない？」
そう、効いていないのだ。
変形を加えたかった要素は、行儀よくもともとの形のまま表示されている。
transformの対応状況を再度確認してもIE9は「表示が可能」
記述にも間違いはないはずだ。
他のブラウザでは表示ができている。
考え、悩みそしてその脳裏に、とある記憶がよみがえったのだった………。
※先にあげた3つの事件は本当にあった出来事を下敷きに8割くらいでっち上げですwwwww
あんなにのたうちまわってません。内容を盛っておりますwwwww
File No.1：事件の真相
はい。すごーく単純な話。
私の過去記事「前回の補足っぽい？Before疑似要素・After疑似要素ってなんぞ。」だとか「contentプロパティのお話（before after 疑似要素に欠かせない）」でもくっちゃべっておりますが、contentの指定忘れですね。
before afterが全く表示されていない場合は十中八九こいつが原因です。
他の原因の時もありますが（clearfixを施している要素のafterを指定したとか）ほぼほぼこの間違いです。
表示結果を見た次の瞬間あたりに「あー」ってなるやつ。
File No.2：事件の真相
お分かりですね？
そう、クラス名の前の「.」を書き忘れていただけです。
「CSS セレクタの話」でも書いていますが、cssにはいろんなセレクタが存在します。
セレクタというのは「どこに」そのスタイルを効かせるのか、
という場所の指定のことなのですが、ごくごくたまーーーーーーーーーーーーーーーーーにやらかします。「.」わすれ。
クラス名の前には「.」を付けないと「クラス」を指定していると認識してもらえず
「タグ」を指定していると認識されてしまうので、cssが効かなかったという真相です。
たとえばclass="nyanyanya"で指定したものにcssをかけたかったとして、
本来のセレクタは
しかし「.」を書き忘れてしまうと
となってしまい、<nyanyanya>というタグにスタイルをかける指定になってしまうのです。
当然そんなタグありませんのでcssが効きゃしねぇってことになるわけですね。
File No.3：事件の真相
一言で言うとベンダープレフィックスの書き忘れです。
ベンダープレフィックスとは、css3の勧告が「草案」であったとき
（すごーく平たく言うと「こんな感じで大体決まりかなー」といった状態）
各種ブラウザは先行実装をおこなっておりました。
ただし本番実装ではないため、ブラウザ毎に「このブラウザではこういう指定で表示できますよー。このブラウザですよー」といった指定をプロパティごとに書いてやらないといけなかったわけです。
この、「各ブラウザの先行実装が行われていた時のブラウザ」を対応範囲に含めていた場合はそれ用の記述「ベンダープレフィックス」を付けた指定と、最後に「本来の記述はこうですよ」という指定を書いてやらなければいかなかったのです。
ちなみに、プレフィックスというのは「接頭辞」という意味で、漢字から予測できるようにプロパティの頭につける文字です。
主要ブラウザのベンダープレフィックス
これを頭につけてプロパティを指定していくと「それぞれのブラウザ向けの記述」ということになるわけです。
HTMLクイックリファレンス：ベンダープレフィックス
上記サイトで詳しく書かれていますので、知りたい方は一読してみるといいかもしれません。
※各事件は起こった症状以外はフィクションです。いちいちここまでのたうちまわっておりません。
というわけで、ネタに困った挙句にエセ事件簿をお送りしました。
少しでも楽しんで頂けましたら幸いです。
それでは次お目にかかるときまで、さよーならー
今回はとあるコーディング担当の事件簿をお送りしようかと思います。
日々の仕事の中、ふとした隙間に顔を出す事件事件事件！
我々はその真相を確かめるべくアマゾンの奥地へ旅立った（ないないwwwww）
File No.1 before after、content書き忘れ事件
これは総合制作会社に勤めるMさんに起こった出来事である。
彼女はWEB制作に携わっており、その日もコーディング作業を行っていた。
ある程度調子よくcssを書きあげ、定期的に確認していく。
何度目かの表示確認のをおこなったとき、それは起こった。
当時のことを振り返り彼女はこう話している
「いやー、一瞬自分の目を疑いましたね。ははは」
デザイン上before疑似要素を使用して実現することがちょうどいいと思われる部分。
そこで設定したbefore疑似要素が全く表示されず、デザインを再現しきれていない状態だったのだ！！
before疑似要素に使われているプロパティにブラウザが対応しきれていないのか？
このブラウザだけで起こっている出来事なのか！？
表示と確認をおこない、それでも表示されない…
なぜ？
もう一度、該当のcssの記述を確認する。
そこには！なんと「あるべきはずのもの」が存在していなかったのだ！！！！
File No.2 クラス指定の前の「.」書き忘れ事件
とあるデザイン会社にコーディング担当として勤めるWさん。
この日もwebサイトのコーディングを進めていた。
cssを書き、表示の確認をおこない、着々と構築していく。
そしてある部分に差し掛かった時、彼女は違和感に気付いた。
記述したcssが効いていないのだ。
これ自体は長いCSSを記述していると時折起こってしまうことだ。
階層を長く書きすぎた、セレクタの書き方が適切ではなかった……
などといったことが原因として挙げられるので落ち着いて確認する。
しかし、セレクタに書かれている階層、クラス名、タグ名に間違いは見られない…
なのに、いくらリロードしてみてもcssが効く様子がない。
クラス名をコピーしそこなって不完全な指定になっているのだろうかと、
再度、指定したいクラスをコピーし該当箇所にペーストしなおしてみる。
だが、効かないのだ。
なぜだ、何が足りない？目眩すら覚えそうな心地でcssに書かれた文字をにらむ。
そして、気づく「……あぁ……、なんだ、そういうことだったのか」
File No.3 transformが効かない事件
デザインを主軸に多くのメディアを取り扱う
「考える人」を社名に頂く会社に勤めるMさんはWEBを取り扱う部署に在籍している。
今日は少し凝った表現が必要になり、css3のtransformプロパティを使用することにした。
transformプロパティは指定した要素に変形を加えるプロパティで、
要素を回転させたり、縦や横にゆがめたりできる。
古いブラウザには効かないが、今回は
「新しいもので見た時はリッチな表現になり、
古いブラウザで見た時に読めるのであればリッチな表現は省く」という
「プログレッシブエンハンスト」という考え方で構わないため遠慮なくこの方針で構築する。
適切なセレクタにtransformプロパティの記述を加え、表示の確認を行う。
概ねこちらが意図したように表示されているようだ。
ほ、と胸をなでおろしたところで、とあるブラウザでの表示が目に入る。
それは本来表示が可能であるはずの「IE9」というブラウザの表示だった。
「……あれ、効いてない？」
そう、効いていないのだ。
変形を加えたかった要素は、行儀よくもともとの形のまま表示されている。
transformの対応状況を再度確認してもIE9は「表示が可能」
記述にも間違いはないはずだ。
他のブラウザでは表示ができている。
考え、悩みそしてその脳裏に、とある記憶がよみがえったのだった………。
※先にあげた3つの事件は本当にあった出来事を下敷きに8割くらいでっち上げですwwwww
あんなにのたうちまわってません。内容を盛っておりますwwwww
File No.1：事件の真相
はい。すごーく単純な話。
私の過去記事「前回の補足っぽい？Before疑似要素・After疑似要素ってなんぞ。」だとか「contentプロパティのお話（before after 疑似要素に欠かせない）」でもくっちゃべっておりますが、contentの指定忘れですね。
before afterが全く表示されていない場合は十中八九こいつが原因です。
他の原因の時もありますが（clearfixを施している要素のafterを指定したとか）ほぼほぼこの間違いです。
表示結果を見た次の瞬間あたりに「あー」ってなるやつ。
File No.2：事件の真相
お分かりですね？
そう、クラス名の前の「.」を書き忘れていただけです。
「CSS セレクタの話」でも書いていますが、cssにはいろんなセレクタが存在します。
セレクタというのは「どこに」そのスタイルを効かせるのか、
という場所の指定のことなのですが、ごくごくたまーーーーーーーーーーーーーーーーーにやらかします。「.」わすれ。
クラス名の前には「.」を付けないと「クラス」を指定していると認識してもらえず
「タグ」を指定していると認識されてしまうので、cssが効かなかったという真相です。
たとえばclass="nyanyanya"で指定したものにcssをかけたかったとして、
本来のセレクタは
.nyanyanyaしかし「.」を書き忘れてしまうと
nyanyanyaとなってしまい、<nyanyanya>というタグにスタイルをかける指定になってしまうのです。
当然そんなタグありませんのでcssが効きゃしねぇってことになるわけですね。
File No.3：事件の真相
一言で言うとベンダープレフィックスの書き忘れです。
ベンダープレフィックスとは、css3の勧告が「草案」であったとき
（すごーく平たく言うと「こんな感じで大体決まりかなー」といった状態）
各種ブラウザは先行実装をおこなっておりました。
ただし本番実装ではないため、ブラウザ毎に「このブラウザではこういう指定で表示できますよー。このブラウザですよー」といった指定をプロパティごとに書いてやらないといけなかったわけです。
この、「各ブラウザの先行実装が行われていた時のブラウザ」を対応範囲に含めていた場合はそれ用の記述「ベンダープレフィックス」を付けた指定と、最後に「本来の記述はこうですよ」という指定を書いてやらなければいかなかったのです。
ちなみに、プレフィックスというのは「接頭辞」という意味で、漢字から予測できるようにプロパティの頭につける文字です。
主要ブラウザのベンダープレフィックス
Firefox …… -moz-
Google Chrome、Safari …… -webkit-
Internet Explorer …… -ms-
これを頭につけてプロパティを指定していくと「それぞれのブラウザ向けの記述」ということになるわけです。
HTMLクイックリファレンス：ベンダープレフィックス
上記サイトで詳しく書かれていますので、知りたい方は一読してみるといいかもしれません。
※各事件は起こった症状以外はフィクションです。いちいちここまでのたうちまわっておりません。
というわけで、ネタに困った挙句にエセ事件簿をお送りしました。
少しでも楽しんで頂けましたら幸いです。
それでは次お目にかかるときまで、さよーならー