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にまとめました。ご利用ください)

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

【38】インデント(字下げ)を指定する text-indentプロパティ

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

text-indentプロパティは、テキストの「インデント(字下げ)」を指定します。

インデント(字下げ)とは、新聞や本などで、文章の段落ごとに1行目の最初の文字を下げて「ここから新しい段落」とわかりやすくすること。
日本語以外でも行われている習慣です。

プログラミングでも「字下げ」を使って構造をわかりやすくしたりしますが、このプロパティでは、そっちじゃなく普通の文章に使う「字下げ」を扱います。

text-indentプロパティを使うと、インデントは「マージン」として扱われるんだって。
「マージン」なので「マイナスの値」も使えます。
詳細はこちら→【11-3】はみ出て便利♪ ネガティブ・マージン(Negative Margin)

本日のINDEX
  1. text-indentプロパティの値
  2. text-indentプロパティの指定サンプル
  3. text-indent: -9999px はSEOスパムという説

参考:
CSS Text Module Level 3 | W3C Working Draft
text-indent - CSS | MDN

text-indentプロパティの値

text-indentプロパティの値は 。

text-indentプロパティの値
単位付き数値 0 がデフォルト値。
単位を付けた数値で指定。マイナスの値も使えます
パーセンテージ 親要素の幅(width)に対してのパーセンテージで指定します。
キーワード each-line:<br>要素などで強制的に改行した直後の行頭もインデントします。
hanging:インデントされる行が逆転します(1行目以外がインデントされる)
*キーワードは単独で使えません。必ず「単位付き数値」か「パーセンテージ」と一緒に使います。
グローバル値 text-indent: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-indent: initial; 継承した親の値を解消しデフォルト値に戻す
text-indent: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 テキストを含む要素

「キーワード」は単独では使えず必ず「単位付き数値」か「パーセンテージ」と一緒に使います。こんなかんじです↓

text-indent: 1em each-line; /*強制改行された後の最初の行も 1em下げる*/
text-indent: 1em hanging; /*1行目以外の行を 1em下げる*/
text-indent: 1em hanging each-line; /*キーワードは両方指定することもできます*/

この2つのキーワードは CSS3 から追加されたものなんですが、今のところ対応しているブラウザが ほぼ無いようです。(参考:Can I use / 2018年8月記)
Chrome はフラグを使えば使えるようですが。

text-indentプロパティの指定サンプル

とにかく、text-indentプロパティの値をぜんぶ使ってみます。
text-indentプロパティを指定した要素内の「最初の行の先頭」に、指定したサイズ分インデントします。<br>で強制的に改行した行の始めはインデントしません。

キーワード「each-line」を併用すれば <br>で改行した行の始めにも適用されるはずですが、実装しているブラウザは今のところ無いようです(2018年8月記)

text-indent: 未指定(= 0 )

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: -1em

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 10%

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em each-line

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em hanging

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

text-indent: 1em each-line hanging

このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。

キーワードで他を指定しない限り、要素の最初の行だけに影響します。

キーワードは、やっぱダメそうですね(2018年8月記)

サンプルの HTMLはこんなかんじです。text-indent はインラインで指定しています。

<div class="mihon">
<b>text-indent: 未指定(= 0 )</b>
<p>
このプロパティは、ブロック内のテキストの各行に適用されるインデント(字下げ)を指定します。<br>
字下げは、行ボックスの始端辺に適用されるマージンとして扱われます。</p>
<p>
キーワードで他を指定しない限り、要素の最初の行だけに影響します。</p>
</div>

<div style=" text-indent:1em" class="mihon">(テキスト省略)</div>
<div style=" text-indent:-1em" class="mihon">(テキスト省略)</div>
<div style=" text-indent:10%" class="mihon">(テキスト省略)</div>
<div style=" text-indent:1em each-line" class="mihon">(テキスト省略)</div>
<div style=" text-indent:1em hanging" class="mihon">(テキスト省略)</div>
<div style=" text-indent:1em each-line hanging" class="mihon">(テキスト省略)</div>

サンプルの CSSはこちら。

.mihon {
	color:black;
	background:#ffc;
    font-size:15px;
    line-height:1.6;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 .7em;
	width:60%}
.mihon p {
	margin:.7em 0;
	padding:0}
.mihon b {
	display:block;
	color:#579961;
	text-indent:0}

text-indent: -9999px はSEOスパムという説

Webフォントが無い時代、タイトル部分(<h1>〜<h6>)に「タイポグラフィ的にふさわしい書体にするため」に画像を使うことがありました。
CSSで背景画像にして、その上にテキストを置き(これはSEOのため)、テキストが邪魔なので「text-indent: -9999px(または text-indent: 9999px)」として、テキストを画面から大きくずらして表示しないようにしたんです。
こんなかんじ↓

<!--これはあまり使わないほうが良い例です-->
<h2 class="title1">テキスト</h2>
<style>
.title1 {
	text-indent: -9999px; /*これでテキストが左に9999pxずれる(=読めない)*/
	background: url(image/title1.png) no-repeat;
	overflow: hidden;
	}
</style>

なんで「9999px」なのかは不明。(5桁は無理だったんですかね?)
ユーザーがブラウザのウィンドウサイズをどんなに大きくしても、画面に現れないほどのインデントが必要だったわけです。私も以前はよく使っていました。

ただ、9999pxも無駄にスペースを作るので、何個もあればページの読み込みも遅くなりますし、何よりも Googleが「隠しテキスト・隠しリンク」をSEOスパムと判断するので、あまり推奨されない使い方だと言われていました。
(Googleではインデントを使った方法をまったくダメとは言っておらず、グレーなかんじ)
「text-indent: 100%」を使う方法もあり、これは親要素の幅の100%と指定することで親要素の外に出しているので、まあ、少しパフォーマンス的には良いようです。

今は Webフォントがあるので、わざわざ画像を使わなくても ふさわしいフォントを選べるようになってきましたね。
タイトルを背景画像にすると、デバイスによっては表示がおかしく(解像度が低いなど)なったりするので、テキストのほうが扱いが楽です。

Webフォントについてはこちら→(ちょっとメモ)@font-face で Webフォントを使おう

次回予告

さて次回は、word-spacingプロパティを使おう。
これは、単語どうしの間隔を指定するプロパティです。日本語でも単語と単語の間に「半角スペース」を入れれば反応します。

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

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

関連記事

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

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

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

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2018/08 | 09
- - - 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 31 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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