SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次

Dreamweaver 8のビヘイビアで、サブメニューを表示させる（たとえばこちらのページのメーカー名にマウスを移動させると表示するメニュー）設定を行うと、なぜかInternet Explorer7ではレイアウトが崩れて、最初の１文字目だけが表示されるという現象に陥っていました。 これを解消させる方法が、こちらのCre8asite Forumというところに書かれていました。現象は若干違う（この質問者は英語圏の方で、半角スペースを入れるとそこで改行されてしまうという現象の解決法でした）のですが、対処方法は同じでOKです。 対処方法は、サブメニューの設定をしたときに生成されるmm_menu.jsというファイルの一部分を修正するというものです。 function writeMenus(container) { .... some codes here .... menu.menuItemHeig

Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS

IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態で「peek-a-boo bug」。 リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。 というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。 「いないいないばあバグ」とは言いえて妙の、訳の分からんバグです。こういうの誰が命名したんでしょうね。 いないいないばあバグの対処法としては、 問題の出る要素を囲っている div に line-height を指定する。 問題の出る要素に width または height を指定する。 問題の出る要素の中の要素に position:relative を指定する。 の3つの方法があるようです。他にもあるかもしれませんが、と

DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser

以前、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論［絵文録ことのは］2006/11/25で、「実際にサイトを閲覧している人のブラウザーの横幅と、ブラウザーによる印刷上の制約から、特に画像は左端から640ピクセルくらいに収まるようにした方がよさそうだ」という結論に落ち着いた。これには、一行字数が多すぎると読みづらい、という、紙媒体の扱いも多いわたしの経験的な見方もある。 もちろん、これにはリキッドデザイン主義者の方から「ページ幅を指定するようなデザインであること自体が悪」という反応があったり、「印刷用CSSを使おう」といった反応があったりしたのだが、「印刷時のことを考えれば640pxという制約がある」という結論は特に揺るがなかった。 その後、今まで約2年経った。閲覧者の環境も変わり、当時主流だったIE6にはなかった「用紙サイズに合わせて印刷」機能を備えたIE7ユーザーも増

UFABET เว็บพนันออนไลน์ อันดับ 1 บริการ แบบครบวงจร ตลอด 24 ชั่วโมง UFABET เป็น เว็บไซต์พนันออนไลน์ อันดับ 1 ของประเทศไทย และเอเชีย ที่ได้รับการยกย่อง เรื่องการบริการ และความมั่นคง ทางการเงินอย่างสูง UFABET ฝากถอน ไม่มีขั้นต่ำ เนื่องจากเราใส่ใจ คุณภาพในด้านการบริการ และประสิทธิภาพ ของเว็บไซต์ อย่างมาก ทำให้มีสมาชิก จำนวนมากให้ความเชื่อถือ กับเราและเพิ่มขึ้นอย่างต่อเนื่อง เราเป็นเว็บพนันออนไลน์ ที่บร

Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 IE6の表示バグです。とあるショップサイトを構築してる時に、たまたま出会いました。かなり久しぶり。 ↑が正常な表示。Opera/Firefox等はこれです。これがIE6だと... こうなる。初見では「継承か？ marginの重複か？」とか思うズレですが、試しに選択してみると、問題が解りやすくなります。 なんか妙な要素が出現してますね。それに押された感じ。試しにテキストにしてみると... なんか複製されてます。さ～どうするか。 解説 実はこれ、「Explorer 6 Duplicate Characters Bug」という長ったらしい名前でそこそこ有名なバグで、複数のf

TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。