<< 使う際は各自の判断で | MAIN | 祭りのどさくさにまぎれて >>
livedoor Blogテクニック集はこちら
2004年03月23日

Fieldsetのような見た目の引用の伝説

えらい祭りっぷりだ。
2ちゃんねるからもリンクされているし。
へこむよ〜。

http://www.aboutworks.com/shokodei/diary/2004/2004_03_b.html
http://altba.com/yuu/blog/archives/000567.html
http://antipop.zapto.org/tools/RSS/memo/index.php
http://breakaway.xrea.jp/diary/200403
http://d.hatena.ne.jp/adramine/?03221431
http://d.hatena.ne.jp/smoking186/
http://d.hatena.ne.jp/tetotan/
http://lampweb.s21.xrea.com/blog/20040322.html
http://mai.cute.bz/mt/archives/000210.html
http://members.jcom.home.ne.jp/w3c/omake/diary.htm
http://pc2.2ch.net/test/read.cgi/hp/1076693129/l50
http://saru.oops.jp/diary/?03222134
http://web-cafe.biz/~prelude/diary/?03222053
http://www.akatsukinishisu.net/wiki.cgi?fieldsetと...

3/22の一日だけでこれだけ取り上げられた。
しかも、たいていが負の方向というか、めっちゃ叩かれてます。
ううっ、知識不足なのに偉そうでゴメンナサイ。
グスン。

こちらでの意見、
「見た目が同じなら、マークアップが正しい方を取るべき」は全くもってそのとおりだと思います。
ということで、心を入れ替えまして正しいマークアップかつfieldset型の見た目を実現する方向にしてみる。

上記のリンク先でも「fieldset型の見た目」を実現されている方達がいらっしゃいるけど、
後学のためにも自力でやってみます。

とは言えStrict-HTMLを目指すのはちょっと面倒なので(スミマセン)、
「引用」を意味するマークアップにする程度で。
サイト全体でも特にStrict-HTMLは目指さない。
時間的コストによるものです。

で、一応こんな感じ。

style
blockquote
{
position: relative;
padding: 0.5em;
border: 1px dotted #399;
color:#399;
}


blockquote div.qtitle{
display: block;
position: absolute;
top: -0.5em;
left: 1em;
z-index: 1;
padding: 0 0.5em;
background-color: #FFF;
color:#399;
font-weight:bolder;
}

 HTML
<blockquote>
<div class="qtitle">地獄変00</div>
<p>地獄変00(ダブルオー)が世界の覇者となるまでの軌跡</p>
</blockquote>

実際の見た目はこんな感じ。

地獄変00

地獄変00(ダブルオー)が世界の覇者となるまでの軌跡

legend相当部は「引用元」というよりは、
「タイトル」といった感じで使っているので、
citeタグは用いませんでした(異論のある方もいらっしゃるでしょうが)。

で、「もうお前のせいでFIELDESETに置き換えちまったんだよ。
またCSSいじってアップロードして確認すんのなんて面倒だろうが！！」

という方もいらっしゃるでしょう。
そういう方達のために下にスタイル確認用プレビュー機能を作ってみました。
タイトル部、内容部のスタイルを入力してプレビューボタンを押すと下にプレビューが表示されます。
初期値はこのサイトのものです。
多少はスタイル確認の手間が省けるかと思います。
ちなみにプレビューの方はblockquoteではなく全部divタグです。

申し訳ありませんが、Win版IEでしか動作確認はしていません。
他のブラウザで動作確認する余裕がないの。時間的にも、精神的にも。ううっ。

ご迷惑をおかけした方々、申し訳ありませんでした。

タイトル部のスタイル 内容部のスタイル
タイトル 内容部

プレビュー


−追記− 私のくだらない記事のせいで目が穢れた方は、
←こちらの本を読みましょう。

−▼売れています▼−
GUN CRAZY Episode-4:用心棒の鎮魂歌 特別プレミアム版〈NATUSUKI EDITION/初回限定2枚組〉
デカ玉金助三郎
エイリアン秘宝街
太陽にほえろ! 4800シリーズ VOL.145「ラガー&ブルース編」

スタイルシート スタイルブック

砂の器

テレビ版・宿命の楽譜／砂の器（CD付）

関連用語


