RedLine Magazine : OLリスト 番号だけ画像なしでスタイルを変更
OLリスト 番号だけ画像なしでスタイルを変更 こちらのページより、面白いなーと思ったCSSネタ。 CSS Code Snippets : 15 Wicked Tricks | DevSnippets 上記ページの8番目の「Style Your Ordered List」の部分。これはOLリストのliタグの中にpを入れて、OLで付与されるリスト番号の部分のフォントの見た目のスタイルを変更するっていう趣旨。 今までOLリストを使う時、liの中にpタグを入れた経験がなかったし（多分）、実はOLリストの数字の見た目を変えたい時は画像置換で背景画像を表示させてた。画像にしちゃえば好きなフォント使えるし、数字の他にちょこっと飾りなんかも入れれるし。ただ、それをするためにはidやらclassやらをhtmlに別途与える必要が出てくるんよね。それってあまり好みじゃない書き方だったりする。もちろんCSS3の:
RedLine Magazine : スペースは嫌、class付けるのも嫌な時用(追記有)
スペースは嫌、class付けるのも嫌な時用(追記有) >>081210：追記 コメント欄にてもっといい書き方教えて頂きました！ タイトル、なんのこっちゃ？って感じなんですが、そういう時があるんです。例えば会社概要なんかをマークアップした時、定義リストとして書く際にdtに社名、所在地、電話番号・・・って入れるじゃないですか。そういう部分の元原稿って「社 名」みたいな感じで２文字の部分に予めスペースが入ってて見た目を整えてあるものが多いんですね。なんちゃって均等割り付けみたいな感じ。 ところがwebの場合、そういうのってhtmlに直接スペース入れられないじゃないですか。アクセシビリティ的にも文書的にも。もちろんデザイナ目線でのその部分の見た目を整えたい気持ちも分かるんですね。なのでCSSのletter-spacingで左右揃ってなくてもとりあえずなんとなく全部間隔あけとくか、チマチマと例外部分
RedLine Magazine : 変な定義リストをスッキリさせたい
変な定義リストをスッキリさせたい 随分前の話になるんだけど、別の制作会社のスタッフがコーディングしたコンテンツの中でdl（定義リスト）が使われてる部分があった。意味的にその場面で定義リストを使うのは間違いじゃないと思うし、それは問題ないんだけれど、少しソースに違和感があった。今日はそれを書いてみる。 何に違和感があったのか 私が違和感を感じたのはこういうソース。（内容は架空のものに差し替えてます） <dl> <dt>開催日時</dt> <dd>2007年8月18日</dd> </dl> <dl> <dt>開催場所</dt> <dd>日本のどこかの県のどこかの市</dd> </dl> <dl> <dt>参加費用</dt> <dd>1,000円くらい</dd> </dl> 何が違和感かって、定義リストで同じグループのものって普通1つのdlの中にdtとddを並べれば済むんじゃないの？と。そのマー
RedLine Magazine : hrタグの使い道を考える
hrタグの使い道を考える このサイトの状況は段組部分の背景をそれぞれの段組をまとめているブロックの背景として表示する定番技を使っているわけだけど、floatを使っているので当然IE以外のブラウザでは背景がちゃんと縦に伸びない(伸びないっつーかそのブロックに高さがない状態になるアレね。) 解決策としてはこれまた定番の clearFIx 技で解決すればいいやと思ってたわけなんだけど、どうもOperaさんの機嫌を損ねたらしく、Operaでだけ背景が表示されないという罠に陥った。 いつもなら「しょうがないやー、brでクリアしてやるかー」なんていう発想にたどり着くわけなんだけど、br タグでクリアするってのも本当はスマートじゃないよなぁと思いとどまった。で代わりになりそうな要素を考えてて思いついたのがhrタグ。 web標準が広まってきて、「構造と見栄えの分離」ってフレーズを遂行しているわけだが、hr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
