2021年1月14日CSSの「text-indent」の使用方法と用途について解説していきます。注意点2行目以降の字下げを行う「text-indent」で文字を揃えるインデントとは?インデントとは、文字の字下げを意味します。これは、通常のウェブブラウザで見る「横書き」ではイメージがしずらいので、国語の教科書のような「縦書き」の文章配置をイメージしていただくのが良いと思います。その名残により、Webの場合でも「文字の字下げ」と呼ばれていますが、「text-indent」では、「開始文字(1行目)を左右にずらす事ができる」と理解しておきましょう。「text-indent」の用途それでは、どのようにテキスト「text-indent」を利用するのでしょうか?Web制作の場合、リストなどを使用すると初期設定で1行目にインデントが付いているし、その設定の解除も行えますので、はっきり言って「text-indent」はそこまで活用場面はありませんが、例えば「利用規約」など、複数の字下げ文章が続いたり、大量の文章を一気に操作する際には非常に効果的なCSSとなります。「text-indent」の使用方法それでは、「text-indent」を使用していきましょう。「text-indent」の使用はとても簡単です。値に数値を入力すればOKです。em」などが可能ですが、「em」は1文字分の大きさを表しますので、「em」を利用するのがスタンダードな方法かと思います。続きを見るメモ「text-indent」は実装が難しいのではなく、自分のやりたい事をネット検索でどう検索すればいいのか、という事の方が難しいようにも思いますね。実際に実装してみましょう。auto;">あああああああああああああああああああああ</p>実装例あああああああああああああああああああああこのように、1文字分ずらす事ができました。今回例で出した「利用規約」などのことを考えると、これとは逆の表示にしたいので、今度は負の値で設定します。auto;">あああああああああああああああああああああ</p>実装例あああああああああああああああああああああこのように、2行目以降の文字を1文字分字下げする事ができました。注意点しかし、ここで注意点です。以下の例では、わかりやすいように枠線ブロックの中に文字を用意します。">あああああああああああああああああああああ</p>実装例あああああああああああああああああああああこの事でわかるのは、文字は2行目が動いてるのではなく、1行目が飛び出している形になっているのです。この事は非常に重要なので覚えておきましょう。「text-indent」は2行目に以降に影響を与えるのではなく、1行目に与える影響になります。2行目以降の字下げを行うでは、2行目以降の字下げを行いたい場合は、どうすればいいでしょうか?それには「padding」を利用しましょう。">あああああああああああああああああああああ</p>実装例あああああああああああああああああああああ「padding」で一度1em分の空白を作り、「text-indent」で1行目をそこに突っ込ませるというイメージになります。「text-indent」には、他にも値に付属させる事が可能です。「each-line」という値の設定を追加すると、2行目以降にも1行目と同じ効力が当たるようになります。#000;">あああああああああああああああああああああ</p>実装例あああああああああああああああああああああ2行目以降も、1行目同様の影響が出ていますが、はっきり言ってこれに関しては「padding」などで十分対処できる問題ですので、あえて「text-indent」を使用する必要性はないと言えます。auto;">1.あああああああああああああああああああああ</p>実装例1.あああああああああああああああああああああ2行目の文字が上の文字より微妙にズレてますよね。これは文字数の問題になります。数字とドットがある事で、1文字分では文字幅が足りなくなってます。これに関しては適宜数値を調整していくしかありませんので、数値の調整を行いましょう。auto;">1.あああああああああああああああああああああ</p>実装例1.あああああああああああああああああああああまとめいかがでしたでしょうか?CSSの「text-indent」を利用した見せ方の解説をして参りました。前述の通り、登場場面としては少ないかもしれませんが、いざという時に役に立つ機能ですので、頭の片隅にでも入れておきましょう。ロゴデザイン作成方法の教科書。Cloud]2ロゴデザイン作成方法の教科書。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。入門講座WordPressの実践的本格カスタマイズの方法や修正の注意点などを解説!【ホームページ制作入門講座】PREV[Illustrator]JRと私鉄の違いを含めた路線図の作成方法解説。スキルアップ講座ロゴデザイン作成方法の教科書。error]に遭遇した時の対処とデータ復元方法2021/4/12YouTubeTwitter運営者[通称]とも、[職業]グラフィック・Webデザイナー、[経歴]28歳の頃からデザイン業界に入り、6.5年間印刷会社のデザイナーとして働き、2018年5月より独立し、印刷・Web制作業を主体に営業を行っております。