text-indent概要CSSプロパティ「text-indent」は、文章などの1行目のインデント(字下げ)を定義します。指定できる値として、数値、パーセント値、マイナス値を指定することができます。文章の段落として入れる場合は、1文字分のスペースを空けたいので、単位は「px」や「em」を使用します。指定する単位の振る舞いは以下の通りです。説明pxpxとは画面の1画素(ピクセル)のサイズを1とする単位です。実際に表示されるサイズはモニターの解像度により変化します。em親要素を起点とする文字の高さを1とする単位です。1emは1文字分となります。%親要素の幅を基準に割合を%値で指定した単位です。単位についてですが、CSS3から新しく「rem」という単位を使用できるようになりました。em(ルートエム)の略でhtmlを起点としたサイズを継承します。「em」は環境によって大きさが変わる相対単位です。詳細を説明していますので、確認してみてください。様々な単位の値を指定してみます。行頭のスペースの違いを確認してみてください。class="px">この文章の1行目の始まりに「10px」のインデントをつけます。これは2行目以降には反映されません。class="percent">この文章の1行目の始まりに「10%」のインデントをつけます。これは2行目以降には反映されません。class="em">この文章の1行目の始まりに「1em」のインデントをつけます。これは2行目以降には反映されません。class="rem">この文章の1行目の始まりに「1rem」のインデントをつけます。これは2行目以降には反映されません。1rem;}</style>実装例として、マイナス値を指定して、ぶら下げインデントを実装してみます。プロパティで1文字分左にずらしています。値を基準にしたスペースがとられます。class="px14">※文字サイズが14pxの文章を書きました。14pxの文字1つ分のインデントが作られています。class="px20">※文字サイズが14pxの文章を書きました。14pxの文字1つ分のインデントが作られています。1関連CSSプロパティwhite-spacetext-transformtext-shadowtext-overflowtext-decorationtext-decoration-styletext-decoration-linetext-decoration-colortext-align-lasttext-indenttext-align@ルール@keyframesUI関連cursoroutlineoutline-offsetoutline-widthoutline-styleoutline-colorカウンターcounter-incrementcounter-resetテーブル(表)テキスト関連white-spacetext-transformtext-shadowtext-overflowtext-decorationtext-decoration-styletext-decoration-linetext-decoration-colortext-align-lasttext-indenttext-alignフィルター効果filterフォーマットline-heightletter-spacingフォント@font-facefontfont-size-adjustfont-stretchfont-familyfont-sizefont-variantfont-stylefont-weightフレックスボックスフロートclipfloatclearボックスモデルwidthheightmin-widthmin-heightmax-widthmax-heightvisibilitybox-sizingoverflowoverflow-yoverflow-xマージンmarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-leftメディアクエリ@mediaリストlist-style-imagelist-style-typelist-style-positionlist-style変形transitiontransition-timing-functiontransition-propertytransition-delaytransition-durationtransformtransform-styletransform-origin段組みcolumnscolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-fillcolumn-gapcolumn-widthcolumn-count罫線borderborder-styleborder-colorborder-widthborder-topborder-top-styleborder-top-colorborder-rightborder-top-widthborder-right-styleborder-right-colorborder-right-widthborder-bottomborder-bottom-styleborder-bottom-colorborder-bottom-widthborder-leftborder-left-styleborder-left-colorborder-left-widthborder-imageborder-image-sourceborder-image-widthborder-image-sliceborder-image-outsetborder-image-repeatborder-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-right-radiusborder-top-left-radius背景backgroundbackground-imagebackground-attachmentbackground-clipbackground-colorbackground-originbackground-repeatbackground-size色opacity色と透明度color装飾box-shadow記述法backface-visibilityvertical-alignuser-select配置displayrightlefttopbottompositionz-index「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。