HTML/CSSくらい自分も書けると思ってる勘違いプログラマにありがちな行動【CSS編】

HTML/CSSくらい自分も書けると思ってる勘違いプログラマにありがちな行動【CSS編】

いまだにCSSでつまずくあなたが最初に見つめなおすことでは初心者にありがちなタイプミスなど、慣れ・不慣れから起きるケアレスミスのチェックポイントを紹介しました。
今回は、実際に仕事で関わったプログラマさんに対して、心の中で「そうか、そういうことは知らないか…まあ私も最初はそうであった」と思った出来事を紹介します。

なんでも、突き詰めれば奥が深いもので、わかってるつもりになっちゃってるけど全然わかってないことってありますよね。
Webデザイナーだって、HTMLからCSSまで何もかもすべて理解して暗記しているわけではありませんが、これを知らない人にフロント実装してもらうとだいたい「うぎゃー!なんでだー!」という声が聞こえてきてしばらくあとにCSSがちゃんと効いてないんだけど?って人のせいにしながら相談されるのでまったく気分が悪いです。
自分がCSS理解できないだけだろ。

id,class名の先頭を数字にしちゃう

ほかの言語ではどうなんだか知ったことではありませんが、HTMLでid,class名の先頭に数字は使えません。
状態変化の操作をするために勝手にclass=”00″とかつけないでください。ってか文書構造とか考えずにいじりたい要素にclass勝手に追加しないでください。ついでに言っておくと勝手にdivを増やして同じidが2個も3個もあるとか、ダメだからね。id名は1html内では複数設定できません。

id=”hoge01″とかid=”hoge02″とかなら問題ないので、こんな感じの連番id見てDOMどうこうしたかったら地道にsubstr()してください。

連番でデータを管理したいのであれば、HTML5ならidではなくdataカスタム属性なども利用するといいかもしれません。

2016/02/01追記
XHTMLやHTML4.0.1あたりのプロジェクトを同時に管理してるチームであれば、混乱を避けるために上記の認識でいるのがいいと思いますが、念のため。
CSSではなくHTML側の仕様の話なのですが、HTML5では、id属性の仕様が変わりました。
3.2.5.1 The id attribute W3C Recommendation
・空白文字を含んではいけない
・半角数字のみで構成されていても良い
・アンダースコアで始まっても良い
・句読点のみで構成されていても良い

驚きですね( ゚д゚)!

React.jsではコンポーネントが展開されると要素に自動で「.0.1」のような連番IDが振られたりするのですが、これも問題ありません。
「#.0.1」とかになるんですね・・・まあ、classセレクタと紛らわしいのでReact専用のつもりで使うかな・・・って感じですね。

仕様上問題はないけれども、メンテナンス性、可読性なども考慮してルール決めすることにしましょう。

floatを使えばなんでも横並びになると思っている

ナビゲーションのリストを横並びにしたいな~「リスト 横並び」でぐぐったらふむふむ、floatっていうのがあるのね!
という流れでfloatを覚えた人のほとんどが勘違いしていると想像します。

floatは要素を横並びにする便利プロパティではありません。

floatというのは、続く要素を回り込ませて流し込むというフローのための指定です。
例として、ニュースサイトなどでよくある、左に写真があって、右に記事のテキストが配置されていて、写真に対して回り込むように流し込まれている、あれです。
leftを指定すれば左に向かって順次流し込み、rightを指定すれば右に向かって流し込まれていきます。

このレイアウトの性質を利用して、500pxの幅のエリアに100pxのリストを5つ並べる(左に向かって流し込む)、という小技なのですが、いくつか気を付ける点があります。

あくまでも、回り込ませるためのものなので、回り込めるだけの領域がなければ前の要素(例でいうと写真)の横に入りきれず、通常通り下に続きます(改行みたいな感じになります)。
いわゆるブロック要素(※)はデフォルトで領域(親要素)の幅いっぱいに広がりますので、ただfloatを指定しても横並びにはならないのです。
floatする要素には幅を指定しないといけません。

※HTML5ではブロック要素・インライン要素という概念がなくなりました。CSSでdisplayを多様に設定できます。
このへんの仕様を理解するとスタイリングで悩むことも減りますよ。

なんでwidth:100%;なのにはみ出すのかわからない

ある要素にwidth:100%;と設定したら、えらいはみ出してしまい、画面が横に伸びて、横スクロールバーまで出現する始末。なんやねーん!ってなった方も多いのではないでしょうか。
要素には、要素自身の幅(自称バストサイズ)のほかに、margin(あなたとの距離)、border(身にまとった洋服)、padding(ブラのパッドの厚み)などの指定があります。
多くの場合、自称バストサイズはpadding込みの数字になりますので注意してください。
なんだかたとえがよくわからなくなってきたので、やめましょう。

