こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。 これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。 今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。 Lessって? 既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。 ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・
A set of basic mixins for the LESS CSS pre-processor. Most of these mixins focus on consolidating cross-browser prefixes into single, concise declarations. LESS Elements is not an extensive mixin library — just the essentials. See the mixins in actions on the test page. To use: Download the "elements.less" file.Place it in the same folder with your other LESS files.Reference it at the top of your
Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development. What's Inside Here's the rundown of what you can find in Preboot: Mixins Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like -webkit-box-shadow, gradi
Buy this domain. digitalskill.jp 2020 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
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
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト(階層)化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
この記事は賞味期限切れです。(更新から1年が経過しています) 申し訳ありませんが、このアプリケーションは更新を停止しています。 代替として、より優秀なWinLessやLess Parserをご利用ください。 以前何度かご紹介したCSS開発ツールのLESSですが、 コマンドを介したり自前で設定しなきゃいけなかったりで少々面倒なので、 LESS.jsをベースにしたフロントエンドをTitaniumデスクトップで作ってみました。 作ってみたもの Lessnium – version 0.9.0 (4.04MB) ※Windows版のみです。 使い方 要するに何をしてくれるのか LESSファイルを登録しておくと、更新を検知して自動的にCSSファイルをコンパイルしてくれます。 /the/path/to/hoge.less と登録しておくと、 /the/path/to/hoge.css を生成します。
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
TOP > WebDesign > WEBデザインに便利なCSSフレームワークのまとめ「Choosing The Best CSS Framework: A Complete Guide」 WEBデザインと言えば、HTML5やCSS3が最近では話題を集めていますが、まだまだ現場ではXHTML+CSSという形が主流だと思います。今回紹介するのは、WEBデザインに便利なCSSフレームワークのまとめたエントリー「Choosing The Best CSS Framework: A Complete Guide」です。 52framework 様々なるCSSフレームワークが集められていますが、今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■YAML スタンダードなカラムを簡単に実現するCSSフレームワーク。 ■960 Grid System かなり有名なCS
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね! さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
specky boyのエントリーから、ブラウザのスタイルの初期化やレイアウトのテンプレートなど、スタイルシート設計のベースとなるCSSのフレームワークを紹介します。
ごくたまにですが、自分の本編講演が始まる前に簡単なツールの紹介をすることがあります。小難しいことを話す前にキャッチーな話題に触れて講演に少しでも注目してもらおうと考え、時間がうまく調整出来たときにしています。昨年9月に開催された CSS Nite LP7 では、Blueprint という CSS フレームワークを紹介しました。 Blueprintは、様々なレイアウトパターンを class 属性を変更するだけで作ることが出来ます。カラムの数、コンテンツエリアの横幅、ボックスの移動、そしてフォームの作成など手軽に操作が可能です。柔軟性に長けているだけあってコードの量やファイルの分け方が独特なので、納品物として出せない場合がありますが、HTMLでプロトタイプを作りたいという方には良いツールです。 CSS フレームワークと呼ばれるツールセットは他にも幾つかありますが、Blueprintは関連ツール
320 and up [ad#ad-2] Media Queriesとはビューポートのサイズやカラーなどユーザーの環境ごとに異なる最適なスタイルシートを条件式のように適用できるもので、下記のようにブラウザのサイズを変更すると、レイアウトがそれに合わせて最適なものを提供できるようにすることができます。 サイトを640x480で表示したデザイン Media Queriesの詳しい説明は、以前の当サイトの記事も参考にしてください。 CSS3のMedia Queries(メディアクエリ)の使い方と実装例 [ad#ad-2] 320 and upのスタイルシートの構成 スタイルシートの構成は、最小限なものとなっています。 リセット用のスタイルシート カラー用のスタイルシート タイポグラフィ用のスタイルシート Media Queriesで予め用意されているのは、下記のサイズです。 480px 768p
Is Skeleton for you? You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).
Dirty Markup [ad#ad-2] Dirty Markupはウェブ制作者がよく使う下記のツールをまとめたような感じです。 HTML Tidy CSS Tidy JS Beautify Dirty Markupの使い方は簡単で、右側にコードをペーストし、左側でHTML/CSS/JavaScriptを設定し「Clean」ボタンをクリックするだけです。
TOP > WebDesign > クリエイティブなCSS3テクニック集「CSS3 Image Galleries, Slideshows and Image Effects」 限られたスペースを有効に利用するため、もっと魅力的に写真を見せるためにスライドショーを利用しているという方は非常に覆いと思いますが、今回紹介するのはCSS3で実現するクリエイティブなスライドショー集「CSS3 Image Galleries, Slideshows and Image Effects」。 Sliding Image Panels with CSS3 文字や、写真の動きなど、今までのスライドショーにはなかったギミックやエフェクトがCSS3によって実現されています。いくつかのスライドショーが公開されていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。 詳しくは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く