dt ddで作る横並びリストの1行目を変えたいなー

定義リストなんかで横並びにすること結構ありますよねー

僕は専らdt ddで作ります
(なんかソースがスマートやしww)

その作り方なんかは目の前の箱で検索すればすぐ出てくるので割愛、
今回はその1行目のデザインを変えたい場合についての忘備録です
ほら、見出しにしたいとかいろいろあるやん?

パッとで思いつくのが

dl dt:first-child {
  (色とか線とか)
}
dl dd:first-child {
  (色とか線とか)
}

これだよね~

駄菓子菓子、ddは:first-childが利かない!
なんということでしょう(T_T)

どうやらdtを挟んでいるため、隣接セレクタを使う必要があるとか・・・
てことで上のコードを修正、こうなります

dl dt:first-child {
  (色とか線とか)
}
dl dt:first-child + dd {
  (色とか線とか)
}

(隣接セレクタはIE6非対応、でももういいよね♪)

これでまたシアワセなコーディング生活ができますな

SyntaxHighlighterの体裁をカスタマイズ

現在、スニペット集のサイトを作ろうと少しずつアイデアを形にしていっているのですが、その手のサイトに無くてはならないのがコードを見やすく色付けしてくれるシンタックスハイライター。
何か良いのが無いか少し探すのですが、結局いつもこのシンタックスハイライターに落ち着いてしまいます。

このシンタックスハイライターは3.0になってからシンプルになったんですけど、デフォルトテーマがなんかダサいと言うかシンプル過ぎてつまらなくなったな~と感じていました。最近新たにダウンロードした際に、テーマという項目を見つけて自分で体裁をカスタマイズできることを知りました!
早速、さっくりテーマを作ってみました。

結局以前のバージョンと同じような体裁になりました。今作っているサイトの現状の見た目に一番あっているということもありますが、これが一番安定感があるよな~と感じています。

数種類のテーマが用意されているのですが、コアファイルが「!important」を使いまくっているので、別CSSにて「!important」を使ってゴリゴリ上書きしている構成です。現状はそれに倣って作りましたが、配布を考えないのならコアを修正したほうが何かとecoだと思います。

あとは、タブの場合はタブ、スペースの場合はスペースで整形してくれるようにJSの修正をするだけです…………

疑似クラス

例えばリストの最初(最後)だけ罫線を消したい場合に使うのが:first-child(:last-child)

とても便利ですよね~最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽
これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑

その場合は

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

をヘッダに指定してIEでも使えるようにすればOK!
これで幸せなマークアップライフを過ごせますね

さて、CSS3では上記以外にも様々な擬似クラスが定義されています
結構使えるんですよね~

 

:nth-type(n)

これは、ある要素の隣接している子要素を最初から数えてn番目にあたる要素にスタイルを適用するもの
最後から数えたい場合は:nth-last-child(n)

nの値を変えることで様々な箇所に対応できます
奇数の場合はoddもしくは2n+1、偶数はevenもしくは2n
数字を直接指定するとその番目のみ・・・
というように

あぁ、素晴らしい

 

上記に似て非なるものが

:nth-of-type(n)

これはある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用
最後からの場合は:nth-last-of-type(n)

nの指定の仕方は前のと同じ

これらの違いは、子要素すべてか同じ子要素のみか

<p>~</p>
<p>~</p>
<h2>~</h2> ←p:nth-child(3)
<p>~</p> ←p:nth-of-child(3)
<p>~</p>
<p>~</p>

ということですな

 

ちなみに

<script type="text/javascript">
$('e:last-child').css('border', 'none');
</script>

とjQueryで指定したらIE関係なく疑似クラス使えたり。。。
もちろん:nth-child(n)や:nth-of-child(n)もありますよん

jQuery恐るべし

参考:CSS Happy Life ZERO

firefoxで長い半角文字列を折り返す方法

自分はFirefox使い
彼は、長い半角文字列だと律儀に折り返さず一列に表示してしまいます

自分の関わる案件だとこれはマズい。。。

そんな時に使えるのが…

word-wrapプロパティとword-breakプロパティ

word-wrapは表示範囲に収まりきらない単語がある場合に、単語の途中で折り返すかどうかを指定できます
word-wrap: normal; デフォルト値、特になにもしない
word-wrap: break-word; 必要に応じて折り返します

word-breakは、文の途中で折り返すかどうかを指定できます
word-break: normal; デフォルト値、特になにもしない
word-break: break-all; 言語に関係なく表示範囲で折り返し、単語の途中で折り返すことも
word-break: keep-all; 言語に関係なく、単語の途中では改行せず単語の切れ目で改行されます

これを折り返し表示させたい要素に加えると適切な位置で折り返してくれます

これらは元々IEが独自に採用したものですが、
CSS3で標準装備されるようなので、結果的にほとんどのブラウザで適用されている模様