今回は講座というよりも、私が実務でよく遭遇した出来事についてのCSS講座になります。

CSS講座のネタが意外と簡単になくなってしまったので、 次回は思いついたら書くことにします。

文字の開始位置をずらすときは基本padding-leftを使おう

アイコン等を文字の隣に置くときにアイコン分文字をずらすという 手法を取ることが結構あります。

このときに文字をずらすCSSとして「text-indent」が用いるのですが、 これは文の頭からずらす仕組みなので、もし横幅が小さいと 折り返してしまって折り返した部分は頭と同じずらしが発生せず 左端から文字が始まってしまいます。

つまりアイコンの真下に文字が来てしまって、 Webデザイン的に結構ブサイクになってしまいます。

これの対処法としてはpadding-leftを使って左側を開けるのが基本となります。

paddingを使うことによって文字の開始地点が均等にずれてくれるので 折り返しても文の頭と同じように揃えてくれます。

小説などの文章の場合はそのままtext-indentでも問題ないですが、 Webデザインのときに文字をずらすっていうのは基本的に文字の左に隙間がなくて 作ろうとしたりリストアイコン分ずらしたいということが多いです。

なのでpaddingを使って一度全体をずらして、 アイコンを左にずらして調整するのをおすすめします。

IDやHTML5のタグには基本的にスタイルは適用しない

IDはクラスよりも優先度が高いので、IDにCSSプロパティを指定すると 後からクラスで上書きしようとしてもIDのほうが優先されてしまって メンテナンス性も悪くなりますし、初学者はIDが悪さしているのにも気付けず時間を無駄にしてしまいます。

なので基本的にIDに対してCSSを適用するのはやめておいたほうがいいでしょう。

特に共同開発をする場合は気をつけましょう。

次にHTML5のタグ、つまり「header」や「section」等のHTML5で追加されたタグに対して クラスを適用してスタイリングするのは基本的にNGとなります。

というのも、HTMLはデザインするものではなくて構造化するのが目的です。

無駄にDIVタグを増やしたくないというのは理解できますが、 スタイリングする際はDIVを設けて置くのが理想の形になります。

もちろんやってしまっても問題はないのですが、 基本的にHTML5系のタグは添えるだけと思って構築しましょう。

カラム作りにはもうfloatを使わずflexboxを使おう

最近はflexbox、つまり「display:flex」を使って2カラム・3カラムを作るのが基本になっています。

それでも未だにjQueryとfloatを併用して作っているサイトもかなり多いです。

有名CSSフレームワークなんかも未だにfloatを使っているので正直改定してほしいところではあります、

floatを使用すると慣れていないと他の要素がめり込んだり、 次のボックスに対してclearCSSを設定しなければいけなかったり ブラウザによって挙動が地味に変わってきたりするので最近ではもうほとんど使われないです。

そもそもfloatってどういう用途で実装されたんでしょうね……

正直私もなんでこの要素があるのか正直良くわかってないです。

当時Webデザインを覚えた頃にはテーブルレイアウトは古いし構造的に良くないので Floatを使ったカラムづくりが主流になっていました。

おそらくメインとしての要素は画像のすぐ横にテキストを回り込ませる目的だと思うのですが、 そういったサイト作りはスマホ主流の現代では殆ど使われなくなってしまいました。

これからWebデザインを学んでいくであろう人はfloatは覚えなくても大丈夫ですが、 もしかすると古いサイトを改築する案件が来たときに苦労する可能性があるので、 挙動ぐらいは覚えておいたほうがいいでしょう。

回転を使ったデザインの注意

transform:rotateを使うと回転を加えることが出来てダイナミックなWebデザインが可能となります。

しかしブラウザによってかなり挙動が違ったり、 回転したものがいい感じに補正がかからずギザギザになってブサイクになったりします。

特にMacOSのsafariが邪魔してきます。

Macユーザーが増えているため、主流ブラウザなのに未だに独自解釈をしてくるブラウザなので、 Web制作者の間ではかなり問題児になっています。

最近では「autoprefix」という1つのCSSを書くだけで主要ブラウザのCSSコードを自動生成してくれるのですが、 safariは基本的にGoogleChromeと同じコードの書き方になるので個別に設定することは基本出来ません。

そしてGoogleChromeではちゃんと表示されてるのにSafariだとぐちゃぐちゃになってたりすることも結構あります。

この挙動を知らない人がWebデザインをしてしまうと、炎上案件になりかねません（笑）

最近では少ないと思いますが、Webデザインとコーディングを別々に作業する場合 Webデザイナー側はPhotoshopやIllustratorで自由にデザインしちゃうのですが そのまま再現しろとコーダーに投げるとコーダー側はかなり負担が大きくなってしまいます。

そして話を戻すと回転を使ったようなデザインをコーディングするときには 最初に実装してみて主要ブラウザで確認して明らかにダメになってしまった場合は 検証して証拠を見せてデザイナーに作り直してもらったほうがいいです。

どうしてもこの回転を使ったデザインじゃないとダメっていうときは safariだとこうなりますよってちゃんと保証をとっとかないと後からコーダーがネチネチ言われて辛くなります。

CSSを組むときは必ずSass(scss)やStylus等のツールを使おう

おそらく最近Web制作を始めたような人は大体使っているとは思いますが、 CSSは必ずSass等のCSS用のメタ言語を使用してください。

おそらく共同開発でよく使われるのがSass(拡張子はscss)が多いかなと思います。

私は個人的に最近人気が出てきているStylusというメタ言語を使っているのですが、 お仕事でやるときは基本的に幅広い認知度のSassを使うようにしています。

私はこういう技術的なものはなるべく最新のものを使っていきたいだけです。

Stylusを使う前はPostCSSなるものを使っていましたが、Stylusに乗り換えました。

SassとStylusやPostCSSを比べるとさほど便利さは変わらないので 特段理由がないのであれば広く使われているSass(scss)をしっかりと見に付けたほうがいいでしょう。

Shopifyなんかのテーマ作りはデフォルトでscssファイルで書いていったりもします。

昔はCompassというSass専用のコンパイルツールを使ってましたが、 今はnode.jsでscssを書いて保存するだけで自動的にcssに変換してくれるのでとても便利になっています。

CSSを直打ちするのは今の時代は辞めておきましょう。

ブラウザごとにコードを書くなんてのは時間の無駄なので、 Sass等のプラグインにある「autoprefix」は絶対に入れるべきです。

現場等で組む場合はちゃんとコーディング規約とかを確認してから使用しましょう。

CSS講座は今回で一旦終わります。

またなんか思いついたら続きを作ろうと思います。

それでは。