リンクボタンのonMouseOverをCSSに任せるべく作業中。 aをブロックレベルとしwidthとheihtを指定(aの実体部分は幅・高さ指定した透過GIFなのだが、何故か表示上の高さがそれに一致しなかったので)し、a:linkとa:hoverで背景切り替えを指定している。 Safari…

ドットパターンを基調にページデザイン中。 見出しの背景に敷くと文字が読めないので、文字部分だけ無地を重ねようと画策。 h2にドットパターン背景画像、h2 aに背景色を指定してみた(h2にはa[name]でトップメニューからのアンカーを仕込んでいる)のだが、背…

dlを使い、dtに背景色を指定して色帯と白帯が交互に表示されるスタイルを書いたところ、WinIE6では最初のdtに色が着かなかった。 取り急ぎ空要素の挿入で対処したが美しくない。原因調査予定で保留。

1枚の画像を使い回して角を落としたボックスを作ろうと思って、背景色を指定したdivの中の要素それぞれに背景画像を指定し位置を固定する。 開始位置をマイナス指定した左上はボックスから出た部分が隠されて巧いこと角が落とされて見えるが、右下はボックス…

こっちにも参加しようかとコーディングしてみていたのだが、トップページ完成と同時に飽きた。 こういう「いかにも会社のWebサイト」的なデザインは経験が浅いので色々と参考になるし、自分一人の環境ではデザインとコーディングを同時進行させるので「他人…

Firefoxにユーザスタイルシートを当てる。 場所はユーザ/ライブラリ/Application Support/Firefox/Profiles/********/chrome/の中、ここに「userContent.css」というCSSファイルを作るだけ。 取り敢えず設定したのはtextareaの文字調整。文字サイズや種類を…

参加してみた。画像無使用、紙媒体的な読み易さを念頭に置いて。 配色はid:tanemori氏のスタイルから頂いている(事後ではあるが御礼申し上げる)。このCSSは配色だけでなく配置も含め実に秀逸だと思う。 規定ルールについて 大外の三重divはいかがなものか、…

郵便局のロゴに見られるような、一文字目だけ反転+2行揃えパターンをCSSでやってみようと考える。 最初、h1にborder-leftで四角部分を作成してpadding-leftに負の値を指定すればいいんじゃないかと思ったが、paddingは負の値を取れない。文字色の変更に用い…

IEのposition/float回りには色々と爆弾があって、どういわけかwidthとの相関性が深いのだが、今ちょっとpositionでサイドメニューを調整しているときに引っ掛ったバグについて書いておく。 メインとなる部分をmargin-leftで余白を作り、そこにposition:absol…

深いディレクトリ構造を持つようなサイトであっても、階層に合わせてCSSも切り替えるということはあまり多くないだろう。或いは部分的に変更するにせよ、全体としては基本的に同一のCSSを適用して、その上で部分的に変更を加えるのが一般的だと思われる。 そ…

某パンフからのWebサイト作成作業中にハマった現象。 段落の冒頭にfloat:left指定した画像を表示しただけの代物なのだが、画面表示では正常に回り込んでいるのに、印刷すると何故か3行目までしか回り込まない。不自然なところで不自然に間が空く。 印刷用ス…

デザインセットを用意して切り換え可能な機能のリリース。日記編集者自身が適用スタイルを選ぶ仕組みで、作成したデザインセットは公開することもできる。実質的にはてなテーマエディタと考えて良いだろう。 色々気になること。 デザインセット作成時に選択…

古いサイトの更新。未だにフレームメニュー使用で、意味もなくメニュー部を画像化、マウスオーヴァで入れ替えている。 当時はこういうのが流行りだったのだが、今となっては虚しい限りだ。 全面リニューアルならこんなもの取り払ってValidに、いやそもそも根…

Web系の作業では、複数人数でページを製作するにあたり、しばしば都合に応じてスタイルを追加する必要が生じる。最初からきちんと設計完了していればそんな必要などないのだが、中々そう巧くも行かない。 このとき、元CSSで各自のスタイルをインポートする仕…

