サイドバー読み込みの進行割合に応じて画像を変化させる
てんぽ: サイドバー読み込みの進行割合に応じて画像を変化させる CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど CSSのみでプログレスバーを再現したものにはアニメーションGIFを用いた例が知られているが、 実際に何かの進捗状況を反映してバーの進行度を変化させている例はほとんどない。 今回は、ブログでよくある2カラムレイアウトにおいて「サイドバー」の読み込み状況を反映して進行するプログレスバーの実装方法を提案する。 <div class="sidebar"> <div class="blog-parts"> （各種ブログパーツ） </div> <div class="blog-parts"> （各種ブログパーツ） </div> （以下省略） </div> <div class="sidebar">～</div>がサイドバーであり、その内容として複数の「ブログパーツ」（<d
IE6のCSSバグを視覚的にチェック
てんぽ: IE6のCSSバグを視覚的にチェック CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。 IEtest (beta) 具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。 <div class="container"> <div class="div1"> <div class="div2"></div> </div> </div> .container {
可変幅で両側にドロップシャドウ（div一重で）
てんぽ: 可変幅で両側にドロップシャドウ（div一重で） CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど background-positionを%単位で指定し、ドロップシャドウ用の画像の大きさを調整することで、 画面の両側に影をつけたリキッドデザイン（画像の使用を極力控えてかっこいいCSSデザインをやってみよう大会のような）を実現できます。 しかも必要となるdivはひとつだけです。 このようなデザインでは divを二重にして一方のdivの左端に左側用の影画像を、もう一方のdivの右端に右側用の影画像を背景画像として指定するのが簡単です。 <div id="left"> <div id="right"> </div> </div> #left { width: 90%; margin: auto; background: url(shadow-left.gif) top
IE6で最小幅を実現する
CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。
折りたたまれたサイドバーは開かれない
閲覧者はそんなに暇じゃないので、ページ制作者が用意した「ネタ」（便利な機能）に、なかなか気づかない。 別のサイトの話だけれど、CSS切り換えのドロップダウンメニュー（趣味のWebデザインにあるのようなもの）をページの右上に配置していたとき、 知り合いにどのCSSを適用させているか聞いてみると、ドロップダウンメニューの存在自体に気づいていなかったことがある。 チェックボックスにチェックを入れると別サイトへのリンクが別窓で開くようになる機能（Website Options）も同様。 この機能を利用しているかのアンケートページを用意したところ、(1)利用している、(2)利用していない、(3)存在に気づかなかった、(4)質問の意味がわからない、という選択肢のうち、 半数が「存在に気づかなかった」だった。チェックボックスはアンケートページへのリンクのすぐ下にあったにもかかわらず。（ちなみにそれぞれの
CSSクイズ ブロックボックスの右寄せ
CSSでレイアウトをするとき、ある表示結果を実現するためには複数の異なる方法があり得ます。 ひとつの方法があるブラウザでうまくいかなかった場合、安易にハックに頼るのではなく、別の実現方法を試してみるとよいでしょう。 というわけで問題。 div要素の中にp要素があり、divの幅は80%、pの幅は200pxと指定されている。 p要素のブロックボックスを右寄せせよ。（参考画像） <div> <p></p> </div> div, p { padding: 0; border : none; height : 100px; } div { width: 80%; } p { width: 200px; } ※divの幅が200px以下になる場合を考慮する必要はない。 もちろんこの問題の解答は複数存在します。できるだけ多くの方法を考えてみてください。 コメント（4件） sug:Re: CSSクイズ
このエントリー
このエントリーによって「このエントリー」というリンクアンカーを用いてこのエントリーを参照することが可能となった。 リンクのアンカーテキストに「こちら」とか「ここ」とかを使うのは好ましくない。 その理由の多くは「ここ」というリンクについてのリンク集 に挙げられていますが、自分としてはリンクの有無で文意が変わってしまうことがとくに気になります。 文章中に「このエントリー（記事）」と書かれていれば、「このエントリー」とは今まさに読んでいるそのエントリーのことを指すのが普通です。 しかし、「このエントリー」がリンクアンカーになっている場合、 「このエントリー」が指しているのはリンク先のエントリーのことになってしまいます（少なくとも作者の意図としては）。 アクセシビリティとかリンクの本質とか以前に、文章としてどうかと思うわけです。 別のエントリーにリンクする場合、アンカーテキストには「このエントリー
リストマーカーをクリック（Fx）
Firefox（1.5.0.6）でリストマーカーをクリックすると、そのリスト要素が選択される。さっき気づいた。 リストマーカー：HTMLの<li>タグでマークアップされたり、CSSでdisplay:list-itemが指定されたりしたボックスが生成するマーカーのこと。 コメント（3件） 洵:Re: リストマーカーをクリック（Fx） Σ（゜□゜三 本当ですね！ 今は専らlist-style-type: none;＋background-image: url(リストマーク);の方を使っているのですが、こういう機能があるということはちゃんとリストにはマークを指定した方がいいのでしょうか？ でもMozillaだけの機能だとすると、それ以外の環境は「リストマークがずれる」というデメリットだけが残るわけで…ちょっと残念。 2006年09月16日（土）18:39:51 URL 編集 みりばーる:Re:
『セオリー・オブ・スタイルシート』発売
CSS 2.1今度こそ スタイルの設計とCSS 2.1 セオリー・オブ・スタイルシート 神崎先生――神崎正英氏はなぜかこう呼ばれることが多い。ごく簡単なHTMLの説明でHTML入門した自分にとってはやはり「先生」である――のCSS解説本。 CSSの理論と実践の2部構成。 前半部、CSS2.1に基づいた「ボックスと視覚整形モデル」の詳細な解説が圧巻。 Web上で読めるCSS解説ではCSS2リファレンスが最強ですが、 CSS2.1を本格的に解説した（日本語の）サイトや本を見るのは本書がはじめてです。 難解な部分については根拠となる仕様書の該当部分を示し、ブラウザの実装状況やCSS2との相違点についても触れられています。 後半は関拓也氏による「スタイルシートの実践」。こちらはCSSデザインでWebサイトを作り上げるチュートリアル形式の解説。 要所には前半の理論部分への参照もあり親切です。 CSS
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
