タグ

関連タグで絞り込む (12)

タグの絞り込みを解除

lessに関するsippo_desのブックマーク (6)

  • BootstrapをLESSで使う方法


    LESSとはCSSプリプロセッサーの1つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると、CSSをもっと便利に使えるようになるもの。 例えば変数を使ったり、よく書くコードをテンプレート化︵Mixin︶しておいたり、ネストを使ってセレクタを何度も書く手間を省いたりなどなど。簡単な使い方を以下の記事にまとめているので詳細はそちらをご覧ください。 SASSの簡単な使い方・書き方 LESSの書き方・使い方 そんなCSSプリプロセッサですが、BootstrapではLESSが使われています︵SASS版もあります︶。Bootstrapの主な使い方としては、フレームワークとして読み込んで、HTMLタグにclass名をつける方法だと思いますが、LESSで使うことも可能。 以下にBootstrapをLESSで記述する方法を紹介します。 Bootstrapのソースファイルをダウンロ
    BootstrapをLESSで使う方法

  • 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
    lessを使ってBootstrapのデザインをカスタマイズ (1/5)

  • 第1回　LESSのメリットと導入方法 | gihyo.jp


    CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語﹁LESS﹂が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも ﹁より柔軟に﹂ ﹁よりわかりやすく﹂ ﹁より速く﹂ ﹁よりミスを少なく﹂ 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
    第1回　LESSのメリットと導入方法 | gihyo.jp

  • lessがわからない人のBootstrap簡単カスタマイズ方法 - Qiita

    はじめに デザインに手をかけず、とりあえずアプリを動かすためにBootstrapを使っています。 デフォルトのまま使えるかと思ったら、やっぱりちょこちょこ調整したくなったのでメモ。 2つのやり方 場合によって次のやり方を使い分けています。使い分けは後述します。 CSSを上書きする カスタマイズ用のcssファイルを作ってbootstrapのCSSより後から読み込みます。 <!-- Bootstrap --> <link href="/xxx/public/bootstrap-3.0.3-dist/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- カスタマイズ用CSS --> <link rel="stylesheet" media="screen" href="/xxx/public/stylesheets/bootstrap-custom

    lessがわからない人のBootstrap簡単カスタマイズ方法 - Qiita

  • CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞


    CSSを拡張するためのメタ言語として、代表的なものに﹁SCSS(Sass)﹂と﹁LESS﹂があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、﹁SCSS(Sass)﹂を導入することにしましたが、特に﹁SCSS(Sass)﹂を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが﹁Blueprint﹂や﹁960 Glid System﹂等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために

  • LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利


    css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された﹁border-radius﹂で角丸にしてみます。 たとえば﹁id="box1"﹂でマークアップした﹁div﹂があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css #box1 { width: 200px; height: 200px; background: #999; /* 角丸 */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } Bootstrapのmixins.lessをインポートすれば次のように記述することができます。 less @import "mixins.less"; #box1 { width: 200px; he
    LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.