Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

【44】タブ文字の幅を決める tab-sizeプロパティ

最終更新日:2018年11月08日  (初回投稿日:2018年11月08日)

tab-sizeプロパティは文字通り「タブ(Tabキーを押してできるスペース)」の「幅」を決めます。

ですのでこのプロパティは、
・<pre>要素と <code>要素を使ってソースコードを表示する時
・CSS の「white-space: pre」「white-space: pre-wrap」でテキストを表示する時

に使います。
要は「タブ」がそのまんま表示される時に「タブ」の表示幅を自由に設定できるプロパティです。

<pre>要素と <code>要素については、
[31] code要素 と pre要素 でソースコードを表示しよう
CSS の「white-space: pre」「white-space: pre-wrap」については、
【37】空白を詰めるかどうか決める white-spaceプロパティ をご覧ください。

参考:
CSS Text Module Level 3 | W3C Working Draft
tab-size - CSS | MDN

tab-sizeプロパティの値

tab-sizeプロパティの値は以下のものがあります。

tab-sizeプロパティの値
単位なし数値 単位無しで数値で「半角スペース数」を指定。8 がデフォルト値。
マイナスの値は指定できません。
単位あり数値 「px」「em」などの単位を付けて幅を指定します。
マイナスの値は指定できません。
(この値は W3C で「at-risk(リスクが有るので勧告候補で削除されるかも)」扱いになっています。)
グローバル値 tab-size: inherit; 親の値を継承(コレ書かなくても継承するけど)
tab-size: initial; 継承した親の値を解消しデフォルト値に戻す
tab-size: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 すべての要素

このプロパティは、Chrome、Opera は完全対応。Firefox は「ベンダープレフィックス(-moz-)」付きで対応。
Safari(iOS Safariも)は「単位あり数値」には未対応です。
IE11, Edge は対応していません。(2018年11月時点)
参考:Can I Use - tab-size

tab-sizeプロパティの指定サンプル

tab-sizeプロパティの値を使ってみます。
サンプルの白地の部分は <pre>、<code>要素。その行頭の空白部分がタブです。
フォントサイズは16px(font-size:1rem)で作っています。

tab-size: 未指定( = 8)
	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ
tab-size: 4
	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ
tab-size: 3em
	←タブ1つ
      ←比較のために半角スペース6個
		←タブ2つ
tab-size: 16px
	←タブ1つ
  ←比較のために半角スペース2個
		←タブ2つ

サンプルのソースコードはこちら。

<div class="mihon">
<b>tab-size: 未指定( = 8)</b>
<pre><code>	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:4;tab-size:4">
<b>tab-size: 4</b>
<pre><code>	←タブ1つ
        ←比較のために半角スペース8個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:3em;tab-size:3em">
<b>tab-size: 3em</b>
<pre><code>	←タブ1つ
      ←比較のために半角スペース6個
		←タブ2つ</code></pre>
</div>

<div class="mihon" style="-moz-tab-size:16px;tab-size:16px">
<b>tab-size: 16px</b>
<pre><code>	←タブ1つ
  ←比較のために半角スペース2個
		←タブ2つ</code></pre>
</div>
<style>
.mihon {
	color:black;
	font-size:1rem;
	line-height:1.6;
	background:#ffc;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:.6em;
	}
.mihon b {
	display:block;
	color:#579961}
.mihon pre {
	background:white;
	padding:0}
</style>

ソースコードをよく掲載するサイトなら、タブのサイズを変える必要があるときには便利ですね。
一般的なウェブサイトでは、この tab-sizeプロパティはあまり使わないかもな〜?

次回予告

さて次回からは、ライティングモードについて見ていきましょう。

ライティングモードは、W3C の CSS Writing Modes Level 3 でまとめられていて、 テキストの向き(横書き・縦書き・左から右・右から左 など)を指定するためのプロパティ群です。

次回はまずは、縦書きの表示もできる writing-modeプロパティを使ってみよう。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

関連記事

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2018/11 | 12
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.