2008年 01月 12日

どうしても見出しの幅が他とあってないのが気になるのでなおした……パターンメーカーって使って作った画像をはじめて使った気がする。なんかいまいちなんだよね……
あと右側にあいてしまう部分をうめたいけどいいアイデアが思い浮ばない。

2006年 08月 02日

CSS で変数が欲しい!の……

川o・-・)<2nd life - ファイル保存時に ERb でコンパイルして保存

これの別方向バージョンです。 (最近こんなんばっかだ。パクりマンセー)

CSS 特化でいいかなぁとか思いつつ簡単なスクリプトを通して置換するだけっていうのをやってみることにしました。ERB にせよ、なんにせよ、クライアントサイドでやってる限りは書いてる人の好き放題なのがいいところです。ERB のほうが別の場合も常に使えていいんですが。

#!/usr/bin/ruby
pre = File.read(ARGV[0])
vars = Hash[*pre.scan(/^\s*\*\s+([^\s;]+)\s*=\s*(.+$)/).flatten]
#p vars
ret = pre.gsub(/\#\{([^\s;]+)\}/) do |match|
if vars.key?(Regexp.last_match[1])
vars[Regexp.last_match[1]]
else
match
end
end
File.open(ARGV[1], "wb") {|f| f.puts ret }

第一引数に変換する前のファイル名、第二引数に変換したあとのファイル名を与えます。

vim 側は id:secondlife さんのやつを完全パクりでお送りいたします。指定した実行ファイルに保存時、ファイル名を与えて実行するだけ。~/.vim/plugin/css_pre_compile.vim

if v:version < 700 || (exists('g:loaded_css_pre_compile') && g:loaded_css_pre_compile || &cp)
finish
endif
let g:loaded_css_pre_compile = 1
if !exists('g:css_pre_compile_exec')
let g:css_pre_compile_exec = '/home/cho45/proj/mendoi/compile-css.rb'
endif
if !exists('g:css_pre_compile_name')
let g:css_pre_compile_name = 'pre'
endif
function! s:CssPreCompile()
let filename = expand('%:p')
let compiled_filename = substitute(filename, '\.' . g:css_pre_compile_name . '\.css$', '.css', '')
call system(g:css_pre_compile_exec . ' ' . filename . ' ' . compiled_filename)
endfunction
exe 'autocmd BufWritePost *.' . g:css_pre_compile_name . '.css call <SID>CssPreCompile()'

でもって編集する CSS

/*
* * Colors
* key-color-dark  = #123456
* key-color-light = #234567
*
* * Images
* imgdir = /img/hogehoge
*
* * Other Constants
* content-x-margin = 5%
*/
h1 {
background: #{key-color-dark} url("#{imgdir}/head.jpg") no-repeat top left;
height: 235px;
width: 50px;
}
/* 諸事情で #content に padding が指定できないとか */
#content .section {
margin: 0 #{content-x-margin};
}
#content .h2 {
margin: 0 #{content-x-margin};
}
#footer {
background: #{key-color-dark};
color: #fff;
}
#footer address {
color: #{key-color-dark};
background: #{key-color-light};
}

この場合頭に書いた宣言部分は消えないので、キーカラーを最初に明示しておく、なんてことが自然にできます。そういえば自分はよく色の頭二文字ぐらいを覚えて動的補完カマして入力するんですが、最初の二文字さえ最近覚えるのがダルイです。


ちょっと使ってみよう。が、しかし、すぐに使わなくなる予感が! といっても一回放り込めば使って悪いことはないので使えるかな。わからない。一ファイルで完結していないのがイマイチ。オートリロードとの兼ね合いもあるかも。あれダメダメじゃん。

Ruby 限定にするなら、探し出した変数宣言を module_eval とかで読み込んで、eval("<<EOF\n#{file_content}\nEOF") みたいなことやってもいい? 式が書けるようになるけど、エラーでてもわからなく。移植性が落ちる。


でもやっぱ。ERB のほうがループとかも書けていい気がする。<% が打ちにくいからそれだけなんとかできればいいような気もする。ねむい

2006年 07月 21日

CSS Nite Vol. 10

神崎さんの話目当てで行って来た。

  • CSS の話があんまない。
  • XHTML って名前だけで ill-formed とか勘弁して!
  • RDFSPARQL やろうよ
  • GRDDL くるかもよ
  • XSLT! XSLT!
  • ウェブのインフォーマルな良さと、フォーマルな応用性を繋ぐのが重要なんだよ

結構マニアックな方向の話だった。会場の人で「well-formed」なんて聞いたことがないという人が多くてびびる。今回の話をきっかけにちゃんとそういうことも考えてくれたらいいなぁとてきとうに思った。

SPARQL の話とデモは、なんとなくイメージが掴めて面白そうな感じ。


かなり人が多くて、立ち見だった。抽選の応募がケイタイからだったのだけれど、ケイタイが圏外だった。MacBook が欲しくなった。関係ない。

2006年 07月 14日

気をつけていること

「気をつけていること」って書いたけど、実際にはほとんど無意識ぐらいで「こうしたほうがいいな」って思いながらやっているのを書き出しただけで、あの規則ありきで書いているわけじゃないのです。

結果的にああなったぐらいのもので、わりとどうでもいいものです。書き出したのは、書き出すことで、本当にそれでいいのかっていうのを明確にしたり、曖昧なところを「曖昧なところ」として認識するためで、守るために書いたわけじゃないです。

