39 lines
2.4 KiB
Markdown
39 lines
2.4 KiB
Markdown
|
---
|
||
|
|
title: スーパーpre記法で縦スクロールバーを出したい
|
||
|
|
author: kazu634
|
||
|
|
date: 2008-02-09
|
||
|
|
url: /2008/02/09/_847/
|
||
|
|
wordtwit_post_info:
|
||
|
|
- 'O:8:"stdClass":13:{s:6:"manual";b:0;s:11:"tweet_times";i:1;s:5:"delay";i:0;s:7:"enabled";i:1;s:10:"separation";s:2:"60";s:7:"version";s:3:"3.7";s:14:"tweet_template";b:0;s:6:"status";i:2;s:6:"result";a:0:{}s:13:"tweet_counter";i:2;s:13:"tweet_log_ids";a:1:{i:0;i:3709;}s:9:"hash_tags";a:0:{}s:8:"accounts";a:1:{i:0;s:7:"kazu634";}}'
|
||
|
|
categories:
|
||
|
|
- つれづれ
|
||
|
|
|
||
|
|
---
|
||
|
|
<div class="section">
|
||
|
|
<blockquote title="pre記法で縦・横スクロールバーをつける方法 - 毛の生えたようなもの" cite="http://d.hatena.ne.jp/gomi-box/20071023/1193112074">
|
||
|
|
<p>
|
||
|
|
はてなのある特定のテーマにおける「pre記法」ではそのpre領域で縦スクロールがつかず、下にただ伸びて行くのがデフォルトとなっているものがある。このCSSのまま長い文章、例えば長いコードをpreタグ内に書くと日記が「べろりん」と長くなってしまう。それを解消するためにCSSをいじってみた。 結局はやさんの協力により以下を追加すればよいことが判明した。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<pre class="syntax-highlight">
|
||
|
|
<span class="synSpecial">.</span><span class="synStatement">body</span> <span class="synSpecial">.</span>section <span class="synStatement">pre</span> <span class="synIdentifier">{</span>
|
||
|
|
<span class="synComment">/* pre領域の最大高さ */</span>
|
||
|
|
<span class="synType">max-height</span>: <span class="synConstant">30em</span>;
|
||
|
|
<span class="synComment">/* 領域をはみ出た場合の処理。autoで通常はスクロールバーが出現 */</span>
|
||
|
|
<span class="synType">overflow</span>: <span class="synType">auto</span>;
|
||
|
|
<span class="synIdentifier">}</span>
|
||
|
|
</pre>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
ちなみに「.body .section」がないとうまくいかないようです。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
<cite><a href="http://d.hatena.ne.jp/gomi-box/20071023/1193112074" onclick="__gaTracker('send', 'event', 'outbound-article', 'http://d.hatena.ne.jp/gomi-box/20071023/1193112074', 'pre記法で縦・横スクロールバーをつける方法 – 毛の生えたようなもの');" target="_blank">pre記法で縦・横スクロールバーをつける方法 – 毛の生えたようなもの</a></cite>
|
||
|
|
</p>
|
||
|
|
</blockquote>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
ありがたい情報(__)
|
||
|
|
</p>
|
||
|
|
</div>
|