株式会社プライムネットワークスタッフが、html5やCSS3、phpなどのWEB技術に関することやワードプレスなどのCMSについて学んだことなどを紹介して行きたいと思います。
クリーク･アンド･リバーが、7月4日（月）、Webデザイナーやフロントエンドエンジニア、WebディレクターなどWeb関連の仕事に携わるクリエイターを対象とした、無料のオンラインセミナー「BootstrapでWeb制作を始めよう！」を開催。
Bootstrapは、HTML／CSS／JavaScriptから構成される世界で最も有名なWebフレームワークで、コーディングにかかる時間を短縮することができるだけでなく、デザインの知識がなくても見栄えの良いサイト作りが可能となっていて、さらにはレスポンシブ対応も簡単にできることが特徴。
今回のセミナーでは、Bootstrapのスポンサーであり、Bootstrap日本語リファレンスの翻訳・運営を行っているLINE株式会社の岡崎晶彦氏と白石真之氏が登壇し、初めての方にもわかりやすくBootstrapの魅力について話します。
Bootstrapはなんとなく難しそうだと思っていたWebデザイナーやデザインが苦手なバックエンドエンジニアであれば、参加してもいいかもしれません。
CSSはどんどんと進化しており、いまではJavaScriptがなくてもできることが増えてきていますよね。
そして、今回紹介するのがCSSに追加されたカスケードレイヤー。
このカスケードレイヤーを使うと、CSSの詳細度とスタイルの順番をカスケード内で明示的に階層化でき、これまでのCSSの実装方法が大きく変わると期待されています。
どういうことかというと、CSSスタイル適用の優先順位をルールとしてまとめることができるCSSの新機能で、これまでであれば、CSSは記述された順番で後に書かれているものが優先されるので、スタイルの適用順序を調整しようとすると、ソースの記述順を大幅に変更したり、セレクターや「!important」などを使うことになり、複雑化しやすく、メンテナンス性に難があったのですが、このカスケードレイヤーがあればその手間が省け、意図しない不具合の発生も抑えられるようになります。
通常、同じ優先度の場合、ファイルの中で上よりも下に書いたスタイルが適用されるのですが、カスケードレイヤー、つまり@layerを使うことで、優先度を無視してグループごとにスタイルの優先度を設定することができるようになります。
レイヤーを定義するには、 @の後にレイヤー名を記述するだけ。
CSSもCSS3となって思っているよりも多くのことがCSSだけでできるようになり、JavaScriptの出番を極力減らせるようになってきましたね。
まぁ、できることが多くなった半面、学習コストはがっつりとアップしたのではありますが・・・。
そんな中でも手っ取り早く学習でき、かつ使える関数って、「calc()」という関数ではないでしょうかね？
まぁ、ざっくりというと、「calc()」はプロパティに設定する値を数式で計算することができるもので、さらには記述も簡単、わかりやすい便利なものなんです。
例えば、以下のような使い方ができるんです。
.box {
width: calc(100% - 50px);
}
これは、親要素の幅100%から「50px」を引いたサイズが「width」ですよという表現で、今どきのレスポンシブ対応のサイトではありがたい使い方ですよね。
上記のように、「calc()」は数値計算を行ってくれる関数で、数式として使用できる演算子は、＋ (足し算)、ー (引き算)、× (掛け算)、÷ (割り算) の4種類となっています。
気を付けておきたいのは、演算子の前後は必ず「スペース」が必要で、「スペース」を開けずに表記してしまうとエラーとなります。
計算できるからって、あまり便利になることはないんじゃないか？って思われた方もいるでしょうけど、これ、3つのボックスを横並べにしたいと思ったときに便利になるって思いませんか？
普通に横並びにしようとすると、おそらく以下のように表記していたとは思うのですが、
.box1,.box2 {
width: 33%;
}
.box3 {
width: 34%;
}
これを一気に、以下のように表現することができます。
.box1,.box2,.box3 {
width: calc(100% / 3);
}
ソースをシンプルにできるうえ、四則演算さえ知っていれば、パッと見るだけでどのような表示になるのかも理解しやすく、もっというと、box1,2,3なんてわけなくてもいいですよね。
まぁ、とにもかくにもCSS3の関数は覚えれば、超絶便利なものなので、新しいプロパティなどが増えすぎて諦めた人も、今一度、学習する価値は十分にありますよ！
ツイート
