普通のCSSをLESSに変換する – A Memorandum
デバイスの多様化が進んでいる現在、さまざまな環境にあわせてWebサイトの見た目を調整するとなると（それが良いか悪いかはさておき）、CSSの編集・管理がだいぶ煩雑になってきます。これまでもレイアウト用のCSS、フォントのCSSなどなど切り分けて作業するということはありましたが、ページの表示速度の最適化の面からもばらけているのはあまりよくありません。 サイトの情報構造が複雑化すれば、そこにどのようなスタイルが適用されていて、他のスタイルがどう作用してるかもわかりにくいものです。「ご利用は計画的に」って言葉もあるぐらいですから、最初からきちんと設計しておくのが良いですね。そういうところもあって、最近これまで以上にLESSやSassといった「CSSプリプロセッサ」の話題を目にすることが増えてきました。 既存のスタイルをLESSにする LESS、Sass/SCSS、CompassにStylusと、C
HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
第1回 LESSのメリットと導入方法 | gihyo.jp
CSSをより柔軟に、わかりやすく、速く、ミスを少なく記述できる 最近、CSSの拡張メタ言語「LESS」が話題になっています。LESSとは、かんたんに言えば、CSSの良いところを活かしつつも 「より柔軟に」 「よりわかりやすく」 「より速く」 「よりミスを少なく」 記述できるという、新しい書き方です。うさんくさいと感じるほどにいいことづくめですね。 CSSの拡張メタ言語には、LESSの他にも、Sass、Stylusといったものがありますが、LESSは一番CSSの書式に近く、活用するためのツールがそろっているのが特徴です。 最近LESSについて、はてなブックマークや技術系ブログでもたくさんとりあげられているので、実際に興味を持っている方や試した方もいらっしゃるかもしれません。しかし、まだ入門記事が多く、実際に導入したときのメリットをイメージできないことも多いのではないでしょうか？ 本連載では、
CSSを書くとLESS形式にリアルタイムで変換するWebサービス・Css2Less
CSSを書くと即座にLESS形式に変換 するWebサービス・Css2Lessのご紹介 です。使えるかどうかは別にして、 まだLESSに慣れてない方には練習用 になる・・・かもしれない。LESS も慣れるのが大変ですよね。 オンラインでCSS→LESSにするやつです。 左に普通にCSS書くと即座に右にLESS形式へと変換されます。尚、LESS側にも書けますが、CSS側は変化しません。 圧縮されたCSSでも整形、変換してくれます。 OSSにもなってます ruby製のOSSとしてGithubで公開されてるみたいです。 ライセンスはAGPL3だそうです。 以下よりどうぞ。 Css2Less / Github
「第27回 HTML5とか勉強会」活動報告 | gihyo.jp
第27回目となる本勉強会は、3月13日にニフティさんに会場をお借りして開催しました。 今回のテーマは「リッチクライアントをデザインする」。HTML5を用いたインタラクティブなウェブサイトのデザイン方法や、実際に行った経験のお話などを講演していただきました。 本稿では、今回のイベントについてレポートします。 HTML5インタラクティブデザイン - デザイナとデベロッパによる生対談 最初は、C.A.Mobileの白石俊平さんと、同じくC.A.Mobileの稲田真帆さんによる、実際にウェブサイトを開発したときの話を対談形式で講演していただきました。 そのウェブサイトは、マイクロソフトから依頼されたデブサミ2012に展示するものでした。依頼された内容は、Internet Explorer 10で追加されるHTML5のAPIを利用したサイトを構築するというものだったそうです。最終的には以下の3つ
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
css2less.cc