イテルの一日一問 » css

cakephpでcssや画像の指定

イテル — Wed, 02 Dec 2009 01:13:08 +0000

いろんなブログやマニュアルなどに掲載されているかもしれないが自分のメモ用として記載しておきます。

CSSの指定

css('hoge'); ?>

webrootのcssフォルダ内の「hoge.css」を読み込みます。

画像の指定

image("hoge.png") ?>

webrootのimgフォルダ内の「hoge.png」を読み込みます。

マウスオーバー時に透明度を変更する（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などを使用するので若干調整が必要な場合もある。

設置した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;
}

と、これだけ。

背景に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より前のブラウザとかは、無視したいところ。。。

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などでできるようなので、後で試してみようと思う。

bodyタグにスラッグを元にしたCSS ID指定

イテル — Tue, 30 Jun 2009 14:06:41 +0000

ページによってcssの指定を変えたい場合がある。

cssの書き方はさまざまだと思うが、ボク（前の会社のcss大先輩：同級生だけど）の書き方ではbodyにidを記載してカテゴリを分けていた。

そのため、wordpressでも同様のことができると嬉しい。

標準のタグでもある程度はできるが、post idなどでの指定になるため、ちょいと気持ちが悪い。

ということで、スラッグをidにできないか試したところ実現できそうなので試してみた。

ID;
//ページスラッグを取得
$pageSlug = get_page($pageid)->post_name;
$cssBodyID=' id="'.$pageSlug.'"';
}else{
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
$cssBodyID=' id="'.$catslug.'"';
}
?>
>

上記はページの場合はスラッグを指定し、投稿の場合はカテゴリスラッグでbodyにidを表示するようにしてみた。

もうちょいスマートな書き方がありそうなので、お気づきの方はご教授いただけると幸い。

また、スラッグをidとした場合、スラッグの指定忘れで日本語になってしまうと不具合がでそう。

投稿する際に気をつけねば。