以前友人にも口頭で伝えたとこはあったのだが、自分で試してみたのは初めてだったのでここで紹介しときます。
知っている方のほうが多いと思いますが、CS3になってフィルターのアンシャープマスクを何度もやり直しが出来るようになりました。アンシャープマスクのみじゃないんですが、よく使いそうなのでアンシャープマスクを例に挙げようと思っただけです。
カテゴリー: Web
iPod touch/iPhone用のアイコン
以前ファビコンの作り方と設定方法を御紹介させて頂きました。今回はそのiPod touch/iPhone用のアイコンを作成、設定する方法です。
でも私はiPod touchはおろか、iPhoneも持っていないのであくまで参考させていただいた記事をまとめた程度です。iPod touch/iPhone欲しいが先立つものが・・・
全称セレクタ
随分と前の話だが、全称セレクタの可否について議論されていました。私もそれまで全称セレクタで一度全てリセットしてから指定していましたが、その話を聞いて驚きました。
全称セレクタを使って{margin: 0; padding: 0;}とするとどこが問題なんだろうか。
それはレンダリングが遅くなるからと言われていたり、使っていない他のものをわざわざ全てをリセットする必要はないからとも言われている。確かに不必要なものまで一度リセットする必要もないのも確かである。またデフォルトで良いものはそのまま使うってのが無駄がないということである。
TiddlyWiki
ちょっとした情報をメモしておく時などに役に立つ「TiddlyWiki」。かくいう私もつい最近知ったのだが、これが軽くてさくさく動いて実に手軽。導入も凄く簡単なのでぜひ使ってみてください。また日本語化することも簡単にできます。検索すれば手順を紹介しているサイトが沢山あります。
HTMLのコメントもセレクタ対象？(:first-childが効かない-IE7-)
この現象はまだお目にかかったことはなかったのだが、今後「:first-child」を使う機械も増えると思い載せておくことにしました。しかも現在では対処方法がないとのことです。知ってるか知らないかの違いで、対処法を探し無駄に時間を費やすと思うとぞっとします。
IE7にHTMLのコメントもセレクタの対象として扱うというバグがあるそうです。
まずは現象を見てもらうのが手っ取り早いので、下のサンプルをIE7とFirefoxで見比べてみてください。
HTML
[html]
<div>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
</div>
<div>
<!–コメント–>
<p>1つ目の段落</p>
<p>2つ目の段落</p>
</div>
[/html]
CSS
[css]
p:first-child{
color: #FFF;
background-color:#F86C18;
}
[/css]
SWFobjectについて
flashで初の記事はflashの操作ではなく、actionscripでもなくxhtmlやhtmlに記述する埋め込みタグ部分です。なんでもこのSWFobject.jsを使うとバージョン検知ができ、Windows IE の(ActiveX コントロールのアクティブ化にも対応しているとかだそうです。しかも検索エンジン対策にも効果があるときたら使わない手はない。
今回は情報だけで解説は一切ありません。申し訳ございません。
hasLayout
hasLayoutって言葉をご存知ですか？私も最近知ったんですが、hasLayoutプロパティとはWindows IEの独自拡張プロパティだそうです。私も記事を書きつつも未だに詳しくはわかっていないのですが、わかる限りで書きます。
まれにWindows IEで配置に関する問題が発生した場合に、その部分に幅を指定するだけで問題が解消されることがあります。これは別に幅を指定したことで解決したわけではなくて、幅を指定したことでhaslayoutプロパティの値が「true」になったことで問題が解消されているそうです。
IE7自動配布試してみた。
ついにIE7の自動配布が始まりました。私は1日遅れで今朝会社のPCをアップデートしてみました。てっきりWindows Updateをしたら勝手にIE7になっちゃうのかと思ったら、ちゃんと選択させるようになってました。ありがたいのかありがたくないのか・・・というのもどの程度の方がIE7にしたかがわからないからです。強制配布だったらブラウザの使用率も変わったんでしょうけど、選択になるとまだまだIE6を使っている方も多いのでは・・・と考えますよね。
リストタグでナビゲーションを作ったら隙間ができる
よくCSSを使ってナビゲーションを作る時、リストタグを使います。そこでたまにおきるのがナビゲーション間に隙間ができてしまう。決して意図したわけではないのに。。。そんな時の解決方法を紹介します。
実際現象を見てもらいましょう。下記のソースでWindows IEで見ると隙間ができています。Firefoxなら問題なしです。
CSS
[css]
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
margin: 0;
padding: 0;
}
li a{
display: block;
padding: 0.2em;
text-decoration: none;
color: #FFF;
background-color: #F60;
}
[/css]
HTML
[html]
<ul>
<li><a href=””>ナビ01</a></li>
<li><a href=””>ナビ02</a></li>
<li><a href=””>ナビ03</a></li>
<li><a href=””>ナビ04</a></li>
<li><a href=””>ナビ05</a></li>
</ul>
[/html]
標準モードと後方互換モードの違い
ご存知の方もいらっしゃると思いますが、メモ代わりのために記事にしておきました。
xhtmlには標準モードと後方互換モードというものがあります。この違いがCSSのwidthに影響を与えます。具体的にいうとwidthの計算方法が異なります。つまり標準モードのwidthにはpaddingとborderは別ものとして考えます。つまりある要素、ここではボックスで考えます。ボックスの幅はwidth+padding+border+marginとなります。ですが、後方互換モードではwidthにpaddingとborderを含めた計算方法をするのです。つまりボックスの幅はwidth+marginとなります。