Web業界に入って約半月。バイトやけど。実働は10日ぐらいやけど。
多少コーディングの仕事も振られるようになってきた。
で、自分の備忘録的な意味も含めて、学んだこと、気になったことを書いとこ。
今回はCSSのtext-indent。
text-indentとは
まず、インデントとは。
Microsoft Wordとかテキストエディタの機能でもあるんで、知ってる人も多いかと思うが、字下げ。
WebページをPCで見たら1行で表示されるけど、スマホで表示すると複数行になったりする。
この時、1行目だけ1文字分字下げされてたら、段落として認識しやすい。
注釈（※など）とか箇条書き（・など）とか使う時は、逆に2行目以降を字下げすると、一つのまとまりとして認識しやすい。
そのためのCSSがtext-indent。
使い方分からんくてググる
職業訓練の時には使ってなかったプロパティ。
とりあえずググる。
上位に出てきた、オンラインのプログラミングスクールが公開してるページを参照。
使い方は簡単。
text-indent: 1.0em；
ってすると、1行目が1文字分字下げされる。で、
text-indent: -1.0em;
ってすると2行目以降が1文字分字下げされるという説明。
実際やってみる
今回は注釈。※使ってるから、2行目以降を字下げ。
説明読んで、理解したと思てやってみる。
ん？なんかちゃう。
テーブルの中で注釈（※）を使ってんやけど、※がテーブルの罫線を突き破っとる。
なんでや？
もっかい、プログラミングスクールのページを熟読する。
自分がメンテナンスしてるページの他のページにtext-indent使ってるとこを探して凝視する。
あ！
margin-left: 1.0em とか、 padding-left: 1.0em
って書いてる。
その説明は全くない・・・
分かりやすい説明としては
正しい説明としては以下。
って書きたいとこやが、そんな言うほどHTML/CSSに精通してる身分でもないので。
素人にとって分かりやすい説明としては。って表現にしとこ。
text-indentはあくまでも、
・複数行にわたる文章の1行目の開始位置を調整するもの
・プラスの数値を指定したら字下げ（開始位置が右に移動する）
・マイナスの数値を指定したら字上げ（こんな単語は無い気はするが、開始位置が左に移動する）
・マイナスを指定して字上げした時は、本来の文章位置より左に開始位置が来るため、margin-leftやpadding-leftを使って文章全体の位置を調整する
って感じかな。
整理ついた。
自分の中では。
ほな。