参加の承認が降りたので、以降こちらでスタイル調整を行う予定。

そろそろ?Dの新構造も固まってきたようなのでCSSの再調整。 なんだか良く解らないが新構造下ではMacOpera7.50での謎挙動もかなり控え目で、目下の問題点はfloat設定したimg.photoにdiv.section内のテキストが回り込まずブロック全体が画像幅分右にずれてしま…

はてなの様に、フォーマットの決まっているHTMLに対してなら直感的に操作できて自動でCSSを書き出すCGIを作るのも難しくないのではないかと思いついた。 時間のあるときにちょっとやってみよう。

CSSバグ辞典を見直したところ、IEの不審な挙動全てについて回避方法を発見。 フロートの左右マージンが指定値より大きくなる 回避方法不明につきマージンを指定しない方針で。 フロートの上部に祖先要素の上ボーダーを表示する 祖先要素にtransparentでない…

ピクセル指定による固定幅をパーセンテージ指定に置き換えることでブラウザごとの解釈による表示の相違を殆ど吸収できた…はずだったが、また新たな問題が。 WinIE6ではfloat:leftを指定したdivのmarginが極めて大袈裟に表示される：左に25%指定したら表示開…

戯れに原稿用紙風CSSを作る。背景画像を2値GIFで作り、それに合わせてフォントのサイズ・行送り・字間を調整するだけなので非常に楽だが、今まで作らなかったのは原理的にどうしてもフォントサイズ固定を避けられないからである。 また、見栄えの面でも半角…

以前作りかけて放置した書籍風CSSを制作。 当初は完成したらはてな用CSSとして提供しようかと思っていたのだが、構造上div.main必須、div.sidebar推奨、その上カスタマイズが困難というかなり問題のあるスタイルになりそうなので止めておく。 問題は現在使用…

手元の本*1で縦書き可能なプロパティとして紹介されており、CSS Lev1〜2、IE4/NN4/Opera/Safariでサポートとあったのでかなり期待したのだが、実験の結果全く非対応であった為に色々調べてみたら、XMLへの採用で審議中のものを（例によって）IEが独自採用し…

個人用メモとして。通常表示と印刷プレヴューの違いは面白い。 今まで印刷用スタイルは意識していなかったので、これを機にちょっと見直してみようかと思う。

float属性は本当に難しい。回り込みが欲しいだけなのに、完全に親要素から浮き上がって独り立ちしてしまう。 pとimgをdivで括って、枠の中に画像とテキストが並ぶようにしたいのだが、実際にやってみるとどうしても画像が枠から食み出す。 各divにheightを指…

note.cssで文字に合わせて罫線が引かれているのを見て「これがやりたかったんだよ」とソースを見たら…単にfont-sizeを固定して背景に罫線画像を引いているだけだった。 文字サイズを固定せずに、アンダーラインをブロック終端まで引く方法は無いものか。text…

仕事で製作中のサイト、余り煩く言われないのをいいことにValidateなHTMLの実験を兼ねて好きに作っている。 ulでメニューを形成、display:blockとfloat:leftを指定して横一列に並べようと思ったが、IE6だけは何故か階段状にずれて表示される。他のブラウザー…

以前ちょっと使っていたブラウザであるが、どうもCSS回りの解釈が悪く、そのうちにGecko系のCaminoやSafariのような優秀なブラウザが出現した為に使用を停止していた。 が、今回id:tomoya氏から「OmniWebで見るとフリーズする」との情報を頂いたのでチェック…

float周りの挙動に不明な点を発見。 divで囲まれた中にfloat:leftを指定したtableを置いたところ、tableがdivの外にはみ出しているのか、外側の要素と接触してしまった。 これを避けようと外の要素やdivにmarginを指定してみるが無視される。 仕方なく、div…

表のスタイルで、borderを表示した場合はcaptionにborderと同じ色の背景色を敷き、tableにぴったりくっつけてタイトル部分としたかったのだが、Gecko系とSafariの解釈の違いに悩む。 Safariではtable本体とのmarginを取らず、またtableの幅にcaption幅も一致…