例えばあれだと一つのファイルのまとめて書くことを前提にしてるから、ファイルを分けたときどうするかっていうのは全然わかってない。普通に考えたら、ある ID セレクタ以下を一括して分離するだろうけど、実際そうやって書いたことはないからなんともいえない。手探りいんぐ。

2006年 07月 13日

Firefox で text-indent: (ry; がガーってなるやつ

そういえばうちではならないなって思ったけど overflowの解釈、間違ってませんか? - WebStudio を見てから text-indent でふっとばすときは overflow: hidden; を入れるようにしていたからだった。

変な挙動の CSS に対して「どうしてそうなるのか」も考えないとなぁ。でもさ、今日思ったけど、IE さんは「どうしてそうなるのか」とか考えてやっても、無駄なのよね。

CSS で面倒くさいのは

ブラウザ間のアレなんだから、あんまり CSS 書くこと自体を面倒くさいことにしないほうがいいよね、って思うんだ。


ところで自分が CSS を書くときに気をつけていることを書くよ!

  • 必ずルールをインデントする (TAB インデント)
  • セレクタを複数書く場合は最後以外改行する
  • 規則のあとには必ずセミコロンを入れる (最後も)
  • 最後のルールのあとも改行する
  • 宣言ブロック間はホワイトラインを入れる
  • border, border-style, border-color, border-width 以外の border 系プロパティを極力使わない
  • font プロパティを使わない。
  • list-style 以外の list 系プロパティを極力使わない
  • margin, padding 以外の margin, padding 系プロパティを極力使わない
  • background 以外の background 系プロパティを極力使わない
  • 宣言ブロックは基本的に HTML の構造順に書く
  • 構造に関係ないやつ (ID 選択子を含まないもの) は上のほうに書く
  • インライン要素 (span, a), ブロック要素 (p, ol), どっちでも要素 (ins, del), 置き換え要素 (img, input) の順に書く (しかしそんなに厳密に考えない)
  • ID 指定の場合、下位の要素に ID が指定されていても、上位 ID をあまり省略しない (CSS 読むだけでも、HTML 構造が少しわかるように書く)
  • 以下適当ですが、display, position, float は宣言ブロック中で上のほうに書くとか、background と color は近くに書くとか (しかしあまり気にしない)
  • ルールと書いたり規則と書いたり安定しないけど気にしない

「極力使わない」というのは、どうしてもカスケーディングを維持したいときだけ使う。

* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
color: inherit;
background: transparent;
border: none;
}
a:link {
color: #00f;
text-decoration: underline;
}
a:visited {
color: #660;
text-decoration: underline;
}
a:hover ,
a:active {
color: #00f;
text-decoration: none;
}
p {
margin: 0.5em 1em;
}
ul {
padding: 0 0 0 1em;
}
ol {
padding: 0 0 0 1.5em;
}
del,
ins {
background: #efefef;
border: 1px solid #ccc;
}
input,
textarea {
background: #efefef;
border-style: solid;
border-color: #060;
border-width: 0.2em 0.5em;
}
/* ここから構造順 */
body {
line-height: 1.66;
background: #1f2f16 url("/img/left.png") repeat-y 7% 0;
color: #fff;
margin: 0 0 0 7%;
padding: 0 7% 0 50px;
}
#whole {
background: #fff url("/img/right.png") repeat-y right top;
color: #000;
padding: 20px 55px 0 0;
}
#top a {
display: block;
background: url("/img/logo.png") no-repeat left top;
width: 500px;
height: 100px;
margin: 0 0 0 20px;
text-indent: -10000px;
overflow: hidden;
}
#navigation {
}
#navigation ul li {
display: inline;
padding: 0 0.5em;
border-style: solid;
border-color: #ccc;
border-width: 0 0 0 1px;
}
#navigation #search-form {
position: absolute;
top: 0;
right: 7%;
margin: 1em;
}
#content {
padding: 1em;
}
#content h2 {
font-size: 120%;
padding: 1em;
background: #ccc;
}
#footer {
color: #ccc;
background: #000;
}
2006年 06月 15日

CSS なぁ

なんか最近 CSS の具体的なイメージまでフォトショで作っても、そのまま CSS 書かずにほっとくことが多い。前はすぐに書いてすぐに公開してたんだけどなぁ……

それにトリッキーな CSS テクニックも全く使わなくなった。どうせ IE でおかしいし、みたいな。慣れただけなのかなんなのか、仕様書も前より読まなくなった。つまらない。

どれもそれほど面白そうに見えない。好奇心がなくなったのかなんなのか。

CSS 書いた。変えた。

久しぶり。黒背景にしたけどきもい。すぐ違うの作らないと

背景画像は /2006/other-side-world です。久しぶりに RDF 書いた……

2006年 03月 23日

CSS をでっちあげた。

今回は他人のものを使わず、安全に作ってみた。

  • IE でオーバーレイ検索がダサイ。
  • 日記以外のページの最初の見出しがきもい
  • Opera がおかしい。
2006年 02月 25日

FEEDBRINGER 用 User CSS

ユーザーCSSを適用した FEEDBRINGER

feedbringer.css。すごく、きたないです。

/feed にしか適用しません。かなりソースがアレで苦労した。ソースがアレな上に、JS で擬似フレームの大きさを変えているので、そのあたりがかなり汚い……素直にフレーム使ったほうがいい気がする。

いろいろ変更。フォルダの矢印とか。

  • フォルダを閉じた状態だと、フォルダの次のアイテムのアイコンが乱れる。
  • 擬似フレームのリサイズ不可 (#splitter がキモイので消してある。一時的に stylelish を切ることで対処すべし)