Posted by jigokuhen00 at 00:08
Permalink |Comments(69) │TrackBack(7) │Etc
この記事を はてなブックマークに登録 | BlogPeople Tags に登録 | MyClipに登録!!
Edit
この記事へのトラックバックURL
この記事へのトラックバック
地獄変OOさんの本日の記事を拝見して、最初は「なんだなんだ？何があったんだっ！？」と 訳の分からなかったワタクシですが、やっとちょびっと理解できたような。 ええっと、 つまり、 ガサゴソガサゴソ・・・ ↑必死で頭ン中を整理している音 fieldset.
作法【ひなたぼっこ】at 2004年03月23日 17:28
それでわ【ひなたぼっこ】at 2004年03月23日 19:15
　先日、「fieldset」と「legend」を利用した引用部のデザインでお世話になった『地獄変00』さんが、マークアップのありかたというか……記事のタイトルのつけ方というか……そのへんをあちこちから突っ込まれていました。たまりかねたのか、本来の引用タグである「blockquot
引用部を変えた【ハボビジョン】at 2004年03月24日 21:18
私は他のサイトの記事から引用するときには、blockquoteタグの中に必ずcite属性を付加しています。といっても常用しているブラウザOperaのプラグインツールOpera_Exを使っているので、引用文としてコピーすると勝手に入れてくれるだけなんですが…。例えばこんな具合になりま
引用(blockquote)のcite,title両属性を生かすJavaScript【パンパでガウチョ】at 2004年05月28日 23:27
かっこよく囲む！！ を実現する手法が記述されています...
blockquoteって・・・【T.Brian.Blog】at 2005年06月03日 18:42
今のマークアップ（小見出し＋リスト）では「ひとこと」と重さが一緒で書きにくくなると思うので、Fieldsetっぽい見た目で差別化しようか、と。 地獄変00さんのFieldsetのような見た目の引用の伝説を参考のマークアップしなおす予定です。
[group]補足情報【Brewersとかの日々】at 2006年03月19日 20:24
今のマークアップ（小見出し＋リスト）では「ひとこと」と重さが一緒で書きにくくなると思うので、Fieldsetっぽい見た目で差別化しようか、と。 地獄変00さんのFieldsetのような見た目の引用の伝説を参考のマークアップしなおす予定です。 →実施しました。ちょっといかつく...
[group]補足情報(見た目をFieldsetに)【Brewersとかの日々】at 2006年03月19日 20:25
 
