お久しぶりです。久々にプログラミング勉強しました。こうやってチマチマ時間かけてやるの、最高に効率悪いですね。今回ばかりは私も「コイツついにあきらめたな」って思いました(他人事)。前回の更新で「あと少しだけがんばりま〜す☆」とのたまってから12日も経ってました。ニアイコール2週間。
でもよく再開したなと思います。とりあえず今見ているテックアカデミーの動画「はじめてのレスポンシブWebデザイ入門動画」は終えようと思います。たとえ亀のペースでも。
さて今日は「2-1 文字の装飾」から「2-4 文字に影をつける」まで見ました。主に文字の装飾ですね。文字の装飾はどこがどう変わったのか、わかりやすいのでわりと好きです。
勉強したこと
text-decoration:文字に下線や取り消し線などをつけられる
text-indent:一行目のインデント幅を指定できる
text-transform:頭文字だけ大文字にしたり、全文字を大文字・小文字にできる
text-shadow:横にズラす幅 縦にズラす幅 ぼかす幅 色 の順で文字につける影を指定する
text-decorationの例
・underline
タグのまんま、下線つけるやーつ。
・overline
文字の上に線をつけるタグ。あんま使われてるの見たことないですね。
・line-through
取り消し線。ブログとかで使われてるの見たことある。
・noneの応用
本文の「Lorem ipsum」にのみ<a>タグを適用させています。CSSでこう指定すると、<a>タグを適用した箇所にカーソルをのせると下線が消えます。
text-indentの例
・text-indent
一行目だけ右に寄ってますね。そういうことです。
text-transformの例
・capitalize
頭文字を大文字にしてくれます。見出し(h1)に適用。一つ前の画像と比べるとわかるのですが、頭文字が大文字になっていないところも大文字になっています。便利〜。
・lowercase
すべての文字を小文字に。thee michelle gun elephantは小文字表記派の私はなんとしても覚えなきゃいけないという使命感に燃えています。
・uppercase
全ての文字を大文字に。後期のミッシェルは大文字表記多めだった気がするので、ミッシェルファンならこれも覚えましょうね。
text-shadowの例
動画通り、影の色を白にしたので、わかりやすくするため背景に色つけました。普通に黒で指定すればいいと思うんだ。
・横か縦どちらかだけ指定もできる
横を「0px」、縦を「-4px」に指定するとこんな感じに。下から見上げてる感じになりますね。
・二重に影をつくれる
カンマで区切って二つ目の影を指定することもできるそうです。使う機会なさそー。小学生のとき、カラーペンで文字に影つけるの流行ったけど、あれ今考えると読みづらいよなぁ。
とまぁ今日はこんな感じでございました。
今まで勉強したことについての書き方が統一されていなかったのですが、しばらくはこの書き方(勉強したことを目次で一目で確認できる書き方)でいこうと思います。いくら記録しても、確認するのに時間かかったら見なくなると思うので、その手間を今から少しでも減らしておきたい。