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

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

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

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

no image

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

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

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

最新記事

チャーさん

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

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

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