半歩ずつでも前に進めば変わっていく

Kozue Blog

プログラミング 学習 記録

プログラミングで月収5万円になるまでの記録13日目

更新日:

こんばんは、こずえです。
プログラミング学習記録13日目です。
文字の装飾について学習しました。

所感:気になる動画を観始めて学習をはじめるのがついつい遅くなってしまうなんてこともあるかと思います。(私です)
学習をしてから観るのが一番ですが、観ている時にできるだけ早く学習に移る取り組みとして、私は「区切りが良い所で一時停止をして、続きを学習後のご褒美にする」ということをしています。

合計学習時間

前回までの時間:20.00[h]
今回の時間:2.00[h]
合計時間:22.00[h]

学習内容

はじめてのレスポンシブWebデザイン入門講座

文字の装飾

線を引く

「text-decoration」を使用する。
以下の値を指定する。

  • none:何もつけない
  • underline:下に線をつける
  • overline:上に線を付ける
  • line-through:取り消し線をつける
text-decorationの確認(underline)
text-decorationの確認(aタグ)

所感:前回調べてメモに書きましたね!

文章を見やすくする装飾

  • text-indent:1行目のインデントを指定する(空白が挿入されるわけではない)
  • text-transform:大文字/小文字のコントロール

text-transformは以下の値を指定する

  • none:デフォルト
  • capitalize:単語の先頭文字を大文字にする
  • lowercase:全てを小文字で表示する
  • uppercase:全てを大文字で表示する

text-transformとfont-variantの違い

text-transform:大文字は大文字(小文字は小文字)のサイズ
font-variant:小文字→大文字は小文字のサイズ

text-indent、text-transformの確認

文字に影をつける

「text-shadow」を使用する。
影は複数指定することもできる。
値は「横方向のズレ」「縦方向のズレ」「ぼかしの幅」「色」の4つを指定する。
影を複数指定する場合は上記4つの値の後に「,」で区切り値を指定する。

text-shadowの確認

-プログラミング, 学習, 記録
-, , ,

Copyright© Kozue Blog , 2019 All Rights Reserved Powered by STINGER.