web

blockquote要素とcite属性にcite要素.

blockquoteとかciteとかどんな風に使うのがいいのかなぁという個人的なメモ。

基本

blockquote要素|<blockquote>
直接インライン要素を含めない
他人の文章と自分の文章を区別する
cite属性|cite=”引用元のURI”
引用元のURIを記述
title属性|title=”引用元のタイトルや補足情報等”
引用元のタイトルや補足情報などを記述
cite要素|<cite>
引用元のURIやタイトルなどの情報を表示させる時

そのまま使って記述してみるとこんな感じ?

「何で草食系なんですか?」の解(フヒヒヒ!鬱になる画像や文章を貼ろうよ その6

会社で「何で草食系なんですか?」と聞かれたので
奢りを当然と考え、財布も出さない。そのくせこちらが決めた店には文句をつける。
さらに記念日には必ず「気持ち」をプレゼントとして具体的な形として欲しがり
そして自分がプレゼントを渡すときには自分が要求したものよりはるかにチープな物を送り
「大切なのは気持ちだから」
こちらが忙しい、都合が付かないときでも
「会えないのはやましいことをしているからだ!」
無理に時間を作っても
「その日は他の用事があるから」
自分の都合を優先するがこちらの要求は聞かない。
「束縛しないで!」
と泣く。
どんなにクタクタでも女の愚痴だけは聞かされ続け、建設的な意見を言おうものなら
「解決策が聞きたいんじゃない。話を聞いて欲しいだけなのに!」
また泣く。
挙句「あなたは私を大事にしてくれない」とか言われたら、そりゃ草食系にもなるわ。
と、答えたら楽しいランチの時間が止まった。

上のソース

使用感
引用文が長いと、blockquote要素の前にcite要素を持ってこないと何の引用なのか、すぐに分からないから困る。
引用の前に但し書きがあれあば、また変わるんだろうけど、それならやっぱりcite要素を但し書きの代わり使えばいいような気がするし。
cite要素とblockquote要素を関連付けるものがない?。<label for=””>のような。
だからといってblockquote要素の中にcite要素を入れるのはblockquote要素の性質上おかしいんじゃないかって気がする。
そうすると結局divかdlで包むかことになるんだろうか?

でもそんな事いったら、ulやolだっていちいち前後のpやhxなんかと関連付けて使ってないしなぁ。
ナビゲーションで使う場合は別にして。

cite属性は書いてもポップアップで表示されないしリンクになるわけでもない。
Firefoxは右クリックプロパティで引用元のアドレスが見れた、
safariとGoogle Chrome(webkit?)は右クリックの要素を検証から見れた、
content:attr(cite);はIE7以下未対応でopera以外はコピペできない。

あんまり考えすぎないほうがいい。

xhtmlのxml宣言

cssに慣れてきてからというもの、xml宣言をしてIE6で互換モードになろうが
コーディングしていてレイアウト上で致命的に困る事なんて全くなかったので飾りとして付けてた
けれど外してみることにした。

「text/htmlでのxml宣言の必要性」あたりで検索してみると色々な考察や解釈が得られる
エキサイト翻訳で読んでみるとtext/htmlの場合はxml宣言がいらないように思えた。

2009年1月16日
http://www.w3.org/TR/xhtml-media-types/#text-html

XHTML documents served as ‘text/html’ will not be processed as XML [XML10], e.g., well-formedness errors may not be detected by user agents. Also be aware that HTML rules will be applied for DOM and style sheets (see guidelines 11 and 13).

Authors should also be careful about character encoding issues. See guideline 1 and guideline 9 for details.

2002年8月1日
http://www.w3.org/TR/2002/NOTE-xhtml-media-types-20020801/#text-html

A typical misunderstanding is that since an XHTML document is an XML document, the character encoding of an XHTML document should be treated as UTF-8 or UTF-16 in the absence of an explicit character encoding information. This is NOT the case when an XHTML document is served as ‘text/html’.

あと関係ないけど
http://www.w3.org/TR/xhtml-media-types/#C_11

A.11. Document Object Model and XHTML
Rationale: This will ensure maximum portability of scripts, since the DOM methods will return element and attribute names in uppercase when served as text/html and in lowercase when served as application/xhtml+xml.

text/htmlだと大文字で返して(return element and attribute names in uppercase)、application/xhtml+xmlだと小文字で返すみたい
前回のエントリーでtagNameが大文字になるのはそうゆう事だったのか。

カテゴリー内の記事一覧を吐き出すように改造

投稿が増えれば増えるほど、どんな内容のPOSTがあるんだかよくわからなくなって不便になるだろうなーって思いながらも、どうせ簡単にできるんだろうから後でいいやと放ったらかしだったカテゴリー内の記事リスト一覧表示画面。

わかりづらくなってきたなーと感じたのでいざ改造してみようとしたら、これが結構思い通りにいかなかったというお話。

続きを読む

テンプレートタグ/bloginfo|

WordPress codex日本語版|テンプレートタグ

テンプレートタグ/bloginfo

* 書式: <?php bloginfo(‘show’); ?>
* 説明: 使用中のWordPressブログに関するさまざまな情報を出力。
* 位置: ループ内・外
* 引数:
o show (規定値)
出力する情報の内容。
+ name(「一般設定」管理画面で指定したブログのタイトル)
+ description(「一般設定」管理画面で指定したブログの説明文)
+ url(ブログのサイトURL)
+ rdf_url(RDF/RSS 1.0 形式のメインフィードURL)
+ rss_url(RSS 0.92 形式のメインフィードURL)
+ rss2_url(RSS 2.0 形式のメインフィードURL)
+ atom_url(Atom形式のメインフィードURL)
+ comments_rss2_url(RSS 2.0形式のコメントフィードURL)
+ pingback_url(ピンバック用URL。XML-RPCファイルを指す)
+ admin_email(「一般設定」管理画面で指定した管理人のメールアドレス)
+ charset(「表示設定」管理画面で指定された文字コード)
+ version(現在使用中のWordPressのバージョン)
+ html_type(”Content-type”の設定値)(Version 1.5以降)
+ wpurl(WordPressをインストールしたURL)(Version 1.5以降)
+ template_url(使用中テンプレートのURL)(Version 1.5以降)
+ stylesheet_directory(使用中のメインCSSファイルが置かれたディレクトリのURL)(Version 2.3.1 で廃止)
+ stylesheet_url(使用中のメインCSSファイルのURL)(Version 1.5以降)
+ template_directory(使用中テーマファイルディレクトリのURL)(Version 1.5以降)

* コード記述例:

* 出力例:

あれ?
stylesheet_directory(使用中のメインCSSファイルが置かれたディレクトリのURL)(Version 2.3.1 で廃止)てなってるけど、デフォルトのテーマにガンガン出てきたような?
template_urlに差し替えたほうがいいのかな?

日本語の雰囲気からして

  • 非推奨は、(いつ使えなくなるかわからないけど)まだ使える
  • 廃止は、もう使えない

な印象なんだけどな。

テンプレートタグ/bloginfo|

WordPress codex日本語版|テンプレートタグ

テンプレートタグ/bloginfo

* 書式: <?php bloginfo(‘show’); ?>
* 説明: 使用中のWordPressブログに関するさまざまな情報を出力。
* 位置: ループ内・外
* 引数:
o show (規定値)
出力する情報の内容。
+ name(「一般設定」管理画面で指定したブログのタイトル)
+ description(「一般設定」管理画面で指定したブログの説明文)
+ url(ブログのサイトURL)
+ rdf_url(RDF/RSS 1.0 形式のメインフィードURL)
+ rss_url(RSS 0.92 形式のメインフィードURL)
+ rss2_url(RSS 2.0 形式のメインフィードURL)
+ atom_url(Atom形式のメインフィードURL)
+ comments_rss2_url(RSS 2.0形式のコメントフィードURL)
+ pingback_url(ピンバック用URL。XML-RPCファイルを指す)
+ admin_email(「一般設定」管理画面で指定した管理人のメールアドレス)
+ charset(「表示設定」管理画面で指定された文字コード)
+ version(現在使用中のWordPressのバージョン)
+ html_type(”Content-type”の設定値)(Version 1.5以降)
+ wpurl(WordPressをインストールしたURL)(Version 1.5以降)
+ template_url(使用中テンプレートのURL)(Version 1.5以降)
+ stylesheet_directory(使用中のメインCSSファイルが置かれたディレクトリのURL)(Version 2.3.1 で廃止)
+ stylesheet_url(使用中のメインCSSファイルのURL)(Version 1.5以降)
+ template_directory(使用中テーマファイルディレクトリのURL)(Version 1.5以降)

* コード記述例:

* 出力例:

あれ?
stylesheet_directory(使用中のメインCSSファイルが置かれたディレクトリのURL)(Version 2.3.1 で廃止)てなってるけど、デフォルトのテーマにガンガン出てきたような?
template_urlに差し替えたほうがいいのかな?

日本語の雰囲気からして

  • 非推奨は、(いつ使えなくなるかわからないけど)まだ使える
  • 廃止は、もう使えない

な印象なんだけどな。

さすが隣接兄弟選択子(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の指定を増やすのも面倒臭いので、気が向いた時にしか調整してこなかった事が、隣接兄弟選択子を使うと簡単に解決できました。
続きを読む