11月 08
MOONGIFT: » 必見！怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
具体的にどのへんが怖くなるのか書いてないので解らないけれど、とにかくすごそうなので、concrete5を試してみた。
concreteって、コンクリート？？でいいの？？
ウェブ用のディレクトリに適当にコピーして、DBを作っておいて、
設置したパスにアクセス。インストールするための画面がでるのて、適当に入力してサブミット。
（詳しくはこの方を参考→☆CMS「concrete5」を試してみた – toytools log）
で、実際に使ってみようとおもったら、インストールでコケた。
そこで、インストールする際の注意点を書いてみる。
>>>>>続きを読む
Popularity: 74% [?]
written by ANN
10月 28
IE6でPNG画像のアルファチャンネルを有効にしようと思ったら、IEのみに存在するfilterプロパティのAlphaImageLoaderを使うことになる。まとめは以下のページにあります。
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ
CSS:
-
/* 通常ブラウザ向け */
-
div {
-
background: url(hoge.png);
-
}
-
-
/* IE6向け */
-
* html div {
-
background: none;
-
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src=hoge.png);
-
}
-
-
/* IE6向け */
-
* html div a {
-
position: relative;
-
}
上記のまとめページでは最後のaタグに対する記述position:relativeは必須ではないと記載されているけど、filterプロパティを設定した後の要素にリンク等がある場合は必要なようだ（自分だけの現象なのかよく分からないけど...）。というかaタグのリンクだけでなく、フォームの要素となるinput、textarea、selectタグなどマウスでフォーカスする必要のあるタグに関しても必要になってくる。
aやinputなどそれぞれのタグにposition:relativeを指定する必要はなく、それらをラップしている親要素に対して指定すればいいのだけど、指定しないでいるとIEではリンク箇所でもマウスが反応してくれなくなる。
position:relativeを指定してしまえば、マウスでフォーカスできない問題は解決するのだけど、ドロップダウンメニューなどz-indexを指定し、重ねて表示を行う場合に問題が発生する。
重ねて前面に表示したいブロックの下にposition:relativeを指定したブロックがあると前面に表示したいブロックの方が下に潜り込んでしまうのだ。これではうかつにposition:relativeを指定できない。
ドロップダウンメニューの実装方法を変えてみたりしたけど改善できなかった。
上に記述した方法以外にもアルファチャンネルを有効にする方法はあるようだけど、それらは試していない。AlphaImageLoaderを使う時点で同じ結果になるような気がしないでもないし...。まあ、しかし、根本的に自分の利用方法・記述が悪いだけかもしれないという点も払拭できないでいる。
自分としてはテキストがのっかるような背景画像に、この方法はとらないようにしようと思う。不具合に関して検証しきれてないし...。なんかいい方法があればお願いしますです。
Popularity: 19% [?]
written by joy-pop
8月 25
[2008.8.27追記]
どうやら個人的に使っていたFirefoxのテーマが引き起こしていた問題のようです。テーマによっては同様のケースの問題が発生するかも。そんな時はテーマをデフォルトにして確認してみましょう。
たとえばこんなCSS、HTMLがあったとします。
[CSS]
div.box {
width:150px;
height:100px;
border:1px solid #ff0000;
overflow:auto;
}
[HTML]
<div class="box">
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
あいうえお<br />
</div>
これをFirefox3で表示するとこうなる。
border-bottomが黒くなっちゃってるー！？スクロールバーの下はちゃんと赤い。なんだこれ？この現象はfirefox3でborder-bottomが設定してあるボックスにoverflow:autoを適用すると起こる。Firefox2.xの時にはこんなことにはならなかったのに...と思って非常に悩んだが、borderの太さを2px以上にしてみてようやく分かった。
なるほど、そういうことか！ということで、
overflow-x:hidden
を追記すると...
無事解決！いやいやいや、そうじゃなくて、確かにｘのスクロールバーは有効にはならなくていいけど、これは正しい実装なのだろうか？少なくともfirefox2.xの時はこうじゃなかったと思うんだけどなぁ。border-widthを1pxにしたときでもちゃんと、無効な状態のスクロールバーが表示されていてくれたら、問題の解決も速かったはずだし。
それと、overflow-x（overflow-y）ってIEの独自拡張かと思ってたら、いつのまにかFirefox、Safariでも実装されてたのね。CSS対応状況とかまとめページないかな？探すか...。
ついでにFirefox向けのCSSハックをググったのでメモ。
Firefox 3 CSS hackより
Firefox3 Only
html/**/body div.box, x:-moz-any-link, x:default {...}
Firefox3
div.box, x:-moz-any-link, x:default {...}
Firefox2
div.box, x:-moz-any-link {...}
まとめページもありました。
[参考] Firefox 1.0, 1.5, 3.0 用の CSS ハック
[追記]
coolcodeのborder-bottomが黒いのもoverflow-x:hiddenで解決できるんじゃないかな。
Popularity: 19% [?]
written by joy-pop
7月 10
以下にバシッとまとめられております。
CSS Hack for Safari | コリス
バージョンごとに別々なHackを行うのは、（ケースにもよるけど）非常にめんどいので共通で使えるものを利用。上記URLにあるものでSafari 2と3共通で使えるのは
の模様。 html* underscoreと/*\*/ html*はWin IEにも作用してしまうので記述するときに注意。上記URLではhtml* box bracketsもSafari2、3でOKと書いてあるが、どうやらSafari3.1.xでは作用しないみたいだ。
Popularity: 13% [?]
written by joy-pop
5月 17
Win/MacのFirefox(手元のバージョンは2.0)にて、HTMLページを印刷する際、コンテンツにFlash(SWF)が含まれていると、その部分がぽっかり空白になって印刷されてしまう。
FirefoxでHTMLと一緒にFlashコンテンツを印刷したいのだが……どうしたらよいものか。
いろいろ調べた結果、
:
:
:
ずばり、対処法はありません。
SafariやIEだと問題ない。
どうもFirefoxの仕様のようです。（バグ？）
Firefox 3はどうなんでしょうか。まだ使ってません。
HTMLはそもそも印刷に向いてない！というのは、制作側の言い分で、ほとんどのオーナーさんは、かなりの確立でHTMLページを印刷してチラシ代わりに使ったり、資料として使ったりする。
CSSのmediaでprintを指定しておけば、印刷時にFlashの代替えを表示することは可能だが、Safari/IEではFlashコンテンツを印刷できるのに、静止画に差し替えるのはもったいない。
Flash(SWF)を印刷できないFirefoxの時のみ、静止画に差し替えたいのだ。
そこで、
・Safari/IEは、通常時(screen)、印刷時(print)ともに、Flashコンテンツをそのまま使用
・Firefoxは、通常時は、Flashコンテンツを使用、印刷時は、代替えのイメージや文字を表示
する方法を考えた。
>>>>>続きを読む
Popularity: 59% [?]
written by ANN
3月 30
乙です。初参加です。今さらなんだよ！って突っ込みが聞こえますが、KY方向で。(;´Д`)
テストもかねて、エントリー。
HTMLには手を入れられないシステムで、font-family:"メイリオ", "Meiryo"…をどうしても設定する必要が有り。
メイリオのバグはXHTML適合文書にあり！ - SCREAMO
こちらにあるように、IE6でメイリオを表示するためには、基本「<html lang="ja"…」にすることになってる。
でも、HTMLには一切手を入れられない場合。
JavaScriptで無理やりlang属性を上書きしちゃうことで解決。
<script language="javascript" type="text/javascript">
document.getElementsByTagName('html')[0].setAttribute('lang','ja');
</script>
見事、メイリオになります。メイリオ萌え。
Popularity: 16% [?]
written by nisimura
2月 15
Iconize Textlinks with CSS - pooliestudios
上記サイトからアーカイブファイルをダウンロードすると、CSSファイルと画像ファイルが入っている。
CSSを読み込めば、リンク先ファイルの拡張子に応じて、アイコンをくっつけてくれる。
ただし、なぜか元のソースには、"PPT(パワーポイント)"が、定義されてなかったので、ppsの定義のコピーして、
CSS:
-
a[href$='.ppt'] {
-
padding: 5px 0px 5px 20px;
-
background: transparent url(/lib/iconize/icons/icon_pps.gif) no-repeat center left;
-
}
を追加した。（PPSのアイコンを流用。厳密には違うんだろうけど）。
ついでに、デフォルトではアイコンが、テキストの右側に追加されるので、左側に追加するよう、paddingと、backgroundのプロパティを修正。
IE6に対応してないのが、痛いけど、おまけ的な使い方として、ジミに便利だと思う。
↓以下、実際に組み込んでみた結果
Excelファイル
Wordファイル
PDFファイル
PPTファイル
Popularity: 8% [?]
written by ANN
2月 13
XML宣言、DOCTYPE宣言はもとより、拡張子が.htmlの場合は
AddType application/xhtml+xml .html
が必要。.xhtmlや.xhtmlの場合はいらない。 .cgiや.phpの場合はContent-TypeのHTTPヘッダが必要。
参考：
http://papalion.tv/Css/set.php
Popularity: 10% [?]
written by joy-pop
