【-】 スポンサーサイト

一定期間更新がないため広告を表示しています

2010.12.28 / | CM : 0 | TB : 0

△PAGE UP

HTML・CSS (追記:2007.8.29)IE7でbodyの背景が拡大/縮小されない!【IE7対策】

ど、どうも1ヶ月ぶりです;;ご無沙汰してます。
近況とかその他諸々はまた後ほど。

えーと。
表題の件について困っている方をチラホラ見掛ける様になりました。
ついにはmixiのCSS関連コミュでも見掛ける様になりました。
検索かけてみるとコレの対策の具体案て無いんですね。
コレの対策を偶然ですが見つけましたのでお知らせしますです。

■CSSで回避
html{
background-color:#ffffff;
height:100%;
width:100%;
}
body{
background-color:#ffffff;
background-image: url(FILEPATH);
margin:0;
padding:0;
height:100%;
width:100%;
}
html>body{
height:auto;
}

htmlの背景色とbodyの背景色は同じものにしておくことをオススメします。
bodyとhtmlの高さや幅の指定ですが、bodyの内容がウィンドウの長さより短かった場合、bodyの内容分しか表示されないので指定してあります。

追記:20070829
firefoxで内容がウィンドウの高さ以上になったら背景画像が途切れてました;
↑の緑部分を追加することでそれを回避。
参考及び理由はhttp://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/
がわかりやすかったです。

■htmlで回避
たいていの人がいわゆる「標準モード」で作成していると思います。これを「互換モード」にしてやると回避できます。

