米が好き

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。（HOMEをクリックした時）


この破線を消すのは、CSSに以下のコードを書きます。

CSS

a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー！
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。
なん・・・だと・・・？

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML

<a href="URL" onFocus="if(this.blur)this.blur()">リンク</a>

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。

IEで一部のページが真っ白になる現象があるようです。
『米が好き』でも、『LINK LIST』と『BOOKMARK』のページがそうだって事は先日知りました。
普段Firefoxなもんで、あまりIEのチェックはしてなかったんですよね。
でも最初は表示されてたと思ったんだけど…？

無事解決出来たので、その経緯を載せておきます。
続きを読む

ブログなどでAA（アスキー・アート）を貼る時には、ちょっとした注意点が必要です。

それは、フォント指定しないとAAがズレてしまう点。

大概のAAは『ＭＳ Ｐゴシック』で作られている為、その他のフォントをブログに設定しているとAAがズレて表示されてしまい、何が何だか分からないAAになってしまいます。
以下は実際にズレたAA画像やその対処法など。
続きを読む

CSSで文字の上に画像を乗せて文字を隠す方法があります。
完全に文字は消えて画像が表示されるし、もし画像が表示されない場合は文字が表示される。
CSSの『position』を使えば簡単に出来ます。
勘の良い人なら気付いたかもしれませんね。

例として、300×100の画像を用意します。

sample.jpg

HTMLとCSSの記述は以下。

sample.html

<h2><span></span>Cascading Style Sheets</h2>

sample.css

h2 {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

h2 span {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 100px;
  background: url(sample.jpg) no-repeat 0 0;
}

h2に『position:relative』で幅（width）と高さ（height）を指定し、h2に対してspanの『position:absolute』のtop:0、left:0で位置決めをする。
これだけです。
rerative＝親
absolute＝子
と言う覚え方をすると、覚えやすいかも。

以前までは『text-indent:-9999px』等で文字を外に表示する方法が使われていましたが、最近はコレを使用すると検索エンジンとかで悪質サイトと見られるような噂が…。

上記のやり方ですと、もしサーバーとかの問題で画像が表示されなくても、文字だけは残るので一安心ってな所です。
その場合に備えて、h2に『font-size』等を付けておくと良いかもしれません。
後、『margin』、『padding』等は上記で省いています。

『position』は覚えると中々使えるので、最近は結構頻繁に使ってます。
只、高さ（height）だけは指定しておかないと、後に続く表示が変になってしまうので注意が必要です。

ちなみに、このサイトのサイドバーの各タイトルはこの方法で表示しています。

3カラムのデザインに飽きてきたので、2カラムに変えました。
ちなみに、今のテーマはデフォルトを使ってカスタマイズしてます。

いつもはFirefox使ってるんで、ついついIEでの確認を怠りがちですが、ある程度出来上がった状態でIE表示チェックしてみると何故かデザインがおかしい…。

CSSをチェックしても、何をどーしてもバックグラウンドのズレが直らない。
何でやー！？　Firefoxでは正常に表示されてるのにー！
ってな事で、昔見た雑誌に何か書いてあった事を思い出して読み返してみました。

要は、『CSSでfloatした方向と同じ側にmargin指定すると、IEではmarginが倍になってしまうThe IE Double Float-Margin Bugと言う、IE特有のバグ』らしい。
うおぉぉぉ、IEのあほーーーーー！ｗ

結局、↓ の場合は、margin-leftが倍の20pxになるって事。

div.left_float {
  float: left;
  width: 300px;
  margin-left: 10px;
}

これをIEでも正常に表示させるのは、『display: inline;』を使用すると直る。
↓ のように、displayを追加。

div.left_float {
  float: left;
  width: 300px;
  margin-left: 10px;
  display: inline;
}

本来、float要素に対してこの指定は無視されるけど、IEのバグ現象を防ぐ力を持っているらしいです。
解決方法がある事は分かったが、もう一度言おう。
IEのあほーーーーー！ｗ

買ってて良かった、Web creators。

エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。
正確に言えば、『Lightbox』 を元にした 『Lytebox』 。

色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に 「ぶわぁ～」 っと表示されるアレですアレ。
続きを読む