〜」で、タブレットより大きいサイズに対してのみ、以下のスタイルを適用します。;{・・・・・・}」の、本来数字が入るところに変数「@screen-sm-min」を指定しています。変数「@screen-sm-min」には「768px」という数字が入ります。/tablet」のセクションです。@screen-sm;「768px」をそのまま値に入れてしまうと、変更が発生した場合に手作業で何箇所も変更する必要があるため、あえて変数を定義しています。lessは、CSSと異なり、入れ子にして記述できます。長ったらしいセレクターを何度も書く必要がなく、かつ、影響範囲を明確にできるので活用したいですね。}}この時点の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ファイルに用意されています。auto;}と定義されています。7行とはいえ、ここで一度定義しておけば、真ん中に寄せたいときに「.center-block」と1行指定するだけでいいのです。HTML内のclass名としても機能します。lessフォルダー内のutilities.lessには次のような記述があります。!important;}一見、奇妙なコードに見えますが、mixinを展開してみて考えると理解できますよ。lessファイルを触るほどでもないときには、これらのclassをHTMLに付与すればスタイルを適用できます。一覧へjQueryプラグインでBootstrapをカスタマイズ最近よく見かけるシングルページを作るデザイン塾。jQueryプラグインを使ってBootstrapでは用意されていないインタフェースを実装します。最近よく見かけるシングルページを作るデザイン塾。モーダルウィンドウとスクロールスパイをBootstrapで簡単に実装する方法を紹介します。インブラウザーデザインでシングルページを仕上げる最近よく見かけるシングルページを作るデザイン塾。前回までに、メインビジュアル、アバウト、使い方ページを作成しました。今回は、ユーザー一覧、お問い合わせフォームとクレジットの表示をするフッター部分を作成して、シングルページを完成します。Bootstrapでシングルページをコーディング最近よく見かけるシングルページを作る「シングルページ」デザイン塾。今回は、シングルページのメインビジュアル、アバウト、使い方の各部分を作成していきます。lessを使ってBootstrapのデザインをカスタマイズ最近よく見かけるシングルページを作るデザイン塾。Bootstrapを使って実装したナビゲーションバーを、lessでカスタマイズしてオリジナルのデザインに近づけていきます。最近よく見かけるシングルページを作る「シングルページ」デザイン塾。第2回は、デザインツールを使ってページをデザインし、ベースとなるHTMLを作成します。「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。(編集部)00DESIGN「シングルページ」流行の7つの理由と最新事例まとめ「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページは流行っているのか、最新事例を交えて解説します。スマホお気に入り一覧マイページ。