カテゴリー : CSS

TwitterやFacebookなどのソーシャルボタンを横や縦に並べて設置する方法

Twitter や Facebook などのソーシャルボタンを横に並べて設置するためのスニペットをメモ。

■ HTML

<ul class="socialButtons">
<li>Twitter Button</li>
<li>Facebook Like Button</li>
<li>Google+1 Button</li>
</ul>

■ CSS

●横並び

.socialButtons {
  overflow: hidden;
}
.socialButtons li {
  float: left;
  margin-right: 10px;
}
.socialButtons iframe {
  margin: 0 !important;
}

●縦並び

.socialButtons {
	list-style-type: none;
	padding-left: 0;
}
.socialButtons li {
	margin-bottom: 4px;
}
.socialButtons iframe {
	margin: 0 !important;
}

・[参考] TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS – hostingjedi はてなブックマーク - TwitterやFacebookなどのソーシャルボタンを横に並べて設置する ‹ CSS - hostingjedi

[CSS] Internet Explorer(IE)で a img リンク画像の枠線を消す方法

Internet Explorer(IE) で a img リンク画像の枠線を消す方法を調べたのでメモ。

全画像の枠線を消す

画像に枠線を表示させたい場合はほとんど無いと思うので、img タグで直接指定して大丈夫だと思います。

img {
    border-style:none;
}

子孫セレクタで a 要素の子孫要素である img 要素のみ枠線を消す

a img {
    border-style:none;
}

以上です。


参考情報

小粋空間: リンク画像の枠線を消す

[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アプリを作るときは役立ちそうですね。