カテゴリー : CSS

[Coda] HAML/SASS のカラーリング(色付け)設定方法

Coda にて、HAML/SASS のカラーリングを設定したので、その方法をメモ。

まず、下記のサイトからファイルをDLして、解凍後フォルダーの名前を HAML.mode と SASS.mode に変更します。

gf3/haml.mode はてなブックマーク - gf3/haml.mode

brajeshwar/Sass.mode はてなブックマーク - brajeshwar/Sass.mode

その後、/Library/Application Support/Coda/Modes ディレクトリ以下に HAML.mode と SASS.mode を設定します。

以上です。

[HTML/CSS] ウェブページ上でサイズ(px)を測るツール「MeasureIt!」 [Chrome][Firefox]

ウェブページ上でサイズを測るツール「MeasureIt!」が便利なのでご紹介します。

この拡張機能は、Chrome用のエクステンションと Firefox用のアドオンが存在します。

・Chrome用 DL:Chrome ウェブストア – MeasureIt!

・Firefox用 DL:MeasureIt :: Add-ons for Firefox はてなブックマーク - MeasureIt :: Add-ons for Firefox

・参考:ページ上でサイズを測る MeasureIt! -Google Chromeエクステンション- – YATのBlog はてなブックマーク - ページ上でサイズを測る MeasureIt! -Google Chromeエクステンション- - YATのBlog

以上です。
 

Facebookアプリやページを作るとき役立つHTML/CSSフレームワーク「520 Grid System」

Facebookアプリ(Tab App)を作るとき役立つHTML/CSSフレームワーク「520 Grid System」が便利なのでご紹介します。

・公式:520 Grid System – HTML/CSS Framework made for Facebook Page Developers はてなブックマーク - 520 Grid System - HTML/CSS Framework made for Facebook Page Developers

・参考:Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」:phpspot開発日誌 はてなブックマーク - Facebookのページを作る際に便利そうなHTML/CSSフレームワーク「520 Grid System」:phpspot開発日誌

520 Grid System は「ページの幅が520px」に設定されており、グリッドデザインもできるのでかなり使いやすいのでオススメです!

他にもCanvasアプリ用として「760-grid-system」というフレームワークがあるみたいです。

jimeh/760-grid-system – GitHub はてなブックマーク - jimeh/760-grid-system - GitHub

760-grid-system は有名なフレームワーク「960 Grid System」のマッシュアップらしく、Canvasアプリを作るときは役立ちそうですね。

[CSS] floatを解除する「clearfix」

CSSにて、floatを解除する「clearfix」のサンプルコードをメモ。

/* new clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

以上です。

【参考】

[CSS]floatを解除する「clearfix」のIE6/7に対応した改良版 | コリス はてなブックマーク - [CSS]floatを解除する「clearfix」のIE6/7に対応した改良版 | コリス

Google Web Fonts を使う方法

 

Google Web Fonts を使う方法を調べたのでメモ。
 

・公式:Google Web Fonts はてなブックマーク - Google Web Fonts

・参考:1分でできる Google Web Fonts を使って CSS3 の Web Font を使おう | ウェブル はてなブックマーク - 1分でできる Google Web Fonts を使って CSS3 の Web Font を使おう | ウェブル