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

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

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

no image

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

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

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

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

no image

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

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

no image

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

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

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

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

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

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

no image

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

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

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

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

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

最新記事

チャーさん

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

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

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