カテゴリー : CSS

CSSフレームワークの比較一覧サイト

CSSフレームワークの比較一覧サイトをメモ。

front-end-frameworks

CSS Front-end Frameworks with comparison – By usabli.ca

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 で 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

以上です。