Webコーディングをする際に、文章の先頭に「・」や「※」などの記号を記述して、2行目以降の先頭1文字を下げたいときってありませんか？
例えばこんな感じ。
[text-indent]を使わない例です。
では次にこちら。
[text-indent]を使います。
どうでしょうか。文章の先頭が綺麗に揃っていますね。
こんな感じで、[text-indent]を使うと2行目以降の先頭1文字を下げることができます。しかも、たった2行で。
それでは、[text-indent]を使って、2行目以降の先頭1文字を下げる方法をご紹介します。
[text-indent]の使い方
HTMLとCSSの記述は以下のとおりです。コピペで使えます。
[text-indent]の解説
CSSでの設定はわずか2行です。
[em]は1文字分の大きさを表す単位です。
[padding-left]で、全行の左側に1文字分の余白を作ります。
次に、[text-indent]で[-1em]と設定することで、最初の行だけ左に移動させることができます。
『今すぐ使える！CSSレシピブック』
[text-indent]を使って、2行目以降の先頭1文字を下げる方法をご紹介しました。
Web制作の進化は本当にスピードが速く、中でもCSSの進化は非常に速く感じます。とはいえ、CSSの場合はサポートブラウザのこともあり、最新のものだけを使用すればよいというものではありません。
CSSの最近の情報やテクニックを解説し、古いブラウザから新しいブラウザまで対応したさまざまな実装方法を詳しく解説した制作者必携の一冊を紹介します。
本書はCSSを使った実用的なテクニック、そのテクニックのメリットとデメリットなど、実務レベルの知識を学ぶことができます。そのため、入門的な解説は一切ありません。
438ページの大ボリュームで、セレクタ、タイポグラフィ、レイアウト、シェイプ、ユーザーエクスペリエンス、コンポーネント、アニメーションなど、実務で使えるCSSのテクニックが満載です。
