Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

cssでボタンをレスポンシブ対応にする方法(微調整必要なしで楽ですよ)

どうも、チャーさんです。   あなたはcssでボタンをレスポンシブにしたい、 かつブレークポイントごとに微調整する手間ひまの、 必要のないボタンを作る方法はないかと思ってませんか? &nbs …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

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

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

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssの書き方でフォントサイズについて知りたいならこの記事

どうも、チャーさんです。   この記事では、cssでフォントサイズ (文字の大きさ)を変える方法を書いてます。     なので、この記事を読めば、 あなたはフォントサイズ …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

最新記事

チャーさん

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

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

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