引用文の前後に:before/:after疑似要素で付加している引用符、時々文全体を囲むのではなく文の前に纏めて表示されることがあるのはFirefoxの描画ミスか。

はてなテーマグループにて、新作のジーンズ風スタイル公開中。

table利用時、縦方向の位置調整が未だに良く解らない。 複数のtdが並んだ状態でそれぞれの内容物の高さが異なると、余白のあるセルではデフォルトで上下方向について中央配置される。 これを上付きにする場合、HTMLならばtd valign="top"で可能だったのだが…

ふと-moz-border-radiusに拠らない角の丸め方（但し上部のみ）を思いついたのでhttp://css.g.hatena.ne.jp/DocSeri/20060227に記す。

どうやらグループデフォルトスタイルへのzen-makie適用時にグループカレンダーが黒字黒背景になってしまうという問題があるらしいということで、そう言えばグループの動作テストを失念していたことに気付き早速テストを開始するも以前作った確認用CGIが何故…

赤漆パターンと対を成すスタイル。当初は微妙に画像適用位置などをずらしていたのだが、結局統一することにした。

zen-sumieより前に作り始めながら纏まりが悪くリリースできなかった漆塗りスタイル2種に目処がついたので、themeグループで公開。文字色などの調整を施してリリース予定。

HTMLはスタイルシートによって柔軟な表現力を備えたが、残念ながら未だ不十分なところが多々ある。均等割付け然り、多段組然り。 中でも、日本語表現上欠くべからざるものでありながら対応の進まないものの一つがルビであろう。 IEは独自の先行実装としてrub…

コメント部分のクリックで編集可能になった関係で、背景にクリーム色を設定するCSSが自動挿入されるようになった模様。 しかしこれ、スタイルに関わらず挿入されているので、例えば暗い背景にクリーム色の文字を設定していた人は困ったことになるんじゃない…

テーマ利用の上でちょっとしたカスタマイズを試みる人は多いと思うが、クセのあるテーマを利用していたりするとなかなか巧くいかないものだ。 そのユーザーがCSSやHTMLについて多少なりとも知識を持っている場合は良いが、そうでない場合説明自体が難しく、…

Blogpetが新しくなって下に広告がつくようになった。 無料で利用している以上文句も言えないが、正直鬱陶しい事この上ない。 そこで、スタイルシートを使ってこれを覆い隠してしまおうと思う。 Blogpetのソースコード BlogpetモジュールはJavaScriptによって…

これはテーマ作成者にとっては重大なニュースである。 私としてはその方向性に反対したい。以下にその理由を述べる。 見栄えの崩れ はてなのテーマを形作る「スタイルシート」は、HTMLファイルの構造を元にデザインされる。同一の構造が保持されなければ、テ…

ハートマークは文章表現で利用頻度の比較的高そうな記号だが、実は機種依存文字なので環境次第では正常に表示されない。 そこで通常は「☆」とか「v」などで置き換えるのだが、この方法ではニュアンスを正確に伝えるに不足がある。 実体参照♥は概ね有…

漆と蒔絵がどうも纏まらない。h2やh3、moduletitleなどにアクセントをつけたいのだが、なにを入れても今ひとつ様にならないのである。 元々、漆塗りの製品は非常にシンプルなものが多い。形もニュートラルで、それを1色または2色で塗り分けた程度の製品が殆…

http://theme.g.hatena.ne.jp/DocSeri/にて和風スタイル其の壱:「墨絵」を公開。和紙に墨で線を引いたイメージのデザイン。名に反して墨「絵」ではないけれど、それはご愛嬌。 特徴的なのはサイドバーで、本文幅に等しいmargin-leftを設定してあるだけで幅を…

CSSグループのテーマ作成コンテスト用に、スタイルシート適用時のイメージを確認するためのCGIを作ったのだが、どうせならヘッダー色も切り替えられるようにしようと思いつつ色コード置き換え部分で挫折気味。すべてのヘッダーカラーを表示しては該当する色…