ベストアンサー

このＣＳＳ（エディタ風）効果はどのように？サンプル

2011/05/23 12:42

こんにちは。ＣＳＳで以下のような、（エディタ風）効果を見つけました。どのようにしましたらこのような感じに出来ますでしょうか？左に蛍光の緑の線が入っていまして、 http://source-marine.net/css-mania/archives/411 01 | #h2-headline01 { 02 | background: #ddd; と、プログラムエディタ風になっております。この効果は、名前がついているのでしょうか？海外のサイトでも見つけることが出来ませんでした。どうぞ、よろしくお願いいたします。失礼いたします。

ycqxs765
お礼率98% (1019/1038)

CSS
回答数5
ありがとう数5

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/24 00:05 回答No.2

効果も何も・・liを一行ごとに背景色を変えている。ただ、マークアップ的には、明らかに間違いです。このサイトで説明しているCSS自体は、すばらしいものがありますが、このサイト自体で行われているHTMLのマークアップやCSSは、とんでもない酷いものです。(その点はサイト管理者も依存はないと思います。) 　ちなみにソースをコピーすると、そのままでは使えないことがわかります。　このサイトで使われているCSSは、各行を<ol>(ordered list)でマークアップして、項目番号をoutsideに list-style-position: outside; list-style-type: decimal-leading-zero; としています。各行の左には、緑のborderを指定している。　次の囲いのソースは<pre>です。　詳細は、firefox+fireBugで詳しくわかります。Firefox付属のDOM InspectorではCSSの記述まではわからない。　本来は、この様な場合は、HTML的には、各行は<CODE>でマークアップして、全体を<PRE>で囲む方がよいでしょう。（そうマークアップすべきです。）【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから CODE: Designates a fragment of computer code. ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases( http://www.w3.org/TR/1999/REC-html401-19991224/struct/text.html#edef-CODE )］より　その上で、行番号を入れた背景をセットするか、<code>に対してcounterをセットして行番号をcode:boreで追加するか・・list-styleをcontentでdecimal-leading-zeroにして追加しても良い。ただしcounterはＩＥだし8以降でないとだめだったような・・

質問者

お礼 2011/05/24 12:44

ありがとうございます。ちょっと待ってくださいね、チャレンジしてみます。またお礼申し上げます。とりあえず、、、、

質問者

補足 2011/05/24 21:19

ORUKA1951 様遅くなりまして、大変失礼致しました。なるほど、全部は理解できておりませんが、半分はわかってきました。＞fireBug ありがとうございます。インストール致しました。＞<ol>(ordered list)でマークアップしてこういうやり方もあるのですね。番号は、その番号なのですね。考えもつきません。緑のラインも背景ににセットしても良いし、border-leftを指定しても良いですね。＞行番号を入れた背景をセットするかなるほど、そういうことも出来ますね。私が知らないテクニック、沢山ある、、、。細かい所がまだまだわかりませんが、やってみようと思います。ご親切に、ありがとうございました。失礼致します。

その他の回答 (4)

bakayarou_
ベストアンサー率23% (32/136)

2011/05/24 19:10 回答No.5

dp.SyntaxHighlighterはCSSで実装されているのではなくてJavascriptで実装されている機能。そもそも質問者が示しているサイトの「?」をクリックすればdp.SyntaxHighlighterの名前とURLが表示されるけど質問者はそれすらしないで質問をしたのか?

質問者

お礼 2011/05/24 21:33

ありがとうございます。＞表示されるけど質問者はそれすらしないで質問をしたのか? いえ、Syntax Highlighterと言う名前すらしらず、お恥ずかしい思いです。一番上の行はリンクが貼れるのですね。至らずに、申し訳ありません。もしわかっていたら、名前ぐらいはわかっていたのでしょうね。すみませんでした。ありがとうございました

outbrave
ベストアンサー率60% (231/380)

2011/05/24 11:10 回答No.4

ANo.1 です。 WordPress でなくても実相可能ですよ。

参考URL：: http://ascii.jp/elem/000/000/401/401907/

質問者

お礼 2011/05/24 12:45

ありがとうございます。拝見いたしました。図入りでわかりやすいです。２度もありがとうございます、失礼いたします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/24 01:19 回答No.3

文書構造にしたがって、preで正しくマークアップして、かつ画像などを使わないでCSSだけで書くとこうなる。　この場合、ソースはそのままコピーペーストできる。なお、タブインデントは□に変えてあるので、元に戻してテストすること。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> □<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> □<title>サンプル</title> □<meta name="author" content="ORUKA1951"> □<meta http-equiv="Content-Style-Type" content="text/css"> □<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > □<link rel="START" href="../index.html"> □<style type="text/css">  □</style> </head> <body> □<h1>サンプル</h1> □<pre style="margin-left:5em;"><code>code:before{</code> <code> content:" "counter(code,decimal-leading-zero)" ";</code> <code> counter-increment: code;</code> <code> background-color:gray;</code> <code>}</code> <code>pre{</code> <code> font-family:"ＭＳゴシック","Osaka-等幅",sans-serif;</code></pre> <pre style="margin-left:5em;"><code>code:before{</code> <code> content:" "counter(code,decimal-leading-zero)" ";</code> <code> counter-increment: code;</code> <code> background-color:gray;</code> <code>}</code> <code>pre{</code> <code> font-family:"ＭＳゴシック","Osaka-等幅",sans-serif;</code></pre> </body> </html>

質問者

お礼 2011/05/24 21:29

遅くなりまして、申し訳ありませんでした。教えていただいたコード、実行致しましたところ、とっても綺麗でした。ですが、、、、。まだ、理解半分でした。＞pre code+code+code, ＞pre code+code+code+code+code+code+code+code{ このようなテクニックは見たこともありません。お恥ずかしい。こういう使い方ができるのですね。ちょっと調べただけでは、わかりませんでした。頂いたコード大事に使いながら、勉強させていただきますね。本当にありがとうございました。失礼致します。

outbrave
ベストアンサー率60% (231/380)

2011/05/23 13:23 回答No.1

Syntax Highlighter です。ご提示のサイトは、WordPress のプラグインで実相されています。

質問者

お礼 2011/05/23 23:40

outbrave 様さんたです。 Syntax Highlighterというのは、初めてお聞きいたしました。その通りで、これを再現したかったのです、、、。ですが、WORDPRESSのプラグインなのですね、、、CSSで実現できるかと思いましてチャレンジしてみましたが、おかしくなりました。名前がわかっただけでも良かったです。ありがとうございました。失礼致します。