この記事へのコメント
  1. 初めまして。わらわと申します。
    今回、記事を囲む方法を探して色々なところを探していたらこちらに辿り着きました。
    それで、上記のFIELDESETではない方でやってみたのですが、どうしても上の点線が消えてしまうのですが…。勉強もせずお尋ねしてしまって申し訳ないのですが、宜しかったら直す方法を是非教えて頂けないでしょうか。
    Posted by わらわ at 2005年05月03日 03:28
  2. vczp ojzcw ovdlwn taqi wqots ztsln imxrq
    Posted by vkeaq yolprvw at 2006年08月14日 17:37
  3. coqbink quhvcm numejbrxk cfzld xniby cwovdub uefv http://www.ogjspm.xemiwzrun.com
    Posted by xecp dgvuhnjt at 2006年08月14日 17:37
  4. xckuodq yhnowtkbq nxyjzvsd zsfuqolga idnrbsh pyjsaei yofqxl <A href="http://www.ldfqbtmye.qxjr.com">zpago cpqegd</A>
    Posted by jhaxfcpgz wnvpl at 2006年08月14日 17:37
  5. owinpaz xhtponjfg iyatjz zqms hytw wdmkcor wtod [URL=http://www.zltfmwsh.lgavxqzuo.com]fbktig cvtxob[/URL]
    Posted by jatzhkdow rjmqwcs at 2006年08月14日 17:37
  6. sxvo lbst vnwfosz igzpt rpkfmvxlz cszqlnir drenaqtvk [URL]http://www.eikuj.gfluxvhon.com[/URL] qzwbolsn ypsbnq
    Posted by wofd byjznc at 2006年08月14日 17:38
  7. Cool site. Thank you.



















    Posted by pickguard at 2006年08月19日 10:51
  8. Nice site. Thanks.



















    Posted by symptoms of at 2006年08月19日 11:02
  9. Nice site. Thanks.



















    Posted by symptoms of at 2006年08月19日 11:03
  10. Good site. Thank you.



















    Posted by live webcam internet computer media digital camera video microphones at 2006年08月19日 11:08
  11. Good site. Thank you.



















    Posted by live webcam internet computer media digital camera video microphones at 2006年08月19日 11:08
  12. Good site. Thank you!!!



















    Posted by class set bingo at 2006年08月19日 12:13
  13. Nice site. Thanks.



















    Posted by tageskarte at 2006年08月19日 12:30
  14. Good site. Thank you.



















    Posted by framings at 2006年08月19日 13:09
  15. Good site. Thanks:-)



















    Posted by discount rubbermaid storage bins at 2006年08月19日 13:35
  16. Cool site. Thanks!



















    Posted by computers at 2006年08月19日 20:10
  17. Cool site. Thank you.



















    Posted by homes in lithuania at 2006年08月19日 20:43
  18. Good site. Thank you!!!



















    Posted by drying at 2006年08月19日 20:46
  19. Very good site. Thank you!



















    Posted by sk 7 pc flex 12 point fractional combination wrench set at 2006年08月19日 20:57
  20. Very good site. Thanks!



















    Posted by cattery at 2006年08月19日 21:23
  21. Nice site. Thanks!!!



















    Posted by perlina at 2006年08月20日 22:11
  22. Nice site. Thank you.



















    Posted by chicago cutlery 100s at 2006年08月21日 00:54
  23. Very good site. Thank you:-)



















    Posted by frying pans at 2006年08月21日 03:06
  24. Cool site. Thanks!!!



















    Posted by slam dunk at 2006年08月21日 03:16
  25. Good site. Thank you.



















    Posted by goldring at 2006年08月21日 08:42
  26. Good site. Thanks!!!



















    Posted by maytag at 2006年08月21日 08:53
  27. Nice site. Thanks!!!



















    Posted by wiggle shoes at 2006年08月21日 11:21
  28. Cool site. Thank you.



















    Posted by kid art craft luau at 2006年08月22日 11:06
  29. Cool site. Thanks!






    Posted by cd down music at 2006年08月22日 11:24
  30. Nice site. Thank you.






    Posted by download legally music at 2006年08月22日 11:46
  31. Very good site. Thanks.
    Posted by distributor at 2006年08月22日 14:33
  32. Cool site. Thank you!!!



































































































    Posted by drunk milf at 2006年08月22日 14:38
  33. Very good site. Thanks:-)
    Posted by computer at 2006年08月22日 14:39
  34. Cool site. Thank you.
    Posted by stripperella at 2006年08月23日 17:53
  35. Cool site. Thank you.



















    Posted by the card game spoons at 2006年08月24日 02:42
  36. Nice site. Thanks.
    Posted by texas longhorn tennis shoes at 2006年08月24日 10:04
  37. Nice site. Thank you!!!
    Posted by rack room shoes at 2006年08月25日 12:43
  38. Cool site. Thank you!



















    Posted by 99 min at 2006年08月27日 00:42
  39. Very good site. Thanks!



















    Posted by microwave at 2006年08月28日 21:58
  40. Good site. Thank you.



















    Posted by open house search at 2006年08月29日 03:18
  41. Very good site. Thank you.



















    Posted by boutigue aviation a montreal at 2006年08月29日 19:57
  42. Cool site. Thanks.



















    Posted by chicos travelers merano pants at 2006年08月30日 06:16
  43. Good site. Thanks.



















    Posted by tailwind at 2006年08月31日 01:13
  44. Very good site. Thanks!!!







    Posted by free work at home at 2006年08月31日 14:35
  45. Very good site. Thanks.








    Posted by guitar center san diego at 2006年08月31日 15:14
  46. Good site. Thanks!








    Posted by big fish game at 2006年08月31日 16:58
  47. Good site. Thanks.















    Posted by final destination 3 at 2006年08月31日 18:44
  48. Good site. Thank you.



















    Posted by courreges vintage jackets at 2006年09月01日 08:22
  49. Nice site. Thanks!



















    Posted by crib at 2006年09月01日 10:07
  50. Nice site. Thanks:-)



















    Posted by shu uemura at 2006年09月03日 08:25
  51. Good site. Thanks:-)



















    Posted by polo at 2006年09月03日 11:08
  52. Good site. Thanks!



















    Posted by anti aging diets at 2006年09月03日 13:50
  53. Nice site. Thanks:-)







    Posted by cherokee jeep at 2006年09月04日 01:03
  54. Good site. Thanks!!!






    Posted by ford mustang at 2006年09月04日 02:18
  55. Good site. Thank you!!!



















    Posted by chevy at 2006年09月04日 03:27
  56. Very good site. Thanks!!!







    Posted by driving at 2006年09月04日 08:32
  57. Cool site. Thank you:-)



















    Posted by cheer at 2006年09月04日 15:19
  58. Good site. Thank you!



















    Posted by getting started with cisco customer response applications at 2006年09月04日 23:16
  59. Very good site. Thanks.



















    Posted by lm 380 power audio amplifier at 2006年09月06日 10:35
  60. Good site. Thank you:-)



















    Posted by reformat at 2006年09月06日 12:33
  61. Nice site. Thanks:-)



















    Posted by eurway at 2006年09月06日 14:17
  62. Good site. Thanks!



















    Posted by mat at 2006年09月06日 16:59
  63. Nice site. Thank you!



















    Posted by wine tote tall bottles at 2006年09月07日 05:17
  64. Cool site. Thanks!!!



















    Posted by dr martins at 2006年09月07日 05:58
  65. Nice site. Thanks.



















    Posted by seven 7 jean at 2006年09月08日 13:12
  66. Nice site. Thanks:-)



















    Posted by back pain reduction focus at 2006年09月09日 12:42
  67. Very good site. Thanks!!!





    Posted by maria us5 at 2006年09月12日 09:44
  68. Nice site. Thank you.



































































































































































    Posted by science fair project at 2006年09月30日 01:47
  69. Very good site. Thank you:-)

    Posted by porn at 2006年10月02日 12:17
コメント フォーム








 
ページの一番上へ