カテゴリー : CSS

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 を使おう | ウェブル