メディアクエリー
「@media screen and 〜」で、タブレットより大きいサイズに対してのみ、以下のスタイルを適用します。
padding-top: 100px;
min-height: 700px;
lessは変数が扱えますので、「@media;screen and (min-width: @screen-sm-min) ;{･･････}」の、本来数字が入るところに変数「@screen-sm-min」を指定しています。変数「@screen-sm-min」には「768px」という数字が入ります。
「@screen-sm-min」の定義をしているのは、variables.lessの「// Small screen /tablet」のセクションです。
@screen-sm: 768px;
@screen-sm-min: @screen-sm;
「768px」をそのまま値に入れてしまうと、変更が発生した場合に手作業で何箇所も変更する必要があるため、あえて変数を定義しています。
また、lessは、CSSと異なり、入れ子にして記述できます。長ったらしいセレクターを何度も書く必要がなく、かつ、影響範囲を明確にできるので活用したいですね。
■theme.lessのソースリスト
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
@import "mixins.less";
.mainimage{
margin-bottom: 30px;
@media screen and (min-width: @screen-sm-min) {
padding-top: 100px;
min-height: 700px;
}
.catchcopy{
margin-top: 10px;
font-size: 20px;
color: #B2B2B2;
}
}
.quote{
blockquote{
text-align: left;
padding: 0 60px;
background-image: url(../images/quote-head.png),
url(../images/quote-foot.png);
background-repeat: no-repeat,
no-repeat;
background-position: top left,
top right;
@media screen and (min-width: @screen-lg-min) {
.center-block();
width: 87%;
text-align: center;
}
}
}
この時点のindex.htmlのソースコードはGithub、theme.lessは同じくGithubにあります。
theme.lessをコンパイルした「theme.css」をCSSフォルダに入れます。type.lessも変更しましたので「bootstrap.less」をコンパイルした「bootstrap.css」もCSSフォルダに入れましょう。その後、ブラウザーをリロードすると図のように表示されます。
メインイメージが表示されたサイト
mixinを活用しよう
同じようなコードを何回も書くことってよくありますよね。例えば「.clearfix」。何回も書くのは面倒ですし、コードが長くなって読むのにも時間がかかります。lessの「mixin」（ミックスイン）は、何回も使うスタイルを定義しておいて、あとから1行だけ書けば呼び出せるようにしたものです。
Bootstrapの最新版では、よく使うスタイルが「mixin」フォルダー内のlessファイルに用意されています。「.center-block」もその1つで、「mixin」フォルダー内にあるcenter-block.lessでは、
// Center-align a block level element
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
と定義されています。たった7行とはいえ、ここで一度定義しておけば、真ん中に寄せたいときに「.center-block」と1行指定するだけでいいのです。
もちろん、HTML内のclass名としても機能します。lessフォルダー内のutilities.lessには次のような記述があります。
.clearfix {
.clearfix();
}
.center-block {
.center-block();
}
.pull-right {
float: right !important;
.pull-left {
float: left !important;
}
一見、奇妙なコードに見えますが、mixinを展開してみて考えると理解できますよ。lessファイルを触るほどでもないときには、これらのclassをHTMLに付与すればスタイルを適用できます。
