HTML5 × CSS3 × jQueryを真面目に勉強してみる – #4 LESS | DevelopersIO
そんな訳で、拡張メタ言語の中でも特にハードルの低いだろうLESSに触れてみることにしました。 拡張メタ言語 - LESS メタと称されるだけあって、LESSはHTMLやCSS、JavaScriptといった類の言語とは毛色が違います。そういった言語によって記述されたソースコードと同じ意味（機能）を持ちながら、より簡略的に表現できるようにしたための言語というわけです。 念のため分かりやすく補足しておきますと、メタとは比喩とか暗喩という意味であって、「アンタなんか牡丹じゃなくて豚よッ！」というセリフの豚という表現が正にメタに当たります。 ※豚というのは例えであって、本当に動物の豚だといっているわけではありません。 他にもこのような拡張メタ言語には、CSSに対してSCSS(Sass)、HTMLに対してHamlといったものがあります。JavaScriptに対してCoffeeScriptというのが比較
ページ右上に表示するリボンを CSS3 で作ってみた with LESS | TM Life
CSS3 と LESS でページ右上に表示するリボンを作ってみました. jsdo.it を使って Step by Step で作りながら解説しています. よかったら参考にしてください. Table of contents サンプル Step 00 – ベースとなる HTML を書こう Step 01 – CSS(LESS) の下準備 Step 02 – #tm .ribbon ミックスインを作ろう Step 03 – #tm .ribbon の中身を作っていこう サンプル 今回は下記のようなサンプルの作り方を解説していきます. up Step 00 – ベースとなる HTML を書こう リボンとして使う要素を div タグで作り, その中に 表示する内容を書きます. 今回はヘッダーとその説明の２行を h1, p タグで追加しました. <div class="ribbon"> <h1> <a
超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン | TM Life
CSS / CSS3 と LESS を使って iPhone っぽいボタンを作る方法を 紹介します. LESS の機能をフル活用しつつ CSS3 をふんだんに散りばめてみました. いつも通りすべて jsdo.it で作成しているので簡単に実行, 確認, fork して修正なんてことができます. Step by Step で学べるように細かく分けたので, 実際に作りながら読んで頂けると幸いです. table of contents サンプル Step 00 まずは基本となるマークアップとスタイルを! Step 01 要素をボタンスタイル化する mixins を定義しよう Step 02 空だと意味が無い! 引数のパラメータを適応させよう Step 03 見た目をゴージャスに! 光沢を出そう Step 04 ブラッシュアップ! hover や action 時の変化 サンプル サンプルです. マ
「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」のサンプルを LESS で作ってみた | TM Life
昨日 に引き続き LESS 関連エントリーです. 「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」で紹介されていた, テーブルを CSS3 で装飾するサンプル. 非常に良く出来ていて見た目もコードもとてもキレイです. 今回は, このエントリーに触発されて, サンプルをパクってオマージュしてみました. ただパクったオマージュしたわけではなく LESS で作っていたり, 色々と私の都合の良いように変えてたりします. LESS だと変数が使えるのでベースとなるカラーを変更したり, 幅や高さの調整も超簡単にできますよん♪ サンプルは jsdo.it で作成したので, よかったら fork して色々とイジッてみて下さい. Table of contents サンプルを実行してみよう テーブルのメインカラーを変数化 linear-gradient を使ってヘッダーにテカリフィルター
楽々レイアウト! 8個のサンプルで学ぶCSSメタ言語『LESS』入門 | TM Life
LESS 良いですよ! ホント LESS 良いですよ!! いや, ホント LESS 良いですよ!! ! っと3回言いましたが, LESS オススメです. LESS は CSS をプログラムっぽく書けるようにするメタ言語です. 私は結構前から使っているのですが, 今ではもう LESS ナシのWeb サイト制作なんて考えられません. ただただ, オススメだとか良いよーと言っても説得力がないと思うので, LESS の基礎が学べるサンプルを 8 個ほど用意してみました. 騙されたと思って使ってみて下さい. LESS の良さが分かると思います. サンプルはすべて jsdo.it で作成しているので簡単に実行, 確認できます. よかったら fork して好き勝手イジってみて下さい. Table of contents 1. 変数を使ってみよう 2. Mixins(ミックスイン)を使ってみよう 3. M
CSS3 in LESS で 装飾テーブル - jsdo.it - Share JavaScript, HTML5 and CSS
楽々レイアウト! 8個のサンプルで学ぶCSS メタ言語『LESS』入門 | TM Life http://tmlife.net/web/less/8-sample-learn-css-less-guide.html 08/22 公開予定 「CSS3を使って美しく装飾されたテーブルの作り方｜Webpark」のサンプルを LESS で作ってみた http://tmlife.net/web/less/css-decoration-table-less.html - Normal( http://jsdo.it/phi/i6r0 ) - Red( http://jsdo.it/phi/9rfR ) - Yellow( http://jsdo.it/phi/uOpd ) - Green( http://jsdo.it/phi/jwmc ) - Cyan( http://jsdo.it/phi/96L
jsdo.it が SCSS と LESS をサポート!! サンプルもあるよん♪ | TM Life
つい先日『jsdo.it が JSX と CoffeeScript をサポート!!』という記事を書きました. 「JSX や CoffeeScript がサポートできるんだったら Sass や LESS もサポートできんじゃね？」っと思っていたら 速攻でサポートしてくれてました!! 面白法人カヤックさんによる公式解説はこちら. ということでちょっと期間が空いちゃいましたが, 紹介します. Table of contents SCSS や LESS って何？ jsdo.it で SCSS や LESS を使ってみよう Example SCSS や LESS って何？ jsdo.it 上での使い方の紹介の前に SCSSって? LESSって?? って方の為にすこし説明します. SCSS や LESS とは, CSS をより楽に効率良く記述するための仕組み(言語?メタ言語??)です. どちらも変数を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using LESS as a Live CSS Engine | CSS-Tricks