ピュアチャ〜ジ

広告代理店のディレクターを辞め、マレーシアに飛び立ちました。ふわふわ生活して、やっぱり収入を上げて豊かに人生にしたい!と思いプログラミング学習を始めました!フリーランスまでの道のりを描くブログです

Webデザイン勉強51日目の成長報告!

こちらのWebサイトは移転しました。


[ピュアチャ〜ジ]

はいどうも!

 

昨日16時間寝たのでだいぶん体力回復しました!笑

 

今日の作業報告です!

 

HTMLファイル↓

f:id:terushi-diary:20191011192744p:plain

CSSファイル↓

f:id:terushi-diary:20191011192720p:plain

【①セクションタグの中のactivityタグにだけ装飾をする場合】

CSSファイル

 

section#activity{

        color

}

 

【②複数のタグに指示をしているclass属性=centerに同じ装飾をする場合】

.center{

     text-align: center;

}

 

f:id:terushi-diary:20191011193401p:plain

【右側の「動画レシピ」だけ黒く表示させるという指示をしているコード】

id=currentの文字色を黒にして、span要素で囲った部分のborderの色も黒に変更

 

f:id:terushi-diary:20191011193706p:plain

【フォントの指定】

タグ→font-family: "Meiryo",sans-serif ;

フォントのジャンルを指示する際は「""」で記述する必要がありませんが、固有のフォントを指示する際は「""」で囲う必要がある。しかし、閲覧しているPCにフォントがない場合、代わりにどのフォントを利用するかという指示は後ろに「,」を入力しフォントジャンルを記載する必要がある。

 

sans-serif=ゴシック系ならなんでも、という意味

serif=明朝ならなんでもという意味

 

f:id:terushi-diary:20191011194308p:plain

Google web fontを利用する方法】

Google web fontで検索して、フォントを探してHTMLファイルとCSSファイルに記述するだけ!

これは確実に指定したフォントで表示ができるものです!イイネ!

 

フォントを検索して、HTMLファイルには画像上部の<link href〜〜」をheadタグの中に挿入して、CSSファイルには装飾したいセレクタの中に画像下部のタグを記述します!



f:id:terushi-diary:20191011195044p:plain

【emの使い方】

親属性に対してどれだけの相対的な大きさを指示するかという意味

 

pタグ=45px

pタグの中のspan属性:1.5em=親のタグ(p)に対して1.5倍(150%)という意味

 

f:id:terushi-diary:20191011195356p:plain

【打ち消し線のタグ】

text-decoration: line-through;

 

こんな感じです!

今日も成長しました〜

 

今日はここまで!