css

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

投稿日:

Pocket

うもチャーさんです。

 

あなたは字下げをcssでどうやればいいのか?

と疑問に思ってませんか?

 

この記事では、cssを使い、

1行だけ字下げ、複数行を字下げする方法を、

書いています。

 

 

なので、あなたがこの記事を読めば、

字下げをcssで実現できるようになります。

 

そしてあなたのweb制作力がアップするでしょう。

 

そのため、字下げをしたいという場合は、

このまま読んでみてください。

 

 

スポンサードサーチ

字下げをcssでやる方法

 

で早速結論なのですが、

まず1行目だけを字下げしたい場合、

text-indentという記述を書けばokです。

 

そして複数行を字下げしたい場合は、

text-indentと、

padding-leftを記述すればできます。

 

という訳で、それぞれ具体的にみていきましょう。

 

1行目だけ字下げしたい場合

 

まず文章の1行目だけを字下げする場合です。

 

その場合は先ほども書いた通り、

text-indentという記述を書けばokです。

 

書けばどうなるか?ですが、

具体的には、以下の画像のようになります。

 

 

1行目だけ字下げされてますね。

という訳でtext-indentと書けば字下げできます。

 

ちなみにこの1emのemというのは、

1文字分という意味になります。

 

また、em以外にもpxでも指定できまして、

pxだとpx分だけ字下げされていきます。

 

複数行を字下げしたい場合

 

では次に、複数行の字下げをしたい場合、

複数行の字下げとは以下のようなやつですね。

 

css字下げ複数行

その場合は、text-indentと、

padding-leftを指定すればokです。

 

 

すると以下の画像のように、

複数行が字下げされます。

 

 

 

でなんでこうすると複数行字下げされるのか、

その説明を加えます。

 

こちらはまずpadding-leftで、

左部分全体にスペースをとります。

 

そしてそのあとにtext-indentのマイナス指定を使い、

1行目だけを左につめていく形です。

 

 

そうすることで、複数行が、

字下げされたように見えるわけです。

 

やってることとしては、

要は文全体を右に寄せて、1行目だけ左に戻す。

って感じですね。

 

すると全体行を字下げさせたように、

見せることができます。

 

 

複数行の字下げは、箇条書き項目で、

複数行にわたる場合、見た目の問題で、

よく使ったりするので、知っておくと便利ですよ。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

字下げをcssで行うには以下のようにすれば、

okです。

 

1行目だけを字下げしたい場合、

text-indentという記述を書けばokです。

 

 

複数行を字下げしたい場合は、

text-indentと、

padding-leftを記述すればできます。

 

字下げはwebページの制作をする上で、

絶対どっかのタイミングでやることになると思います。

 

 

という訳で、早速あなた自身で、

字下げを試してみましょう。

 

1行の字下げはtext-indentを書けば、

すぐできますので、まずはそこから初めてみてください。

 

 

するとあなたのweb制作力が、

アップして、仕事獲得や、スキルアップに繋がりますよ。

 

それでは読んでもらってありがとうございました。

 

チャーさん

-css


スポンサードサーチ

関連記事

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

cssの書き方class編(初学者向け)

どうも、チャーさんです。 この記事では、cssの書き方を書いています。   具体的にはclass、classを複数使う方法、 idについてとcss書き方についての内容なので、 この記事を読め …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

positionで縦に中央寄せする方法はこちらです。

どうも、チャーさんです。   あなたはpositionで縦に中央寄せをしたいのに、 できずに困っていませんか?     この記事ではpositionで要素を縦に、 中央寄 …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssのborderを初学者でもわかりやすいよう説明します

どうも、チャーさん(@chaa___san)です。   あなたはcssのborderとは何か? と疑問に思っていませんか?   この記事ではcssのborderについて、 初学者で …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。