イテルの一日一問 » css＋xhtmlなど

CSSで画像の一部だけを表示する

イテル — Tue, 25 Aug 2009 23:01:12 +0000

サムネイルを表示する際にCSSで画像の一部だけを表示させる方法。

CSSのclipプロパティを使うと。
このclipプロパティは指定した画像の一部を表示することができる。

clip : rect(auto 100px 100px auto) ;

マウスオーバー時に透明度を変更する（css）

イテル — Sat, 22 Aug 2009 11:48:21 +0000

これまた、時間がないときに覚えておきたい方法。

#hoge a:hover{
	border:5px solid #996600;/* border */
	opacity:0.8;
	filter:alpha(opacity=80);/*ie6 7*/
	zoom:1.0;/*ie6 7*/
	-ms-filter:"alpha(opacity=80)";/*ie8*/
	}

とIE8対策っぽいのも書きましたが、なぜかうまく認識せず。
もうちょい調査が必要なようです。

マウスオーバーで画像にラインをつけるcss

イテル — Fri, 21 Aug 2009 10:30:47 +0000

時間がない、面倒くさい場合に使いたい、CSSで
マウスオーバーした時に画像のフチにラインをつける方法。

#fuchi-gazou a img,
#fuchi-gazou a{
    border: none;
    overflow: hidden;
    float: left;
}
#fuchi-gazou  a:hover{
    border: 5px solid #333333;
    }
#fuchi-gazou a:hover img{
    margin: -5px;
}

これだけ。
floatなどを使用するので若干調整が必要な場合もある。

フッターをウィンドウの下に設置する（JS）

イテル — Thu, 20 Aug 2009 10:11:16 +0000

JSでフッターを固定する方法。
ぶっちゃけjsを切ってる人って今はいないので、
これの方が簡単じゃないかと思ったりして。

「to-R」さんから「footerFixed.js」をダウンロードする。

head内に下記のjsを読み込むコードを記述する。

srcのパスは環境に合わせて書き換える。

あとはフッター要素のidを「footer」にすればok。
やっぱりcssよりこっちの方がスマートだ。

設置したdivの背景をページ下まで伸ばす

イテル — Wed, 19 Aug 2009 10:06:27 +0000

良く使うのだが、div要素をブラウザの下の方まで伸ばす方法。
毎度、忘れてしまうのでメモっておく。

htmlの例


    ブラウザの下まで伸ばしたいよ

cssの例

html{
    height:100%;
}
body{
    height:100%;
}
#layout{
    height:100%;
    min-height:100%;
    width:80%;
    background:Khaki;
    border-right:1px solid red;
}
body > #layout{
    height:auto;
}

と、これだけ。

スクロールしても追従してくるメニュー（jQuery）

イテル — Fri, 24 Jul 2009 14:15:06 +0000

web designing（以降、webdes）の09年8月号より、自分でコピペできるようにメモ。
webdesではjQueryの特集が組んであり、これは私も将来使うのではないかと思う項目がたくさんあった。

ちなみに追従するメニューのことを、プロはフローティングメニューというらしい。
さっそくwebdesのコードをさらしてみる。
別途jQueryはダウンロードする必要があるのであしからず。

ヘッダーにcssとjQueryを読み込む

コンテンツとメニュー


	フローティングメニュー
	ほげコンテンツ


	メニュー
	
		メニュー1
		メニュー2
		メニュー3
		メニュー4
		メニュー5

JS：livefloatingmenu.js

var name = &quot;#menu&quot;;
var menuYloc = null;
$(function(){
	menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)));
	$(window).scroll(function () {
		offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
		$(name).animate({top:offset},{
			duration:350,
			queue: false
		});
	});
});

durationの数値を変えることで、追従するタイミングを変更できる。
また、queueをtrueに変更すると良くわからん動きをする。

今回のサンプルはコチラ。

Web Designing (ウェブデザイニング) 2009年 08月号 [雑誌]

発売元: 毎日コミュニケーションズ
価格: ￥ 1,280
発売日: 2009/07/18

posted with Socialtunes at 2009/07/26

背景にFlashを置く

イテル — Thu, 23 Jul 2009 04:36:35 +0000

3日目の伊藤商店サイトを作った際のチップス。
FLASHを背景にしきたい場合、次のような感じにするといいみたい。

