- ベストアンサー
このＣＳＳ（エディタ風）効果はどのように？サンプル
こんにちは。 ＣＳＳで以下のような、（エディタ風）効果を見つけました。どのようにしましたらこのような感じに出来ますでしょうか？左に蛍光の緑の線が入っていまして、 http://source-marine.net/css-mania/archives/411 01 | #h2-headline01 { 02 | background: #ddd; と、プログラムエディタ風になっております。 この効果は、名前がついているのでしょうか？ 海外のサイトでも見つけることが出来ませんでした。 どうぞ、よろしくお願いいたします。 失礼いたします。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- bakayarou_
- ベストアンサー率23% (32/136)
dp.SyntaxHighlighterはCSSで実装されているのではなくてJavascriptで実装されている機能。 そもそも質問者が示しているサイトの「?」をクリックすればdp.SyntaxHighlighterの名前とURLが 表示されるけど質問者はそれすらしないで質問をしたのか?
お礼
ありがとうございます。 ＞表示されるけど質問者はそれすらしないで質問をしたのか? いえ、Syntax Highlighterと言う名前すらしらず、お恥ずかしい思いです。一番上の行はリンクが貼れるのですね。 至らずに、申し訳ありません。 もしわかっていたら、名前ぐらいはわかっていたのでしょうね。 すみませんでした。 ありがとうございました
- outbrave
- ベストアンサー率60% (231/380)
ANo.1 です。 WordPress でなくても実相可能ですよ。
お礼
ありがとうございます。拝見いたしました。図入りでわかりやすいです。２度もありがとうございます、失礼いたします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
文書構造にしたがって、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"> <!-- code:before{ □content:" "counter(code,decimal-leading-zero)" "; □counter-increment: code; □background-color:gray; } pre{ □font-family:"ＭＳゴシック","Osaka-等幅",sans-serif; □counter-reset: code; □line-height:16px; □font-size:12pt; □width:30em; } pre code{display:inline-block;width:100%;} pre code+code, pre code+code+code+code, pre code+code+code+code+code+code, pre code+code+code+code+code+code+code+code{ □background-color:rgb(180,180,180); } pre code, pre code+code+code, pre code+code+code+code+code, pre code+code+code+code+code+code+code, pre code+code+code+code+code+code+code+code+code{ □background-color:rgb(220,220,220); } span.selectors{color:blue;} span.value{color:red;} --> □</style> </head> <body> □<h1>サンプル</h1> □<pre style="margin-left:5em;"><code><span class="selectors">code:before</span>{</code> <code> content:<span class="value">" "counter(code,decimal-leading-zero)" ";</span></code> <code> counter-increment:<span class="value"> code;</span></code> <code> background-color:<span class="value">gray;</span></code> <code>}</code> <code><span class="selectors">pre</span>{</code> <code> font-family:<span class="value">"ＭＳゴシック","Osaka-等幅",sans-serif;</span></code></pre> <pre style="margin-left:5em;"><code><span class="selectors">code:before</span>{</code> <code> content:<span class="value">" "counter(code,decimal-leading-zero)" ";</span></code> <code> counter-increment:<span class="value"> code;</span></code> <code> background-color:<span class="value">gray;</span></code> <code>}</code> <code><span class="selectors">pre</span>{</code> <code> font-family:<span class="value">"ＭＳゴシック","Osaka-等幅",sans-serif;</span></code></pre> </body> </html>
お礼
遅くなりまして、申し訳ありませんでした。 教えていただいたコード、実行致しましたところ、とっても綺麗でした。ですが、、、、。 まだ、理解半分でした。 ＞pre code+code+code, ＞pre code+code+code+code+code+code+code+code{ このようなテクニックは見たこともありません。お恥ずかしい。こういう使い方ができるのですね。 ちょっと調べただけでは、わかりませんでした。頂いたコード大事に使いながら、勉強させていただきますね。 本当にありがとうございました。 失礼致します。
- outbrave
- ベストアンサー率60% (231/380)
Syntax Highlighter です。 ご提示のサイトは、WordPress のプラグインで実相されています。
お礼
outbrave 様 さんたです。 Syntax Highlighterというのは、初めてお聞きいたしました。その通りで、これを再現したかったのです、、、。ですが、WORDPRESSのプラグインなのですね、、、CSSで実現できるかと思いましてチャレンジしてみましたが、おかしくなりました。 名前がわかっただけでも良かったです。 ありがとうございました。 失礼致します。
関連するQ&A
- cssについて
ホームページでcssにしたいページがあります。そこで判らない点がありまして皆さんの教えを乞いたいと思い質問した次第です。 1.cssを作成したページはcssのフォルダを作って、その中にcssのソース(HTML)を格納し、サーバーに転送するそうなんですが、これはページ全体のソースのことですか。cssの部分だけですか？ 2.cssのページはバック(壁紙)が“白”と“緑”のページがありますが、この場合はcssのフォルダを別々に作るのですか？ 3.cssフォルダによってページが一括管理出来て更新が簡単になるとのことですが、ページ全体をcssにした方が管理しやすいですか？ 4.cssのソースはホームページを作ってるソフト以外のエディタにコピーしても宜しいですか？ Dreamweaver3で作成してますが、以外とアバウトなソフトなので、細かい設定はソフトの機能に頼らず、ソフトのタグをいじっています。なんせ初心者です。判りやすく解説お願いします。
- ベストアンサー
- ホームページ作成ソフト
- css 画像を表示・設定
cssでimgタグを使って画像を表示させたいのですが、 css内でsrcは使えないのでしょうか？ img{ background-image:url( http://orange.jpg ) } このような書き方しかできないのでしょうか？ 上記の書き方だと、画像の周りに線ができて、更にhtmlソース内のaltの文字まで表示されてしまいます。
- ベストアンサー
- HTML
- cssで文字背景を透明化できますか？
cssで文字背景を透明化できますか？ 文字の背景にbackground-colorで色をつけ、その色を透けて見せたいのですが、 わかりません・・。 「-moz-opacity:50；」とか「filter:alpha(opacity=50)；」などで色の透明効果を 出せるとありましたが、ソースをどう記述すればいいのかわかりません。 よろしくお願いしますm(_ _)m
- ベストアンサー
- その他（インターネット・Webサービス）
- css外部ファイル（ヘッダ、フッタ）の書き方
素人です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> でhtmlを（テキストエディタを使って）書いています。 ヘッダとフッタをcssで書きたいので参考サイト等を探していますが、 htmlに埋め込む方法ばかりで、外部ファイルの書き方が見つかりません。 例えば、 －－－－－－－－－－ <style> * { margin: 0; padding: 0; } #header { position: ●●●● left: 0; top: 0; background-color:●●●● color: ●●●● width: 100%; height: 30px; z-index: 3; －－－－－－－－－－ のようなソースは見つけることが出来るのですが、これを外部ファイルに書き出す方法が分かりません。 ヘッダ内にて <link rel="stylesheet" href="ファイル名.css" type="text/css" /> を宣言し、外部に読み込みファイルを作成する方法で、ヘッダとフッタは作れないのでしょうか？ 探し方が悪いのかもしれませんが、どうしても見つけることが出来ません。 書き方の参考サイトや、ソースの書き方を教えて下さい。 よろしくお願い致します。
- ベストアンサー
- HTML
- CSSを使って、背景色をブラウザの縦100％につづかせたいです。
こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100％になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 （ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。） --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100％; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>
- 締切済み
- ホームページ作成ソフト
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- ２コラムのサイトをCSSで指定する方法
以下のようにtest.htmlとtest.cssを作成して２コラム（左がメニュー、右がコンテンツ）のレイアウトのサイトを作成した場合、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。逆に、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合、メニューの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 どのようにすれば、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合でも、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合でも下地のカラー（緑）が表示されないようにできるのでしょうか？ 通常、このような問題はどのように対処するのか教えて下さい。 やはり、コンテンツ部分のデータの行数がメニュー部分のデータの行数よりも多くなると推測して下地のカラーの色（id=”main”のbackground-color）をメニュー部分の色（id="sidebar"のbackground-color）と同じ色にしておくしかないのでしょうか？ただし、このようにすると、推測どおりに行かずに左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 ＜test.htmlコード＞ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/test.css" type="text/css"> </head> <body> <div id="base"> <div id="header"> <p>ヘッダー</p> </div> <div id="main"> <div id="sidebar"> <p>サイドバー</p> </div> <div id="content"> <p>コンテンツ</p> </div> </div> <div id="footer"> <p>フッター</p> </div> </div> </body> </html> ＜test.cssコード＞ body { background-image:url(../img/example.gif); background-repeat:repeat; margin:0px; padding:0px; } #base { border:2px solid #000000; width:740px; margin:0px auto; text-align:left; background-color:#00FF00; } #header { background-color:#FFFF00; width:740px; height:130px; } #sidebar { width:150px; float:left; min-height:100%; background-color:#FF0000; } #content { width:550px; float:right; padding-left:20px; padding-right:20px; background-color:#FFFFFF; } #footer { clear:both; background-color:#FF00FF; height:130px; } 参考サイト等ありましたら、URL教えて下さい。 よろしくお願いします。
- 締切済み
- HTML
- CSSで左に画像、右にテキストを並べたい。
CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 （●=画像 ▲=テキスト） 現在の表示は ●▲ となっているのですが、これを ● ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか？ 色々試したのですが、どうしても下のように改行してしまいます。 ● ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。
- ベストアンサー
- HTML
- 画像のソースを教えてください。
はじめまして。 ホームページ編集のときに使う画像のソースがわからなくて困っています。 画像を左に固定するのは <style type="text/css"> <!--body{background-attachment:fixed; background-image:url(※); background-repeat:repeat-y; background-position:left;}--> </style> でわかっているのですが、左右に固定するソースがわかりません。 恐らく最後のleftの部分を何かに変えるといいのかな？とは思うのですが。 教えていただけるとありがたいです・
- ベストアンサー
- HTML
- CSSについて
下記ののCSSでmainContentの780px を250pxと530pxに分割する方法を教えてください。 DW CS3を使用しています。 よろしくお願いいたします。 <style type="text/css"> <!-- body { background: #666666; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .oneColFixCtrHdr #container { width: 780px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #000000; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ border: 0px solid #000000; text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .oneColFixCtrHdr #header { padding: 0 0px 0 0px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ background-color: 000000; } .oneColFixCtrHdr #header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0 0px; background-color: #444444; } .oneColFixCtrHdr #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ } --> </style>
- 締切済み
- ホームページ作成ソフト
お礼
ありがとうございます。ちょっと待ってくださいね、チャレンジしてみます。またお礼申し上げます。とりあえず、、、、
補足
ORUKA1951 様 遅くなりまして、大変失礼致しました。 なるほど、全部は理解できておりませんが、半分はわかってきました。 ＞fireBug ありがとうございます。インストール致しました。 ＞<ol>(ordered list)でマークアップして こういうやり方もあるのですね。番号は、その番号なのですね。考えもつきません。緑のラインも背景ににセットしても良いし、border-leftを指定しても良いですね。 ＞行番号を入れた背景をセットするか なるほど、そういうことも出来ますね。私が知らないテクニック、沢山ある、、、。 細かい所がまだまだわかりませんが、やってみようと思います。 ご親切に、ありがとうございました。 失礼致します。