X_NOTE: CSS

ラベル CSS の投稿を表示しています。すべての投稿を表示

2013年4月13日土曜日

サムネイル(グリッド)を並べた時に同じCSSでぴったり収める方法

215pxサムネイルを4つ20pxの間隔で配置したい場合最後のサムネイルにかかったmargin-right:20px;が邪魔になります。そこで最後のマージン20pxを吸収します。

サムネイル4つを収めたい横幅は920px、しかし上記の状態だと940pxの幅必要です。それをサムネイルの親要素の幅を940pxとして20px多くしますがmargin-right:-20px;で20pxを相殺することで。215pxサムネイルを×4個、20pxの間隔で配置したい時に920pxでピッタリ収まります。

#colum{

width:940px;

margin-right:-20px;

_overflow:hidden;

}

.thumbnail{
width:215px;
float:left;
padding-right:20px;
}

2012年9月7日金曜日

backgorudで指定したボタンがマウスオーバーで消えるのをCSSのみで解決する。

最近まで知らなかったのだが
backgorudで指定したボタンがマウスオーバーで消えるのを
CSSのみで解決する方法があったのでメモ。

<html>

＜CSS＞

<参考サイト>
http://www.komacchi.com/blogs/2010/07/css.php

2012年6月28日木曜日

CSSで半透明にさせる。(クロスブラウザ)

以下を記述。

疑似クラス,hoverなどをaタグ以外でも使えるようにする。

(1)以下のサイトでcsshover.htcをダウンロード
http://peterned.home.xs4all.nl/csshover.html#changes

(2)任意の場所にアップロード
(3)cssに以下のように記述(パスは実行するhtmlファイルからcsshover.htcへのパス)

そのほか動かない場合の対処などは以下のサイトで
http://d.hatena.ne.jp/sa90/20080403/1207653253

(4)また普通の要素にマウスポインタを表示させたい時は以下の
CSSを加える。

<参考URL>
http://www.htmq.com/style/cursor.shtml

2012年6月27日水曜日

CSSだけでギャラリーを作る。マウスオーバーで画像切り替え

画像のマウスオーバーで、離れた位置に拡大画像を表示する

2012年5月29日火曜日

CSS(スタイルシート)をjavascriptで切り替える色々な方法cookie

CSS(スタイルシート)をjavascriptで切り替える色々な方法のメモ
参考サイト
http://blog.4galaxy.net/19.html

2012年5月28日月曜日

background-positionを使った背景画像の指定

上のキャプチャーのように点線を背景画像で引く方法。
(borderの指定だと上手く行かなかった場合など)

参考URL
http://www.css-lecture.com/log/css-beginner/041.html

上下中央配置(CSS)

上下中央配置(CSS)のメモ

<html部分>
<CSS部分>
<参考サイト>
http://www.css-lecture.com/log/css/032.html

2012年2月23日木曜日

2枚の画像を重ねるCSS。（マスクに使用）

白の穴空きpng画像をマスクにつかって
下には正方形の写真を配置。

2つのimg画像をdivでくくって
divにposition:relative;
マスクの方(2枚目の画像)にabsoluteをかける。

参考サイト

2011年5月17日火曜日

検索フォームをCSSでデザインするサンプル

2011年3月18日金曜日

tableの属性cellspacing="0", cellpadding="0"をCSSで対応する

<table cellspacing="0" cellpadding="0">
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
</table>

＜では無くて。。。CSSでやると ▼＞

<style type="text/css">
table {
 border-collapse: collapse;
}
</style>

<table>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
 <tr>
  <th>見出し</th>
  <td>コンテンツ</td>
 </tr>
</table>