今日のプチ学び

～backgroundをショートハンドで書くとき～
backgroundプロパティを書くときに、

毎回、background-color: 〇〇　background-size:  〇〇などと書くと長く感じます。

そんな時にショートハンドでショートカットすることができ、CSSの容量を削減できます。

注）ショートハンドで書くことによって、Android4.4以下などではうまく動作しない場合がある。（そもそもAndroid4.4以下の古いバージョンでは、基本的なbackgroundプロパティの挙動自体がおかしかったりする）
以下の内容で記述↓

background: #000 url("画像URL") no-repeat border-box left top/contain fixed content-box;
スラッシュで区切る箇所は、かならず、位置 / サイズ となるように指定するようにする！！

Nakayama Miho

～relativeとabsoluteはセットで使う～
授業を受けていく中で、少しずつセットで使うプロパティなどを覚えてきました。

ZeroPlusでは授業が終わるたびに抗議修了テストがあり、そこで間違えた点を復習してみます。
基本的にposition;absolite;は動かしたい子要素に、position:relative;はその親要素に当てるという認識が定着していました。今回、そこがひっかけ問題になっていました。
position;absolite;は親要素が“必ず”必要という認識に代わっていたことに気づきました。

position:relative;がなかった場合には、画面の左上から要素の絶対配置が可能です。
慣れてくるのはいいことだけど、このような復習の機会は重要だと今回考えさせられました。
まだ記事を書くのに慣れていないですが、とりあえず始めることが大切かなと思い

初めの記録はこのように書いていきたいと思います。

コードをここに張り付けれるようにしたい、、、。
時間を見つけて他の方の記事を見てインプットしてみます。

Nakayama Miho

今日は、html、cssの学びや気付きではないですが、ZennでのＭarkdownについて調べてみました。
https://zenn.dev/zenn/articles/markdown-guide
これでコードを記載したり、ブログの装飾をレベルアップできそうです、、、

頑張ります！！

Nakayama Miho

～アンダーラインをlinear-gradientで引く～

↑完成形

html

<div class="underline_container">
         <p class="underline_item">アンダーライン</p>
       </div>

CSS

.underline_item{
   background-image:linear-gradient(transparent 70%,#43cfe8 0%);
}

検証ツールを用いりながら、制作したがCSSの”％”の働き方がいまいち理解できず。
いろいろ調べていく中で一番わかりやすかった方法を紹介します。

まず、完成形の図のパーセンテージを図にして表してみます。

〜作成途中〜