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非対応、でももういいよね♪)

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

WindowsでVIM環境を構築する(挫折せずにスタートラインに立つまでの色々)

VIMと言えば、PGさんSEさんが扱う黒い画面(ターミナル等)と双璧をなす摩訶不思議(?)で扱いが複雑なツールと言うイメージだったのですが、思うところありまして、HTML描きの私も導入する事に致しました。

【注意】以下については個人的な解釈がはいっております。上手くいかなくても一切の責任は取りませんのでご了承下さいm(_ _)m

続きを読む WindowsでVIM環境を構築する(挫折せずにスタートラインに立つまでの色々)

DreamweaverでSassする時にzencodingを利用する方法

やはりCSSを書く場合はSassを利用するのが早くてカッコいいので、Dw狂の私としてはlinkerさんの記事を参考にDwでSassの開発環境を整えました。

が、SassでCSSを書く際には「scss」ファイルを編集することになるので、拡張子が違うからなのか編集ファイルがCSSモードでパースされずにzencodingがうまく動作してくれません
これでは効率が上がったのか下がったのか微妙なところなので、Dwのzencodingを少し修正して「scss」ファイルでもzencodingの恩恵を受けられるようにしてみました。

Sassもzencodingもコードヒントも使いたい!という欲張りな人にはお勧めです。

続きを読む DreamweaverでSassする時にzencodingを利用する方法

Gravatarを表示させる

GravatarとはWordPress.comを運営しているAUTOMATTIC社が運営しているアバターサービスです。

設定は簡単で、メールアドレスを登録し、アバターにしたい画像をアップロードしてメールアドレスに紐付けるだけ!!!!!!

こんな感じで画像リストからアバターにしたい画像を選択します。
(ちなみに設定されている画像はダークソウルの登場キャラです)

WordPressはGravatarに対応しているので、設定するだけで管理画面に表示されます。

登録しないでもいいですが、最近のデフォルトテーマはGravatarを表示するようになっています。ブログの賑やかしや誰が投稿・コメントをしたか判別しやすくなるので設定してみるのもいいんじゃないかなと思います。

SyntaxHighlighterの体裁をカスタマイズ

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

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

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

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

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