要するに、着ぶくれですね。
width自体が100%もあって領域いっぱいに広がっていると、その外側にmarginをつけたりborderをつけたり、中にpaddingを仕込んだりすると、必要な横幅は100%を超えてしまいます。

実際に設定したい幅から上下左右padding分を引いたりして設定しないといけませんね。

しかし、親要素の領域が常に一定でない場合もあります。
サイズの違うタブレットで親要素がめいっぱい横長になったり、狭くなったりするかもしれません。同じタブレットでも、もしその向きを横にしたら?

そういう場合に便利なのが「box-sizing」プロパティです。
これは、width指定にborderまで含むか?といった指定ができるプロパティです。
下着も何もつけずに胸囲を測るか、分厚いパッドを仕込んだブラして洋服着たままで外側をメジャーで測るか?ってことですね。

結局最後までこのたとえを使ってしまいました(´・ω・`)

なんでposition:absolute;なのにずれるのかわからない

float、widthの問題と絡みます。
そのあたりのHTMLの要素のフローをきちんと理解していないと、思ったように配置がうまくできなかったりします。そこで頼りがちなのが絶対配置。
通常は横幅いっぱいの積み木ブロックが上から順番に並べられていく、というイメージですが、position:absolute;ならほかの要素の積み木フローから外れ、絶対配置で右下に置いたりできる!と。

しかしこれも条件があります。

まず、positionには下記のような設定ができます。

  • static(デフォルトの設定。上から順番に箱が詰まっていく)
  • relative(相対配置。本来の配置を基準として、相対的な位置を指定する)
  • absolute(絶対配置。本来のフローは無視して、基準点からの絶対的な位置を指定する)
  • fixed(固定配置。絶対配置で指定した位置で固定される)

static以外を指定すると、要素は通常の積み木フローから外れ、いわば一段宙に浮いたような状態になります。この状態で、relativeであればその位置からtop:10px;で上から10px、left:20px;で左から20pxの位置、というふうに相対的な位置を決めることができます。

ところが、absoluteの場合は「static以外が指定された親要素の左上」が基準点になります。
自分を囲っている親要素がstaticの連中とは違う層に浮いていなければ、その中にいる自分の立ち位置も、基準になる目印もないわけですね。

また、relativeの場合はあくまでも自分がいたところからズズズっとずらすので、本来自分がいた場所が空白で残りますΣ(´∀`;)
absoluteであれば、自分がもともと入る予定だった位置は関係なく、親要素の左上にポンッと置かれるだけですね。

なんでz-index:9999;なのに隠れるのかわからない

positionの問題と絡みます。
z-indexの解釈はブラウザによって違うものがあったりしますがそんなことを言い訳にしないでよく考えて設定しましょう。

全要素同士で比較するのではなく、同じ階層の要素同士で数値の大きさを比較して重なり順が決まります。

<section>
  <div><!--囲っているdiv-->
    <p>ひとつめ</p>
    <p>ふたつめ</p>
    <p>みっつめ</p>
  </div>
  <div><!--囲っているdiv-->
    <p>よっつめ</p>
    <p>いつつめ</p>
    <p>むっつめ</p>
  </div>
</section>

たとえば上記のようなHTMLがあります。
通常、よっつめ~むっつめはあとから描画されるので、もしpositionが同じ位置になるように指定されていたら、ひとつめ~みっつめが隠れることになります。
ここで、もしひとつめ~みっつめのp要素にz-index:2;、よっつめ~むっつめの要素pにz-index:1;と指定しても、決してひとつめ~みっつめが上になることはありません。

こういう場合は、親divにz-indexを指定する必要があります。
親div同士の重なり順が変われば、当たり前ですが中身のp要素も上に来ます。
しかし、「ひとつめ、よっつめ、ふたつめ、いつつめ、みっつめ、むっつめ」と互い違いに重ねたいときはどうしたら良いのでしょうか。ぐぐればいくらでも見つかるでしょう。
ブラウザの実装に頼らないで、CSSの仕様どおりに設計したいですね。

HTML/CSSがわからないということを認めない

「HTML/CSSくらい誰でも書ける」まさにそのとおり。
それなのに不自由するのはなぜですか?
結局は、CSSのこういった仕様を理解していないので不自由に感じるのです。
配置のことまで先読みしてHTMLを書いておく、ということも必要になってきます。
どちらも勉強が必要ですよ。
あれができない、これができない、CSSではそんなことできない、と決めつける前に、もう一度ぐぐってみてください。

誰でも自由自在に配置できるようになりますよ( ´∀`)bグッ!