元ダメ人間がパソコンを一から学び、独学でエンジニアに。YouTubeではアップスターツで動画投稿をしています。2017年9月12日FacebookTwitterはてブPocketFeedlyこんにちは!UPSTARTSのSベンです!今回は「テキスト関連」のスタイルについての内容です。こちらのhtmlにスタイルをあてていきます。上記が主なテキスト関連のプロパティになります。一つずつ見ていきましょう。text-alignまずはtext-alignですが、こちらは行揃えの位置を指定するプロパティになります。p要素にスタイルをあてます。center;}今回はcenterと指定していますので、p要素の文字が中央に位置するようになります。他にもleftやrightを指定することができます。leftなら左寄り、rightなら右寄り、centerなら中央揃えになります。text-decoration次にtext-decorationは、テキストに線を付ける事ができるプロパティです。こちらもp要素にスタイルをあてます。underline;}underlineと指定すると、テキストに下線が付きます。line-throughと指定すると、打消し線を付けることが可能です。line-height次にline-heightは、行の高さを指定するプロパティです。数値のみで指定する方法と、pxなどの単位を付けて高さを指定するできます。今回はpxで指定してみます。50px;}こうするとp要素の行の高さが50pxにすることができます。vertical-align次にvertical-alignは、縦方向の揃え位置を指定するプロパティになります。デフォルトはテキストの下部分のベースラインに合わせるようになっています。今回は画像の位置を調整してみたいと思います。middle;}middleを指定するといい感じに、テキストに合わせて位置を調整することができました。そのベースラインに対してtopなら上揃えmiddleなら中央揃えbottomなら下揃えなどを指定できます。今回は「テキスト関連」のスタイルについてやっていきました。次回は「リスト関連」についてです。アップスターツのSベンです。UPSTARTSのSベンです。