HTMLソース：Swfobjectを使用して配置


伊藤商店
伊藤商店はステキなwebクリエイターです



このサイトではAdobe Flash Playerが必要です。

Adobeのサイトより最新のFlashPlayerをダウンロードしてください。

※swfobjectについては過去の記事を参照してちょ。

CSSソース

#content {
	position: relative;
	z-index: 1;
}
#flash {
	position: absolute;
	z-index:0;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

z-indexでレイヤーを指定して使う。
古いブラウザによっては正常に見えない可能性もあるが、
IE6より前のブラウザとかは、無視したいところ。。。

IE6で透過PNG画像を使用する

イテル — Wed, 22 Jul 2009 04:37:33 +0000

またまた伊藤商店で使用したcssのチップス。
今日は透過PNGの処理。

結構面倒だと思っていたため、今まで避けておりましたが
ちょっとかっちょいいことしたいと思うと避けて通れないため
この機会に学習してみることにした。

safari、firefox、ie7以上では透過PNGはそのまま
利用できるが、IE6はそのままでは使用できない。

今回は背景にPNGを指定してIE6以外のブラウザはそのまま表示させ、
IE6はフィルターを通して画像を表示させるという技。

説明は、cssのみで。

IE6以外のブラウザ

	#header h1 a {
	height:30px;
	width:130px;
	background-image:url(images/logo.png);
	background-position:left top;
	background-repeat:no-repeat;
	text-indent:-9999px;
	float:left;
	margin:0 30px 0 0;
	}

IE6のみ読み込み

	/* IE6のみ */
	background:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/path/images/logo.png', sizingMethod=scale);
	/*ファイルはフルパスでした方がいいかも*/
	text-indent:inherit;
	cursor:hand;

ついでに、IE6だけ読み込ませる際のHTMLの処理

HTML内でハックを使わずブラウザの分岐方法

※IE7未満のブラウザを対象（7含まず）。

ファイルのパスはフルパスで指定しないと表示できなかった。
wordpressのテーマで使用したからかもしれんけど。

また、aタグに書いているのだが、カーソルがそのままだったので、
handを指定した。

具体的に知りたい方は、webdesigningの7月号を参照してちょ。

cssで背景を固定配置にする

イテル — Tue, 21 Jul 2009 04:35:55 +0000

今日は伊藤商店のwebを作って必要だった、
cssでフッターを固定する場合のメモ。

HTMLソース


    
        ほげ
        hogeのコンテンツだよ。
    

    
        hoge-Footer contents

CSSソース

html, body {
    height: 100%;
}
#contents {
    min-height: 100%;
    height: auto !important;
    height: 100%; /* ie用に設定 */
    margin: 0 auto -100px;
    /* class="footer"と同じ高さ(100px)の負の値を入力 */
}

.footer {
    height: 100px;
    /*適当に色でもつけてみる*/
    background-color:#666666;
}

コンテンツの内容によっては、IE6などブラウザで、
精度がかなり落ちてしまうので微調整が必要。
他にもJSなどでできるようなので、後で試してみようと思う。

プルダウンメニューがFlashに隠れるのを回避（wmode ＆ swfobject.jp）

イテル — Wed, 01 Jul 2009 08:48:37 +0000

初歩的なことを忘れていたのでメモ。

jsのプルダウンメニューがflashにかかってしまう場合、objectタグで何も指定しないとflashの後ろにプルダウンメニューが入り込んでしまう。

また、ドリ標準のflash埋め込みは分かりにくいのでswfobjectを使用してみる。

ヘッダー内に上記記述を入れる。


	ここはswfobjectでは読み込まないっす。
	flash playerがないとき表示されます。

※tenteruさんのご指摘により「so.addParam」と「so.write」が逆になっておりましたので修正しました［2009/12/18］

と書けばok

so.addParam("wmode", "transparent");

これが肝。
プルダウンが上に表示される。

ちなみにswfobjectのパラメータは次の通り。

SWFObject(“flashdata.swf”, “flash movie”, “500″, “300″, “9″, “#ffffff”)

flashdata.swf＝swfファイルのソース。
flash movie＝このムービーの名称。特に気にする必要はない。
500＝swfの幅。
300＝swfの高さ。
9＝flash playerの対応バージョン。
#ffffff＝背景色。

とのこと。