広島のホームページ制作会社GOWEB Blog

css


11/09

9

今更だけど、高さ100%

javascriptでなんやかんやするのもあり、cssをさわるもありですね

基本的な構造で、

<html>
<body>
<div id=”height100″></div>
</body>
</html>

だったとして、

cssはこんな感じで↓

html,body {
	height: 100%;
}

#height100 {
	height: 100%;
	min-height: 100%;
}

body > #height100 {
	height: auto;
}

No tags css

IEが悪いのか、わたしの好き嫌いなのか…

相変わらずIEに泣かされています

【IE9に有効なハック】

#kokoniID :not(:target) {
width:140px0\9;
}

【Firefox3に有効なハック】

Firefox2用を書いてFirefox3用で上書き

#kokoniID, x:-moz-any-link {
width:140px;
}
#kokoniID, x:-moz-any-link, x:default {
width:140px;
}

No tags css

Web Designer Wallさんの記事より、私的に楽しかった「ページTOPへ」のするするアニメーション♪

「ページTOPへ」のボタンが、ページをスクロールするまでいないんです

でも、スクロールすると、ふわんと現れて、クリックして、ページの先頭に戻ったら、また消えるんです

Animated Scroll to Top

デモ

なんだか豪華なパーツです

No tags css, javascript

colissさんが紹介されていました

時代は進化するのですね

IE6/7にも対応した、新しいclearfix

A new micro clearfix hackデモをIE6、IE7見ましたが、短いコードで、実際floatが解除されていました!バンザイ!

No tags css

相変わらずIE6とうまくやっていけていません

「昼は○○思いっきりcss」の、みのさんに相談したいくらいです(※大嘘番組です。そんな番組も、そんな番組に、みのもんたが出演するわけもありません)

ちょっとfloat使ったくらいで、最後の文字が二重に表示されるなんて、IEも器が小さいったら!

つまり、こんな感じ↓になるわけです
- – - – - – - – - – - – - -
IE6とは仲良くできません
せん
- – - – - – - – - – - – - -

「せん」が意味不明に二重に表示されるんです

回避方法はいろいろあるようですが、コメントの記述が良くないから消しちゃえ!とか、clearを二重表記されるとこの後に書くんだ、とか

floatしている要素の幅が親要素の幅と一致しているのが良くないのらしいのですが、そんなの今更変えるのもつらかったりする時があるものです

とりあえず、

1.閉じタグの前にコメント多用

<div style="float:left;">IE6とは仲良くできません<!-- iya --><!-- ieme --><!-- yadayada --></div>

IE最後にある文字ならコメントでも複製するようなので…でも全く美しくないですねぇ

2.閉じタグの後ろに直書きclear

<div style="float:left;">IE6とは仲良くできません</div><br style="clear:both;" />

なんだかもう二重に表示されなければ何でもいい気になってしまうような…

IEとはうまくやっていけないのだから、↓こう表記されてもいい気がしてくる今日この頃

- – - – - – - – - – - – - -
IE6とは仲良くできない
できない
- – - – - – - – - – - – - -

No tags css

朝起きたら世界中のIE6が消えていたらどんなにかすばらしいことでしょう!

いっそのこと、アクセスしたらIE8になってしまうサイト(微妙にウィルスちっくですが…)があったらいいのに…

なんてグチったところで、IE6はなくならないから、あらゆる手段を駆使してなんとかしようとしなければいけません

有名なIE PNG Fix 2.0 Alpha 4は必需品です

もしくは、DD_belatedPNGでしょうか?

この、DD_belatedPNGはすぐれものさんで、背景画像にpngを使ったあげくに、上だの左だの繰り返しだの使えるだけでなく、jpgやgifと間違えないように認識もしてくれるようです
もちろん使い方も簡単!

ITキヲスクさんの、IE6用透過png対応策、DD_belatedPNGの使用法と注意点で、とても詳しい説明が掲載されています

No tags css, html, javascript

さて、某サイトにて、とある修正に取り組んだ際のこと

とんでもなくtableが入れ子になったところに、近代的(?)なタグをうめこんだら、そのとんでもないtableの入れ子と複雑怪奇な設定に阻まれ、なかなか思い通りのものにならない…

それでもFirefoxは、どうにかこうにかまともなカタチに

けれどもやはりIEが、行く手を阻みました

さて、IEなんです

6も7も8ですら、tableタグの前ではただのIEなのです!(←意味不明)

そこで、IE以外に発揮するハック↓

:root *> #iekirai { margin:50px;  }

ばんざい!

No tags css

なぜなら楽だから!

いつも理由はコレ…

とにかく、いろいろな大人の事情で、cssに変数を使いたい時があるんです

で、

参考にしたのがこちら↓
Embedding PHP In CSS

まず、htaccessに、「君はphpに見えるけど実はcssなんだよ」という呪文をかけてもらうために以下を記述

AddType application/x-httpd-php .css

そして、phpファイルの<head>内に、phpをスタイルシートとして読み込む記述

<link rel=”stylesheet” href=”style.php” media=”screen”>

そして、style.phpには、思い思いの変数を定義

サイトの例文では以下が書かれてました↓

<?php
/*** set the content type header ***/
header("Content-type: text/css");

/** set the paragraph color ***/
$para_color = '#0000ff';

p{
color: <?php echo $para_color;  ?>;
font-weight: bold;
font-size: 1.2em;
text-align: left;
}

これで、自由自在!!!バンザイ!

※使い方はEmbedding PHP In CSSを見た方がわかりやすいです

No tags css

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaa・・・</p>
↑なんて、改行の無い英字なんかがあると、せっかくwidthを指定していても、そんなの無視して
横長く表示されてしまう!

枠線とか背景とかあったりしたら、それこそ悲惨な結果に!

で、それを助けてくれる魔法の言葉がコレ

p {word-wrap: break-word;}

cssバンザイ!!

No tags css

10/01

20

HTML5やらcss3やら

ある朝目が覚めると、世界中のIE6がなくなってたらいいのに…

さて、とんでもなく(?)機能が増えるcss3に、IEが追いついてくれることを祈りつつ…(Windowsの標準をFirefoxにして欲しいな@pc購入したら、IEじゃなくてFirefoxが入ってるなんてどうでしょう?)

どうやら、css3に対応していない、IE5~8をcss3の擬似セレクタに対応させるjsがあるようです

Labs – ie-css3.js

You’ll need to download Robert Nyman’s DOMAssistant and my ie-css3.js and include them both in your pages tag as shown below — that’s all there is to it.

ということでどうやら、 DOMAssistant も必要とのこと

使い方は簡単 <head>~<head> に以下を書き込むだけ
<head>
<script type=”text/javascript” src=”DOMAssistantCompressed-2.7.4.js”></script>
<script type=”text/javascript” src=”ie-css3.js”></script>
</head>
ふ…(←意味不明な笑い)

結局全ての鍵はEnglishですね
今から英語を習おうかという子供たちに、「なぜ英語が必要なのか」を力説したいです

No tags css

« Previous Entries

次ページへ »