A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
>display:table;を使っても意図する表現ができました!
display:inline-block;
だと、インライン(行内要素)ですから、pre(ブロック要素)を偏光してしまいます。そのためサンプルで示したものをdisplay:inline-block;にすると横に並んでしまうはずです。
No.2
- 回答日時:
pre{display:inline-block;}
でも良いのですが、それだと横幅の短いテキストのpre要素が連続する場合は横に並んでしまいます。
そこで
pre{display:table;}
を使うことが多いですね。
[実例]
pre.CSS{display:table;border:solid 1px gray;padding:0.4em 0;counter-reset:code;}
pre.CSS code{line-height:1.6em;margin:0;padding:0.4em;}
pre.CSS code:before{
content:counter(code,decimal-leading-zero)" ";
counter-increment: code;
}
<section>
<pre class="CSS"><code>h1{font-size:1.8em;}</code>
<code>h2{font-size:1.5em;}</code>
<code>h3{font-size:1.3em;}</code>
<code>h4{font-size:1.2em;}</code>
<code>h5{font-size:1.1em;}</code></pre>
<pre class="CSS"><code>h1,h2,h3,h4,h5,h6,p,ol,ul,dl{margin:0;line-height:1.6em;}</code>
<code>p,dd{text-indent:1em}</code>
<code>table{margin:5px;border:solid 1px gry;border-collapse:collapse;}</code>
<code>table th,table td{border:solid 1px gray;padding:0.1em 0.2em;}</code>
<code>div.note mark{background-color:yellow;color:red;padding:0 0.5em;}</code>
<code>div.note.space{line-height:2em;}</code></pre>
</section>
この回答へのお礼
お礼日時:2015/08/09 04:05
ご指導ありがとうございます。
細かなコードまで頂き感謝感激です。
display:table;を使っても意図する表現ができました!
ありがとうございます♪
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テキストエリア内の文字の装飾
-
Powered by FC2.comの文字サイズ
-
Format 関数 表示書式指定文字...
-
CSSでのフォントの種類指定
-
■(四角)の記述
-
jquery.validationEngine.jsカ...
-
文字の色をスタイルシートで設...
-
FC2ブログの改行幅の質問です。
-
リンク文字
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
ペイント3Dのテキストサイズ変更
-
PDFファイルを開かずに印刷...
-
outlook 文字を揃えたい。tab...
-
alertで表示させる文字サイズは...
-
フォルダ内の写真を画面幅にあ...
-
ユーザーフォーム スクロール...
-
EXCEL VBA 印刷プレビューダイ...
-
似ているフォント(Win⇔Mac)
-
CSSで文字に青や紫の枠線が出て...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HLMT、CSSについて相談です。 ...
-
文字の位置、上下のマージンが...
-
リストの前後の行間をなくす方...
-
Format 関数 表示書式指定文字...
-
background-color: #ddd;の意味...
-
HTMLで特定の文字だけ色を変え...
-
全角半角含めて等幅で表示したい
-
リンク文字
-
テキストボックス途中で切れて...
-
テキストエリア内の文字の装飾
-
jquery.validationEngine.jsカ...
-
Excel VBA メール作成について ...
-
fontサイズ指定の ”-(マイナ...
-
特定の文字のみcssを適用するに...
-
Excel VBA メール作成について ...
-
ホームページビルダー作成HPがi...
-
API Sleep関数について
-
iframe 文字化け
-
FireFoxで"display = none"を指...
-
アコーディオンメニューが思う...
おすすめ情報