preタグで囲ったテキストは自動改行されないため、文章量が多いとコンテンツ領域を越えてしまったり、越えないようにoverflow:autoなどを指定するのですが、利用規約などをpreでマークアップしたときにはちょっと見難いものになってしまいます（縦横のスクロールバーでます！）。そんなときに使えるのがpreタグで囲ったテキストも自動改行させるスタイルシートです。記述はとても簡単で以下のコードをpre...続きを読む

連続した<br>がIE6では1つの<br>として表示されることがあります。例えば、文章の行間を1行分空けたいときなどに<br>を2つ指定したりしますが、ある条件が重なるとIE6では1つとして認識されてしまいます。◆サンプル（別ウィンドウで開きます）発生条件<br>を包括する要素にletter-spacingが指定されている場合に発生します。値はpxの...続きを読む

CSSには様々な指定方法があり、この指定方法によって優先順が決められています。例えば、同じP要素に対してセレクタを下記のように指定したとします。viewsourceprint?01    同じP要素に同じclassセレクタの指定が競合した場合02     03    ....続きを読む

Thickboxの使い方-画像やHTMLのポップアップをお手軽に！の記事でThickboxの使い方をご紹介しましたが、prototype.jsとの共存ができないというごとが判明したので、今回はprototype.jsとの共存方法をご紹介します。こちらのサイトを参考にさせていただきました。【メモ】prototype.jsとjQuery.jsを共存させてThickboxを動かす重要なポイントは上記のサ...続きを読む

a:hoverという記述はテキストのロールオーバーが良く使うことがあります。文字色を変えたり下線を消したりと、ユーザーの動きに合わせてデザインを変更することができるため、上手に使うことでユーザビリティの向上が計れます。しかし、IE6ではa要素にしか使えないため、どうしてもIE6のユーザーに対してはユーザビリティが悪くなってしまいます。そんなときに使えるのがcsshover.htcというビヘイビアフ...続きを読む

HTMLで長文があるときに、その文章の改行位置が揃っていないと見た目的にちょっと気になることないでしょうか。ちょうどこんな感じに↓HTMLコーダーとは、(X)HTML(※1)・CSS(※2)などを使用し、ウェブデザイナーがデザインしたものをブラウザ(※3)で見られるように、コードを書く(※4)人のことです。※1．ウェブページを作成成するためのマークアップ言語。.※2．ウェブページのデザイン・レイア...続きを読む

とある案件でtext-indet:-9999pxで背景を表示させるテクニックを使用したところ、text-indentが効かない現象が起こったため、発生条件・原因・対処法をまとめます。※text-indet:-9999px=スパムというイメージを持たれる方がいらっしゃいますが、背景画像に書かれている文言と同じテキストをtext-indentで非表示にすることは問題ありません。ユーザに見えている画像の...続きを読む

今回は、ブラウザのスクロールに合わせてするする付いてくるフローティングメニューのご紹介です。あまり使う機会はありませんが、覚えておくといざというときに便利です。それでは早速使い方のご紹介必要なデータを揃えるまずは、JQUERYSCROLLFOLLOWから下記ファイルをダウンロードしましょう。ここではファイル名を下記の通り保存しました。jquery.jsjquery-ui.jsjquery.easi...続きを読む

ThickBoxとはjQueryを使用したAjaxライブラリの一つで、主に画像をページ上に大きく表示させるときに使われます。また、画像だけではなくHTMLファイルも表示することが出来るため、これ一つで画像とHTMLをポップアップ表示（正確には同じページ上にオーバーレイ表示される）させることができます。◆サンプルこのライブラリの便利なところは、小難しい設定をしなくても使えることや、ポップアップした画...続きを読む

条件付コメントとはIEの独自仕様でそのコメントで囲われた部分の表示・非表示をバージョンによって分けることができるというものです。例えば、IE用のCSSを別に用意した場合に、そのCSSを読み込む際に使われたりします。IE条件付コメントの書式条件付コメントの書式は、指定のバージョン・指定のバージョン以上・指定のバージョン未満に分かれます。指定のバージョン<!--[ifIE6.0]>内容&l...続きを読む