まだHTMLのみでページを作っている弟のために簡単なCSSマニュアルを書く。 こういうものは書くことで少なからずこちらの知識の整理にも繋がるので、時々やるようにしてはいるのだが、実際に活用することは少ない。 いやしかし、正直Web Kanzakiのスタイルシ…

感じる派としては極力CSSでのレイアウトを試みるのだが、社内の環境がIE5〜6とそれぞれCSS解釈が異なる3種のブラウザが混在している上、親会社はなんと今時NN4.xなのでどうしてもtableレイアウトを使用せざるを得ず、泣く泣く書き換えている。 そもそも、HTM…

メニュー部分を左に配し、本文と違う背景色で区切る形でページを作成したいのだが、フレームを使わず実現する方法はあるだろうか。 tableレイアウトだろうがdiv+cssだろうが、画面の上から下までメニュー部分が貫くというのは（画面に対して100％の高さとい…

HTMLの見栄えはすべてスタイルシートで、というのは良い。 スタイルを変更するときのことを考え、クラス名には物理的な要素を想定させる名前を使うべきではないというのも、理由は解る。 でも、適切なクラス設定はどのようにするべきなのか。 例えば、文章中…

社の(中身のない)webサイトを外部に公開するというので、構造を全面的に見直し中。 内部公開中はIE5系列のエラーの為にtableレイアウトを余儀なくされていたが、新テンプレートでは構造を簡素化し、cssのみでレイアウトを規定する予定。 ところで、menu部を…

現在日記に適用しているスタイルは、一部にヘッダー＆フッターにimgタグを書き込んで表示させている部分があるが、これは単なる装飾でありHTML的に美しくない処理であるので、その解消を考える。 ゆくゆくは本家のCSSと統合したいと考えているので、そのため…

全く気付いていなかったのだが、そういえばはてなダイアリーのテーマが適用されていたのだった。 消してみたら変なことに。まあいい、直ぐ書き直す......つもりなので。

む？背景が出ない。なんでだ。 id振ったtable（本当はdivを使いたいがIE5.x及びNN4.xも考慮せねばならないため）にCSSで背景画像を指定、no-repeatでfixedにしたのだが、Netscape7でもOpera7.03でも背景画像が出ない。でも画面をスクロールさせると、本来画…

今持っているCSSの手引書が内容的に古く、色々不満があるので新しいのを物色するが、どうも好ましくない。 実のところ、欲しいのは「○○する為にはどう書くか」ではなくて「○○というプロパティの効果」を中心としたハンドブックなのだが。できれば技術評論社…

最近頻繁にリンク色を調整している。はっきり見え過ぎるのも見え難いのも気に入らない。色パターンでも悩む。 それはそうと、background-colorを付けたhに対し、ボックス内の左右それぞれに文字を配置したい（左に日本語、右にその訳語を置こうという意図）…

今日は+と:beforeを用いて「並んだ項目の間に/を挟む」とかリンクの頭に画像を挟むとかして遊ぶ。 また営業が煩いこと言いそうだが気にしない。id:kina:20030506でOperaとIEのCSSバグについて触れているが、これも多分Opera7.03のバグによる現象。 リンクにa…

リストをfloatで位置指定しているために、各所で不具合が起きている。divで区切られていることが多いのでdivにclear:bothを設定して逃れるのだが、なぜdivの範囲からリストが溢れるのか。 修正中にうっかり古いCSSに書き換えてしまう。キャッシュによりtexta…

久しぶりに少し弄る。 と言っても今日は整理されていないセレクタの纏めとちょっとした色の変更程度。 リファラの表示不具合は修正したが、IEでのliの飛び出し問題は未解決。 解決策を思いつかない。 文字色を、Photoshopを利用して滅多に使わないLabにて調…

はてなダイアリーでも、仕事でも、IEのCSS解釈に泣かされる。 body背景にはっきりした画像を敷いているので、その上に本文を囲むdivを配置、これらをfixedで固定し、あたかも本文部分だけ半透明になっているかのように見せているのだが、OperaでもGecko系で…

リストアイテムのインデント量が結構大きく、3階層ぐらい下がると矢鱈と横幅が狭まるのが気になる。 margin-leftで調整を試みたがマイナス値を設定しない限りインデントが軽減されない模様。それだとブラウザ毎に初期値が異なる恐れがあって宜しくないのだけ…