html/css

さすが隣接兄弟選択子(Adjacent sibling combinator)!おれたちにできない事を平然とやってのけるッ そこにシビれる!あこがれるゥ![ E + F ]

http://www.w3.org/TR/css3-selectors/#selectors
http://www.y-adagio.com/public/standards/tr_css2/selector.html#adjacent-selectors

自分、よそ様のサイトのhtmlやcssをみて「へ~こうやってるのか、こうなってるのか」なんていう解析をほとんどしないので、こんな事しなくともスマートに解決する方法がどこかにあって、当たり前のように皆様は実装してるのかもしれませんが、あいにくとそのような素敵な方法を知らず、かといってむやみにcssの指定を増やすのも面倒臭いので、気が向いた時にしか調整してこなかった事が、隣接兄弟選択子を使うと簡単に解決できました。
続きを読む

lintに怒られないFlash挿入

透過させるときは以下も

cssセレクタ|パターンマッチングとか

外部サイトへのリンクには判りやすいアイコンをつけたいな、と思った
どうせなら外部リンク一つ一つにclassを付与する方法ではなく、今まであんまり使わなかったcssの指定でなんとかならないかな、とも思った

‘外部リンク アイコン’で検索したらヨモツネット|外部リンクだけにアイコンをつけることのできる CSS のセレクタが上位にヒットしたので参考にさせてもらい、勉強の為 htmlにまとめる。

[追記|2009年9月9日2:24]
外部内部どっちにもアイコンが表示される不具合があったので一応修正(できてる?)

練習の方は

みたいにアイコンをbackgroundで表示してるけど、blogの方は

てしてた。

その場合 http の url にマッチしたものにアイコンをつけて、その後でhttp://blog.sakurachiro.comやhttp://sakurachiro.comと自分のドメインにマッチしたもののcontentを消す事になるんだけどcontent:noneで削除してた。

詳しくメモるの忘れたけど、たぶんFirefox以外のoperaやIEやwebkit系で表示すると、「http://blog.sakurachiro.com」や「http://sakurachiro.com」以下へのリンクにもこのアイコン画像()が表示されてておかしいなa[href^=”http”]:afterて効かないのかな?いやいや試したじゃないかと首を傾げながらcssをいじっていると
content:none、これどうもFirefoxしか対応してない。
でcontent:” “;でアイコンを上書きしてみたんだけど、content:” “;て大丈夫なのか?

もう一回ヨモツネットさんはどうやってるんだろうと確認しにいったらページが表示されなくなってた、
たしか、IE6も対応するような丁寧なつくりだった記憶があるんだけど、残念。

[追記|2009年9月3日15:52]
http://sakurachiro.com/_exercise/stylesheet/index.htmlにアップしてあるけど、もうちょっと命名法を考えないと次のサンプルを作ったときに困るんじゃないのか?>自分
[/追記]
例のごとくちょっと遠いところからスタートしてしまい、当初の目的を見失いつつある。

原理はcss3のE[foo^=”bar”]を使って、httpから始まるリンクをパターンマッチさせるというもの。
httpから始まるということは絶対パスというもので、絶対パスを使うと言う事は外部サイトへのリンクの可能性が強いという事だからかな?

省略語と頭字語(abbr要素、acronym要素)

<abbr></abbr>

1文字づつ発音する省略語用

  • html(HyperText Markup Language|えいち・てぃ・えむ・える)
  • IT(Information Technology|あい・てぃ)
<acronym></acronym>

頭文字をつなげて1つの単語として発音する場合に使う

  • SOHO(Small Office/Home Office|そー・ほー)
  • DOM(Document Object Model |どむ)

どちらもインライン要素、使った事ないけど
正式名称書くと長ったらしくて面倒臭いから省略して使うようになってんだろうに、title属性で正式名称を書いておく必要があるそうな。

コンディショナルコメント、IE用に指定するアレ

IE大嫌い
けれど、どんなにみんなに叩かれても「そんなに文句いうならお前が作ってみろよ!」と言い出したりしないところは評価してる。
まぁだからってIE大嫌いに変わりはない。

さて、コンディショナルコメントというものがあります。
このブログにも使ってみました。
IEにだけ読み込ませたり、読み込ませなかったり、IEのバージョン毎に読み込むものを変えたりできるアレです。
[20090916修正]
続きを読む

横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せる

これ、何故にいままで全く思いつかなかったのかが不思議でならない。

たとえば以下のような配置をしたくなる時があります

20090718_1

上記画像は、横幅380pxの親ブロックの中に、横幅120pxのサムネイル画像を均等配置で3個入れてあります。
のでサムネイル毎の間隔は10pxかな。

そしてそれをコーディングする時、いままではこんな感じで書いてたとします
html部分

css部分(余計な指定はすでにリセットしてあるとして)

こんな感じで、liの最後に適当なclassをつけてmarginをリセットしてたんですよ。
これだと余計なclassをhtmlに書かなきゃならなくて、美しくないし面倒だなぁと思いながらも。

しかしさっきおや?と思ったわけです
右にmarginをとっていたけど、これ左にしたらどうだろう?と発想を変えてcssを

こうしてみたら
.lastが必要なくなったアアアア

って話。

syntaxhighlighter

syntaxhighlighter
http://wordpress.org/extend/plugins/syntaxhighlighter/
[sourcecode language=”html”]
<html>
<head></head>
<body></body>
</html>
[/sourcecode]

SyntaxHighlighter Settings

Display line numbers.
行番号を表示してください。

Display the toolbar.
ツールバーを表示してください。

Automatically make URLs clickable.
自動的にURLをクリック可能にしてください。

Collapse code boxes.
コード箱を潰してください。

Show a ruler column along the top of the code box.
コード箱の上部に沿って定規コラムを示してください。

Use the light display mode, best for single lines of code.
コードの単線に軽い表示モード、ベストを使用してください。

Use smart tabs allowing tabs being used for alignment.
整列に使用されるタブを許容する賢いタブを使用してください。

Wrap long lines, using an icon to show where line.
長い系列を包装してください、そして、どこかを示しているのにアイコンを使用して、立ち並んでください。

wraps occur (disabling this will make a scrollbar show instead)
機密は起こります(これを無効にするのはスクロールバーを代わりに目立たせるでしょう)。

Additional CSS Class(es) / 追加CSS Class
に適当なclass名をつっこんだんだけど
pre class=”brush: xml;みたいな箇所に追加されてない、どうやって使うんだろう。

仕方ないので大本のcssを編集する
wp-content\plugins\syntaxhighlighter\syntaxhighlighter\styles内に
Color Theme毎のcssが入ってた。

  • shCore.css
  • shThemeDefault.css

のバックアップをとって編集する。
続きを読む