BootstrapをLESSで使う方法
LESSとはCSSプリプロセッサーの１つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。 例えば変数を使ったり、よく書くコードをテンプレート化（Mixin）しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。 SASSの簡単な使い方・書き方 LESSの書き方・使い方 そんなCSSプリプロセッサですが、BootstrapではLESSが使われています（SASS版もあります）。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。 以下にBootstrapをLESSで記述する方法を紹介します。 Bootstrapのソースファイルをダウンロ
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
CSSを書くために必要なGruntプルギン集！！ - MOL
前回の続きというかセッションでは基本的な使い方とMapleの説明に終始したので、今回は僕が普段CSS書いてる時に便利だなーと思うプラグインを列挙してみたよ。 高いCSS圧縮率を誇るgrunt-cssoについて紹介するよ CSSプロパティをソートしてくれるgrunt-csscombについて紹介するよ CSS - イケてるスタイルガイドを簡単に作れるgrunt-kssについて紹介するよ CSS書く人なら絶対入れとけのgrunt-contrib-csslintについて紹介するよ CSSプロパティの重複を解析してくれるgrunt-csscssについて紹介するよ そのページで使われているCSSだけまとめてくれるgrunt-uncssについて紹介するよ 僕はCSS書きなのでCSSに関するプラグインが多いけど、Grunt Plugins Advent Calendar 2013 - Qiitaの他の参加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
