CSSでHTMLに対して指示を行っていくこと自体は難しいことではないけれど、無数にある要素にいかにわかりやすく指示を出せるかがかなり難しいなということに気づいた私は、クラス設定や、ボックスの設計などを緻密に最初から練りこんで行かないとあとあと大変なことを学びました：）
よって、最近はCSSについてまた学びなおしているところ。
良いCSS
「良いCSS」とは 「良いCSS」の定義として、おそらく最もよく知られているのは、以下の4つです。
予測しやすい
再利用しやすい
保守しやすい
拡張しやすい
最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。
マルチクラス・シングルクラスについて
マルチクラス・シングルクラス １つの要素に対して、複数のクラスを指定するのをマルチクラス、１つないし２つ程度のクラスを指定するのをシングルクラスと呼びます。 例えば、BootstrapをはじめとしたOOCSSはマルチクラスで、BEMはシングルクラスが適していると言われています。 ただし、これらはそこまで厳密なものではなく、BEMだから絶対にシングルクラスにすべきという事ではありません。
Bootstrapとは BootstrapはTwitter社が開発したCSSの「フレームワーク」です。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。
Bootstrapを使うメリット Bootstrapを使うメリットとして、レスポンシブWebデザインに対応しているという点があります。通常、スマートフォンやタブレットなど個別に対応するスタイルを作っていると大変手間がかかります。BootstrapはCSS3のメディアクエリを使用しているので、ブラウザの横幅サイズを判断基準として、レイアウトデザインを柔軟に調整することが可能です。
また、マルチクラスは最初の設計の段階でコストが掛かりやすく、シングルクラスに比べて設計力を問われる。シングルクラスは初動時のコストは少なくシンプルに保てるが、継続的にうまくコントロールしていかないとのちのちカオスになりやすい。
一長一短ある感じではあるけれど、マルチクラス設計はフレームワークや大規模なサイトに、シングルクラス設計はスタートアップや小規模なサイトに向いているかなと思っている。自分は、後者の環境で設計することがほとんどなので、シングルクラスの方が適していると思うことが多い。
自分がマルチクラスよりシングルクラスでの設計の方が好みなのは、
序盤の設計時のシンプルさ・容易さ
HTML側を見た時の明快さ・編集する時の容易さ
HTML側での簡潔なクラス指定によるデザインの崩れにくさ
などが挙げられる。HTML側をシンプルに保つ代わりに、CSS(Sass)側の複雑さが増える。一方、マルチクラスでの設計になると、HTML側が複雑になりやすい代わりに柔軟性が高くなり、その柔軟性の代償としてクラスの組み換えによるデザインの崩れも起きやすくなる。
BEMの明快さ
それで、シングルクラス設計でCSSを書いていく上で問題になりやすいポイントとしては、その付けられた名前から意味を読み取りづらくなりがちというのがある。BEMのメリットの中でも大きな特長だと思うのは、特にシングルクラス設計での構造・命名に秩序をもたらしてくれることで、BEMを適用するだけでその問題をある程度は解決できるのがうれしい。
シングルクラス設計の命名では、1つの名前の中に単語数が多くなりがちで、CSSクラス名として主流のハイフン連結だけでは、名前をつけた本人以外には正確に意味を読み取れないことが多々ある。
さらにキャメルケースを使ったり、アンダースコアを使ってわかりやすくしようとする気があるなら、最初からBEMのルールを使ったほうがよりわかりやすくなると思う。BEMには記号の違いだけでなく、ElementやModifierという概念があるから。
誰にでも伝わる良い名前を付けるというのはとても大変なことで、できるだけその労力を減らしたいと常々思っていて、今回のBEMの命名規則はその部分を大きく軽減・改善してくれるものだった。
"class名が決まれば我々の仕事は90%は終わったも同然"
"どんな名前であろうと意味があり、目的がある"
BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。
Block - 構成のルートとなる要素。すべてはここから始まると言っても過言ではない。
Element - Blockに所属する子要素。必ずBlockの中にいて単体では生きられない。
Modifier - 元となるBlockまたはElementから変化した状態を表す要素。
Elementをアンダースコア2つ(__)、Modifierをハイフン2つ(--)で連結することでBEMの各要素を表現する。
block block__element
block__element--modifier
block--modifier
block--modifier__element
という使い方をする。
Sassとは
Sass(サス)とは、「Syntactically Awesome Stylesheets」の略で、直訳すれば「構造的にイケてるスタイルシート」という意味です。
Sassはあくまでもプリプロセスを記述する言語なので、実際の CSSに書き換えるための作業として「コンパイル」(再構築)が必要です。
そのためには
1. Rubyをインストール
Sassを導入する際に、RubyGemsと呼ばれるRubyのパッケージシステムを使います。 MacではRubyが標準でインストールされていますが、Windows ユーザーの場合はダウンロードページでダウンロードしてください。
2. Sassをインストール
この２つをインストールする必要があります。
これまで、 CSSはそのままstyle.cssのようなファイルに直接スタイルを書いていく方法が主流でした。
しかし、Webサイトが巨大化したり、より高度で細部にまで渡ってスタイルを決めていく場合、 ファイルサイズが大きくなり、どうしても保守性に欠けてしまいます。
そこで登場したのが、プリプロセッサーであるSassやLESS、Stylusといったメタ言語です。
こうした言語を使うことで、 CSSをよりプログラミングに近い形で扱うことができるようになります。
Sassの使い方
1. ネスト構造 (入れ子構造)
HTMLは入れ子構造をとりますが、それを CSSでも扱えるようになる、ということです。
構造が深くなるほどネスト構造で書くことができると便利です。
構造やclass名、プロパティの値の変更があっても一部を修正するだけで済むからです。
scss記法
.box { width: 100%;
.red { background: #f00; }
.blue { background: #00f; }
}
コンパイル後
.box { width: 100%; }
.box .red{ background: #f00; }
.box .blue{ background: #00f; }
Sassはあくまでもプリプロセスを記述する言語なので、実際の CSSに書き換えるための作業として「コンパイル」(再構築)が必要ですが、下のものがSassによってコンパイルされたもの。
2. 変数
Sassでは、他のプログラミング言語と同じように変数を使うこともできます。
下記のように「$」マークの後ろに変数名をつけます。
よく使う配色などを変数としてまとめておくと、保守運用が楽になります。
$maincolor: #f00;
$accentcolor: #fff;
.box{
.title {
background: $maincolor;
color: $accentcolor;
}
.button { background: $maincolor;
color: $accentcolor; }
}
コンパイル後
.box .title { background: #f00; color: #fff; }
.box .button { background: #f00; color: #fff; }
Sassをコンパイルするには、手動で行う方法と自動で行う方法の2種類があります。
Sassを使うことで、 CSSの扱い方がスマートになるだけでなく、バグやミスも減り、開発スピードが飛躍的にはやくなります。
＜おまけの便利集＞
1.上下中央揃えのシンプルな書き方
ページ全体で、左右中央揃えにするには「text-align: center;」を指定すればよいというのはすぐに思いつきますが、上下に中央揃えしたいとなると、タイプする手が止まってしまいますよね。 CSSグリッドシステムを使う予定がない場合には、次のコードを使ってみてはどうでしょうか。
html, body{ height: 100%; margin: 0; }
body{ -webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex; }
CSSを扱うために初心者から抜け出すには、
親要素・子要素の関係をしっかりと掴む
擬似クラスや擬似セレクタの使い方に慣れる
サイズの絶対指定(pxなど)・相対指定(em)・ルートからの相対指定(rem)の使い分けをする
あとは、保存しておきたいCSSの表現集
ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけ CSSは、 HTMLや JavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。
2. CSSリセット
すべての要素のマージンとパディングだけ調整すれば事足りるケースがほとんどです。
* { box-sizing: border-box; margin: 0; padding: 0; }
「box-sizing」は要素のwidth(横幅)・height(縦幅)の計算方法を指定するためのプロパティです。簡潔にいえば、paddingやborderを縦横の幅に含めるかどうかを指定することができます。
box-sizingを正しく定義していないと、 ブラウザによってはboxのサイズがpaddingを含んでいて、別の ブラウザではpaddingを含めずに計算しているために、 レイアウト崩れの原因になってしまうことがあります。
border-boxを指定すると、widthやheightは「paddingやborderを含めた値」となるので、デザインする上でのピクセルの計算の仕方がシンプルになります。
→他にも便利なものとして
CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とmargin・paddingの測定方法を定義するborder-boxに関するプロパティを挿入しています。
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { height: 101%; } body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } strong { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } img { border: 0; max-width: 100%; } p { font-size: 1.2em; line-height: 1.0em; color: #333; }
3. 半透明化 (クロス ブラウザ対応)
.transparent {
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
4. メディアクエリ
レスポンシブ対応のホームページを作る際には、メディアクエリを設定します。
ところが、毎回 デバイスのサイズを入力するのは大変です。
// スマートフォン (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { // Style } // スマートフォン (landscape) @media only screen and (min-width : 321px) { // Style }
// スマートフォン (portrait)
@media only screen and (max-width : 320px) { // Style } // iPad (portrait and landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { // Style } // iPad (landscape) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { // Style } // iPad (portrait) @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { // Style }
// デスクトップ
@media only screen and (min-width : 1224px) { // Style }
// 大きめのスクリーン
@media only screen and (min-width : 1824px) { // Style } // iPhone 4 @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { // Style }
5. フルスクリーン背景
背景にフルスクリーンで画像を敷き詰めることもよくあるかと思います。
ウィンドウサイズが変わっても背景の大きさを自動的に変えるようにbackground-size: cover;を指定していますが、未対応 ブラウザのことも考えてベンダープレフィックスをつけています。
html { background: url('images/bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
クロスブラウザとは、WebサイトやWebアプリケーションが、どのWebブラウザでも同じ表示、同じ動作を再現できる状態のことである。 Webページの作成で用いられる技術には、Webブラウザがサポートしているものもあれば、サポートしていないものもある。 場合によってはブラウザ間で解釈の異なるものもある。
スニペットとは、一般的には「切れ端」「断片」という意味の英語である。 IT用語としては、プログラミング言語の中で簡単に切り貼りして再利用できる部分のこと、または、検索エンジンによる検索結果の一部として表示される、Webページの要約文のことである。
0コメント