ピュアチャ〜ジ

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

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

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


[ピュアチャ〜ジ]

はいどうも、今日も作業しました!

 

ちょっと寝不足だからか、疲れてますw

 

そんなことは置いといて今日の作業報告です!

 

CSSでの文字の装飾】

border-radius: 0 0 5px 5px

 四角い角を角丸にする指示です!左上 右上 右下 左下 って順番です!

padding-left: 10px

 要素の中の余白を10px取る指示です。
 

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

 

【カフェのメニューを調整しました】

これは超簡単なCSSスタイルでした。

list-style: none;     =リストの「・」を削除できる指示です。ちょっと忘れてたので復習できました。

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

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

 

 

【文字色の変更や画像の挿入】

background: rgba(0,0,0,0.5);

 rgbaで画像の背景色を設定することができます。red green blue a(何か忘れたけど不透明度です)

 

background: url(images/main.jpg);

 画像挿入する際のタグ 

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

 

 

【背景の設定タグもろもろ】

background-image: url(images/main.jpg);

 背景画像の指定

background-repeat: no-repeat;

 左上から画像を繰り返すかの指定。このタグだと繰り返さない。

background-position: right bottom;

 背景画像の位置の指定。左右、上下の順番で指定する。

background-attachment: fixed;

 スクロールしても、画像の位置を変えないという指示。

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

 

【画像にシャドウを足す方法】

text-shadow: 0px 0px 10px rgba(0,0,0,0.5);

 右○px、下○px、サイズ○px(0だと文字サイズと一緒)、色指定

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

 

backgroundだけで記述するときとbackground-imageで記述するときがあるのでその違いがちょっとわからなかったですが、今打ち込んでみたらどっちでも表現できました。

 

imageまで打った方が後々わかりやすいから付けた方がいいかな〜という印象でした

 

ということで、今日も成長しました!

最高!笑

 

こうやって目に見える成長があると非常にわかりやすくて嬉しいです。笑

 

 

ってことで、今日はここまで!