ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS Secret Garden: タブのインデント幅を調整する_html/css_WEB-ITnose

CSS Secret Garden: タブのインデント幅を調整する_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:53:04
オリジナル
1578 人が閲覧しました

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

ドキュメントやチュートリアルなど、コードの多い Web ページには、スタイル設定に関するさらなる課題があります。

 要素と <code> 要素は、コード ブロックを表示するために使用されます。次のようなデフォルトのスタイルがあります。デフォルトのタブ幅のコードでは </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="sycode" name="code">pre, code {    font-family: monospace;}pre {    display: block;    margin: 1em 0;    white-space: pre;}
ログイン後にコピー
が表示されますが、これはすべてのコードの表示要件を満たしているわけではありません。最大の問題は、タブはコードのインデントには最適ですが、ブラウザではタブが 8 文字幅で表示されるため、Web では避けられることが多いことです。上に示したように、このような広いインデントによってどれだけのスペースが無駄にされているかを見てください。コードを完全に含めることさえできません。

インデントにタブが使用されるのが好きではありませんか?このトピックは本書の範囲を超えていますが、それについて言及する理由はここで見つけることができます。

解決策

幸いなことに、CSS3 には、これを制御するための新しい CSS プロパティ tab-size があります。引数として数値 (文字) または (まれに) 長さの値を受け入れます。通常、これを 4 (4 文字幅を意味する) または 2 に設定します。これは、インデントを使用する際の最新の傾向であると思われます:

これは、以下の画像で確認できます。

pre {    tab-size: 4;}
ログイン後にコピー
かなり読みやすくなりました。 tab-size を 0 に設定してインデントを完全に無効にすることもできますが、これは良い考えではなく、下の画像でその効果を確認できます。

この属性がサポートされていない場合、追加の効果はありません。デフォルトの非常に醜くて幅の広いインデントが依然として得られますが、これは長年見てきたものと同じです。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート