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挿入

[html]
<object type="application/x-shockwave-flash" width="900" height="370" title="title" data="swf.swf">
<param name="movie" value="swf.swf" />
<param name="quality" value="high" />
<p><a href="http://www.adobe.com/shockwave/download/?P1_Prod_Version=ShockwaveFlash&amp;Lang=Japanese">このコンテンツを再生するにはAdobe Flash Playerが必要です。</a></p>
</object>
[/html]

透過させるときは以下も
[html]<param name="wmode" value="transparent" />[/html]

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

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

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

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

練習の方は
[css]
a[href^="http"]{
background:url();
padding-right:xxpx;
}
[/css]
みたいにアイコンをbackgroundで表示してるけど、blogの方は
[css]
a[href^="http"]:after{
content:url(画像);
}
[/css]
てしてた。

その場合 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部分

[html]
<dl>
<dt><img src="メイン画像までのパス" alt="メイン画像" /></dt>
<dd>
<ul>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li><img src="サムネイルまでのパス" alt="サムネイル" /></li>
<li class="last"><img src="サムネイルまでのパス" alt="サムネイル" /></li>
</ul>
</dd>
</dl>
[/html]

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

[css]
dl{
width:380px;
}
dt{
margin-bottom:10px;
}
li{
float:left;
display:inline;
margin-right:10px;
}
li.last{
margin-right:0;
}
[/css]

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

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

[css]
ul{
margin-left:-10px;
}
li{
float:left;
display:inline;
margin-left:10px;
}
[/css]

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

って話。