幸せになりたいけど 頑張りたくない

実家暮らしアラサー女のブログ。「言語化能力を鍛えるため」という大義名分で更新されるが中身はくだらない。たまにコスメ・映画レビュー。

【プログラミング】文系Fラン大卒女(30代)が一から勉強して月5万稼げるようになるか?【30日目】

お久しぶりです。久々にプログラミング勉強しました。こうやってチマチマ時間かけてやるの、最高に効率悪いですね。今回ばかりは私も「コイツついにあきらめたな」って思いました(他人事)。前回の更新で「あと少しだけがんばりま〜す☆」とのたまってから12日も経ってました。ニアイコール2週間。

almostcinefil.hatenablog.com

でもよく再開したなと思います。とりあえず今見ているテックアカデミーの動画「はじめてのレスポンシブWebデザイ入門動画」は終えようと思います。たとえ亀のペースでも。

さて今日は「2-1 文字の装飾」から「2-4 文字に影をつける」まで見ました。主に文字の装飾ですね。文字の装飾はどこがどう変わったのか、わかりやすいのでわりと好きです。

 

 

勉強したこと

text-decoration:文字に下線や取り消し線などをつけられる
text-indent:一行目のインデント幅を指定できる
text-transform:頭文字だけ大文字にしたり、全文字を大文字・小文字にできる
text-shadow:横にズラす幅 縦にズラす幅 ぼかす幅 色 の順で文字につける影を指定する

 

text-decorationの例

・underline
f:id:almostcinefil:20200922183007p:plain

タグのまんま、下線つけるやーつ。

 

・overline
f:id:almostcinefil:20200922183225p:plain

文字の上に線をつけるタグ。あんま使われてるの見たことないですね。

 

・line-through
f:id:almostcinefil:20200922183337p:plain

取り消し線。ブログとかで使われてるの見たことある。

 

・noneの応用
f:id:almostcinefil:20200922183440p:plain

本文の「Lorem ipsum」にのみ<a>タグを適用させています。CSSでこう指定すると、<a>タグを適用した箇所にカーソルをのせると下線が消えます。

 

text-indentの例

・text-indent
f:id:almostcinefil:20200922183657p:plain

一行目だけ右に寄ってますね。そういうことです。

 

text-transformの例

・capitalize
f:id:almostcinefil:20200922184023p:plain

頭文字を大文字にしてくれます。見出し(h1)に適用。一つ前の画像と比べるとわかるのですが、頭文字が大文字になっていないところも大文字になっています。便利〜。

 

・lowercase
f:id:almostcinefil:20200922184343p:plain

すべての文字を小文字に。thee michelle gun elephantは小文字表記派の私はなんとしても覚えなきゃいけないという使命感に燃えています。

 

・uppercase
f:id:almostcinefil:20200922184639p:plain

全ての文字を大文字に。後期のミッシェルは大文字表記多めだった気がするので、ミッシェルファンならこれも覚えましょうね。

 

text-shadowの例

f:id:almostcinefil:20200922184809p:plain

動画通り、影の色を白にしたので、わかりやすくするため背景に色つけました。普通に黒で指定すればいいと思うんだ。

 

・横か縦どちらかだけ指定もできる
f:id:almostcinefil:20200922185026p:plain

横を「0px」、縦を「-4px」に指定するとこんな感じに。下から見上げてる感じになりますね。

 

・二重に影をつくれる
f:id:almostcinefil:20200922185215p:plain

カンマで区切って二つ目の影を指定することもできるそうです。使う機会なさそー。小学生のとき、カラーペンで文字に影つけるの流行ったけど、あれ今考えると読みづらいよなぁ。

 

とまぁ今日はこんな感じでございました。

今まで勉強したことについての書き方が統一されていなかったのですが、しばらくはこの書き方(勉強したことを目次で一目で確認できる書き方)でいこうと思います。いくら記録しても、確認するのに時間かかったら見なくなると思うので、その手間を今から少しでも減らしておきたい。