■回避できる理由
さぁ?(笑)
発見は別のことを実現したくてCSS弄ってたら、上記のような方法を見つけただけなんで。
個人的解釈では、拡大/縮小を行うためには「haslayout」というIE独自のプロパティをtrueにしなきゃならんそうですが、そのスイッチがhtml{background-color:#ffffff;}とすることで入るんではなかろうか、と。
(試しにhtmlに背景画像を入れてみたら、htmlの背景画像は拡大/縮小されなかったんですよねぇ)

■補足
bodyの背景って、IEだと1pxズレるって話あるじゃないですか。
あれは健在です。

IE7のズーム機能、中途半端だなぁ;

さて、続きにて近況や、この対策を発見した経緯なんかを書きますか。


2007.08.24 / 13:03 | CM : 3 | TB : 1

△PAGE UP

HTML・CSS JavaScriptメモ(3):しんぷるロールオーバー(追記:2007.6.29)

■シンプルなロールオーバー
<headまたは外部JSファイル内>
function smartOver() {
smartRollover('tes');
}
function smartRollover(idName) {
if(document.getElementsByTagName) {
var images = document.getElementById(idName).getElementsByTagName("img");

for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match(/_off¥./))
{
images[i].onmouseover = function() {
this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
if(window.addEventListener) {
window.addEventListener("load", smartOver, false);
}
else if(window.attachEvent) {
window.attachEvent("onload", smartOver);
}
else{
window.onload = smartOver;
}
<body>
<p id="tes"><img src="images/test_off.gif" /></p>

◇仕組み+使い方
テンプレートではあまり使う所が無い気がしますが(笑)
作品サイトとかで使うつもりなので、メモ。ロールオーバーのJSです。
コレも元々はCSS HappyLifeのhiraさんが公開していたものです。それに手を加えました。
「***_off」という画像があったら、マウスオーバーした時、「***_on」に差し換える、というもの。
元々のは、ページ内の「***_off」という画像全部に反応してしまっていたので、指定したIDの範囲内に「***_off」という画像があったら「***_on」に差し換える、という感じでIDで範囲指定してみました。
smartRollover('tes');

でロールオーバーを適用したいIDを指定します。
smartRollover('tes');
smartRollover('tes2');
smartRollover('tes3');

という感じで複数指定も出来ますよ。

んで、元々のは、この関数の実行をaddEventListenerとかだけで実行させていました。
元々のがそれで実行してたんで、ならってそうしてました。
しかし、残念ながらMacIEでは無効でした(涙)ので、window.onloadで、古ーいブラウザでも動くよう、昔ながらの実行方法を追加してみました。

addEventListenerは、最近のブラウザのなんか特殊な仕組みを利用してるみたいです?
FlashのActionScriptでも実行出来るイベントらしいです。
window.onloadだけの方がシンプルだし、分かりやすい気がするのですが、addEventListenerは何かいいところがあるのでしょうか?
調べてみてもディープな世界ばかりで、どうにも理解出来ませんでした。

あ、「MacIEなんて知らねぇよ、けっ」って人は、window.onloadの部分を消してもらってもOKですよ。
MacIE以外ではしっかり動きますんで。


◇メリット
・ソースがシンプル
・HTMLに余計な記述を増やさず、ロールオーバーができる。

◇デメリット
・「***_on」の画像が無い場合、画像が表示されなくなります
・画像のプリロードをしていないので、最初はonの画像が表示されにくい。


追記:13時くらい
サンプル張るの忘れてました(汗)→Sample

追記:2007.6.29
画像のプリロードを動的にやってくれるバージョン完成♪
内容は↓にて。

↑のサンプルも更新しました。

2007.06.28 / 01:29 | CM : 5 | TB : 5

△PAGE UP

HTML・CSS JavaScriptメモ(2):折り畳みナビ

「in the cage」と「avion」で使ってる折り畳みナビの紹介ですー。

■タイトルで開閉、折り畳みナビ

<headまたは外部JSファイル内>
function ShortNavi() {
FoldNavi('newentry','close');
FoldNavi('category','close');
FoldNavi('comment','close');
FoldNavi('trackback','close');
FoldNavi('archives','close');
FoldNavi('recom','close');
FoldNavi('links','close');
FoldNavi('prof','close');
FoldNavi('fs1','close');
FoldNavi('fs2','close');
FoldNavi('fs3','close');
FoldNavi('fs4','close');
FoldNavi('fs5','close');
}
function FoldNavi(idName,initMode) {
var idTitle = Array(idName,'name').join('');
var idList = Array(idName,'list').join('');
var objTitle = this.document.getElementById(idTitle);
var objLists = this.document.getElementById(idList);
if (!objTitle || !objLists) return;
var dispMode = objLists.style.display;
if (!dispMode) {
var tmpText = Array('FoldNavi(',"'",idName,"','chng','');return(false);").join('');
var insMark = new Array();
var insText = new Array();
insMark[insMark.length] = Array('<a href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join('');
insText[insText.length] = insMark.join('');
insText[insText.length] = objTitle.innerHTML + '</a>';
objTitle.innerHTML = insText.join('');
objLists.style.display = (initMode == 'close') ? 'none' : 'block';
} else if (initMode == 'chng') {
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
}
}

<body>
<body onload="javascript:ShortNavi();" id="n{eid}">

◇仕組み+使い方
コレは元々、JUGEMカスタマイズ講座(現在は更新を休止しているようです)で公開されていた折り畳みスクリプトに手を加えたものです。
指定されたIDの中のテキストに、開閉用のリンクを追加し、指定されたIDをクリックで開けたり閉じたりする、というもの。
JUGEMカスタマイズ講座のは、開閉するリンク用の文字、マークを追加したりしていましたが、タイトル自体が開閉用リンクになった方がシンプルな気がしたので、改造してみました。
といっても、追加する開閉用リンクの文字を指定する箇所をテキストに指定し直しただけですが。
FoldNavi('newentry','close');

↑で適用するID、最初にクリックする前の状態(closeまたはopen)を指定します。
で、htmlの適用する箇所ですが、ちょっと注意が必要。
<h3 id="newentryname"></h3>
<ul id="newentrylist">
<li></li>
</ul>

という風に、開閉用リンクにしたい場所は、「ID+name」、実際に閉じたり開いたりするしたい箇所には「ID+list」という感じで指定します。


◇メリット
・使うとデザイン的にすっきりするので、画面が見やすい。
・閲覧者的にはあまり目に入らなくて良いものを隠せる。

◇デメリット
・設置が面倒。
・スクリプトが長い

2007.06.28 / 01:20 | CM : 0 | TB : 0

△PAGE UP

HTML・CSS JavaScriptメモ(1):広告カラーリング

2008.3.24追記
以下のエントリは、JUGEMの広告の仕様が変わったため、使用できなくなりました。
JavaScriptエラーになってしまうため、「javascript:CM();」がテンプレート内にある場合は削除してください。

----------------------------------------------------------------

JavaScript関連のメモがようやくまとまったので、更新してゆくデス。
カテゴリが「HTML・CSSの話」になってるけど、気にしないw

いつか書こうと思っていた、広告の色変えのヤツ。
JUGEMのテンプレ配布する人向けですね。

■広告カラーリングJavascript
<headまたは外部JSファイル内>
function CM(){
top.jugem_ad.location.href = "http://imaging.jugem.jp/ad/ad_feedme.html?border=fffcf4&bg=fffcf4&title=535353&text=535353&url=666666";
}

<body>
<body onload="javascript:CM();" id="n{eid}">

◇仕組み
まず、JUGEMさんの広告部分について。
この広告部分はiframe部分に特定のアドレスを読み込んで表示させています。
広告の枠線、背景、タイトル、テキスト、URLの色は、↓の
http://imaging.jugem.jp/ad/ad_feedme.html?border=fffcf4&bg=fffcf4&title=535353&text=535353&url=666666

引数部分で変えているようです。

なので、ページ内にある、「jugem_ad」というフレームのアドレスの、引数部分に任意のカラーリングを指定して、広告のテキスト部分の色を強制的に変えているのです。

◇メリット
・テンプレを使う人が、テンプレに合わせて広告のカラー設定を変更する手間が省ける。
・テンプレートのサンプルを表示した時、広告部分に違和感が出ない。

◇デメリット
・広告を画像に設定していても、テキスト広告になってしまう。
・ページを読み込んでいる間は、JSで変更する前のカラーリングで広告が表示されて、ちょっとダサイ。

2007.06.28 / 01:14 | CM : 0 | TB : 0

△PAGE UP

HTML・CSS Twitterな話。

さて、連休も明けました。お仕事してます、お久しぶりデス。
休みの日は出掛けることが実は多くて、PCの前に居ることがあまりないです。
黄金連休も裁縫やら飲み会やらヲタクなイベントやらで出掛けてました。わは。
GW中にTwitterのバッジをつけて、モバトゥイッターで更新しようと思ってたんですが、GWの最初の日くらいから使えなくなってしまい(仕様が色々と変わってしまったのか、エラー出まくりでアクセスできなくなってしまいました)、Twitter×GWという目論みが華々しく散りました。しょぼん。

そんなわけで。
ロリポにサーバーも借りているので(ほぼ倉庫&遊び用鯖)そこにtwitter Mobileを入れて使うことに。
コレがなかなか快適。設置も簡単だし。
感想というか、突っ込みを入れるなら、
・画像ON/OFFがあるのはありがたいが、どうせなら絵文字使った方が…
・うちの携帯(V501SH)ではCSSファイルは呼び出せないのですよ
そんなところかな?それ以外は特に問題ないです。快適です。
(↑は自分で対応させられたらしてみたいです。PHPはあんま分からないですけど)
今色んなTwitterの携帯サービス出てるけど、たいていが固体識別情報のログとってたりで、セキュリティがどーのこーの言われてるので、自分専用のを設置した方がまだ安全な気がする。

ほんで。
ならばbadgeも付けたいなーと思い、試行錯誤。
Informationに付けてみました。
Twitterで配布されてるヤツそのままだと、色々不具合あるようで、調べたら良さげな改変スクリプトがあったので拝借し、自分好みにカスタマイズしてみました。
ちなみにJavascript部分がそこそこ長いので、外部ファイルにして呼び出す形式にしてます。
使うヒトいるか分からないけど、ソース晒しますね。

2007.05.09 / 13:32 | CM : 0 | TB : 1

△PAGE UP

HTML・CSS Amazonの商品を横並びに表示する

ご質問いただいたので、せっかくだからエントリでお答え。
質問はタイトルの通り、「Amazonの商品を横並びに表示したい」というもの。
やり方はいたって簡単。
<div class="recom">
<!-- BEGIN amazon -->
<a href="{amazon_url}" title="{amazon_ProductName} : {amazon_Creator} : {amazon_comment}" target="_blank"><img src="{amazon_ImageUrlSmall}" alt="{amazon_ProductName} " border="0" class="amazon" /></a>
<!-- END amazon -->
</div>
この記述だけでOK。
CSSの方も、
.recom{
text-align: right;
margin: 0px;
padding: 0px;
}
.recom img.amazon{
margin: 1px;
padding: 0px;
}
これだけで全然OK。
サンプルは当方のブログの上にあるAmazon商品群で。笑
画像にマウスオーバーさせると商品名やコメントがポップアップヒントで表示されます。
もちろん、この形の良い所・悪い所もあります。

○良い所
・記述が短くてラク
・画像だけ表示されるので見た目が良い

×悪い所
・説明のテキストがマウスオーバーしないと見えない
・テキストが長いと読み辛い
・画像をオフにすると何も表示されない

見た目も悪くないし、使い勝手はいいんだけど、テキスト部分をどうにも出来ないのが難点でしょうか。画像オフの人って、少ないでしょうし。
使いたい方はコピペでどうぞ。

■ソースの解説■
ブロック要素の中で、インライン要素である<a>タグと<img>タグを使っているだけなので、ブロック要素の<div class="recom">のCSS指定でだいぶ変わります。
例えば、↑の指定だと右揃えで画像を表示しますが、「text-align: left;」なら左揃え、「text-align: center;」なら中央揃えになります。
CSSの「.recom」のところに「width:200px;」と指定を入れれば、200pxの中で並んでいきます。200px以上になれば、自動的に改行されますしね(当方のブログの■公開中のテンプレート■部分みたいな感じです)

■ブロック要素とインライン要素■
(X)HTMLのタグにも特徴があって、大分するとブロック要素とインライン要素に分かれます。
ブロック要素とインライン要素ってのは、簡単に言えば、
・ブロック要素=改行する(例:div、p、table等)
・インライン要素=改行しない(例:img、span、a、strong等)
といった感じ。
しっかり説明するとなると難しいので、割愛。笑
難しすぎて上手く説明が出来ないだけ…orz

■titleとalt■
「imgにaltがあれば、titleは要らないんじゃない?」とか思っている方は要注意。
「altがあればポップアップヒントが出る」わけではないんです。
出すならホントは「title」を使うべき。
IEさんはaltで出してしまう困ったさんなだけです。altだけだとFireFoxとか他のブラウザではポップアップヒントは出ません。

何かのお役立てれば、これ幸い。
↓は上のお話&CSSが分かってる人向けな続き。

2007.03.28 / 18:58 | CM : 9 | TB : 0

△PAGE UP

HTML・CSS 優しさが仇になる時もある

毎回JUGEMテーマで悩んでます。
とりあえず適当にインターネットとかアート・デザインとか、テンプレ配布の時はJUGEMとかしてますが。
何かいい基準は無い物か。。。

さて、タイトルなんですが。
実は、優しさがたまに仇になってしまうタグがいます。
そいつはテーブルタグ(<table>)
こいつはものっそい良い奴なんです。

ご存知の通り、<table>は表組みの時に使うタグです。
どこが優しいかと言うと、こいつは内容に合わせてスペースを考えてくれるんですよ。
横幅200pxの2カラムの表組みに、左は「ああ」右は「あああ」と入っていたとします。
すると↓のようになるのです。

あああああ

ね?空いてるスペースが良い感じでしょ?
また、表組みを繋げた時なんかもこの優しさは発揮されます。

ああああ
あああ

しかし、この優しさは仇となるのです。たまに。
↑の表の繋げた部分(右側のカラム)の文章量が増えたら、こうなっちゃいますよね?↓

ああああ
ああああ
ああああ
あああ
あああああ
あああ

二つに分かれてる部分がちょうど半分こになってます。
半分こでべつにイイ、という人は良いでしょう。テーブルの優しさを享受してしまえばよいのですから。

しかし、左側上のカラムの高さを1行分だけ固定したいとき、優しさが仇となって上手くいかないんです。
「そんな高さは認めない!」って感じで指定を無視して半分こにしてしまうのです。

テーブルのカラムの幅や高さは、二つに分かれている時はその両方のサイズを指定しておかないと大概上手くいきません。これはブラウザによって違うものだと思いますが。
しかし、幅はともかく、高さの固定は好まれませんし、IEに至っては、無視してくれます。

他にも、テーブルには変なクセがあります。

2007.02.18 / 17:25 | CM : 0 | TB : 0

△PAGE UP

HTML・CSS 探検家と火狐と狩猟隊

なんか一番狩られそうね、FireFox。
この中では火狐さんが一番使いやすいんだけどな。

新しいテンプレ作ってます。ジャンルはカワイイに入るかな?
せっかくなので文法も気を付けてやってますが、最初に組み立てた時は-50点とか(笑…えない)
とりあえず、HTMLの方は50点台になったので、後は色味調整くらいかなぁ。
蝶のヤツは何にも考えずにやったので、酷いです、文法。
そのうち修正しようとは思っていますが。

カテゴリがHTML・CSSの話ってなってますが、簡単に言えば私の個人的なHTML/CSS健忘録みたいなもんです。

■MacIEとWinIE/FFとSafariとoperaで上手く表示させるコツ
1.divで隙間を空けるときは、上下をpaddingで、左右をmarginで
2.tableにmargin:autoは使っちゃダメ
3.bodyの背景をセンタリングしたら、ハックを使う
4.inputやtextareaの幅はCSSで固定する

2007.02.10 / 13:48 | CM : 2 | TB : 0

△PAGE UP