( ~ᐛ )~Web制作勉強記録③~( ᐖ~ )

前回から間が開きすぎてしまったので、

この勉強記録以降は、新しく学んだ所と、忘れていたところだけをぱぱっとまとめていこうと思います(っ*´ω｀*c)

今回からかなり図を省くので少し見にくいかもしれません💦

・asideについて

・alt属性について

・CSS上で画像サイズを変える

・セレクタの指定方法いろいろ

・画像の縁を丸くする

・クラスとIDの違い

・フレキシブルボックス

・ボックス自体/ボックスの中身の位置揃え

・asideについて

<aside>はwebページ内での補足情報であることを示すタグです( ᐛ )

・alt属性について

指定のimgについて説明をする属性です( ᐛ )

例)

<img src="azarashi.png" alt="あざらし">

・CSS上で画像サイズを変える

imgに対してwidthとheightを設定するだけです( ᐛ )

例)

img｛
     width:50px;
     height:50px;
 ｝

・セレクタの指定方法いろいろ

子孫セレクタや、クラスを作って指定する以外に

▼・全ての要素を指定

*{～}

▼1回層下の要素を指定

ul > li {～}

(<ul>の1回層下にある<li>を指定する)

▼特定の要素に隣接する要素を指定

li + a {～}

(<li>の次に書かれている<a>を指定する)

※互いが同じ階層限定

▼特定の要素以降での指定した要素全部

li ˜ a {～}

(<li>以降の<a>を全部指定する)

上記の指定を複数設定する場合は、「，」で区切ります( ᐛ )

ul > li , li + a {～}

(構造擬似クラスと否定擬似クラスはわかりやすいので省略します…( 、ᐛ )、)

・画像の縁を丸くする

縁を丸くしたい画像にborder-radiusを指定します( ᐛ )

画像の角が角丸になり、指定した値が角丸の半径になります( ᐛ )

値が大きくなるほど丸くなり、値を50%にするとまんまるになります( ᐛ )

img{
     border-radius:50%;
}

・クラスとIDの違い

クラスは同じ名前のクラスが複数あっても問題ありませんが、

IDでは複数のIDに同じ名前を付けることはできません( 、ᐛ )、

・ボックス自体とボックスの中身の位置揃え

▼ボックス自体の位置揃え

横方向

・justify-self:

 

縦方向

・align-items:

・justify-self:

【左揃え】flex-start;

【中央揃え】center;

【右揃え】flex-end;

【フレックスコンテナ内の余白を均等に割り、各フレックスアイテムの間に余白を挿入】

space-between;

【フレックスコンテナ内の余白を均等に割り、各フレックスアイテムの両サイドに余白を挿入】

space-around;

・align-items:

【上揃え】flex-start;

【中央揃え】center;

【下揃え】flex-end;

【高さを揃える】stretch;

【中身の先頭テキストをベースに揃える】

baseline;

▼ボックスの中身の位置揃え

横方向

・text-align:

 

(縦方向はありません…( 、ᐛ )、)

・text-align:

【左揃え】left;

【中央揃え】center;

【右揃え】right;

【両端揃え】justify;

※ボックス内のテキストと画像の縦方向ベースラインは変更することができます( ✨ᐛ )۶

・vertical-align:

【ボックス内での1番上の行の上辺】top;

【テキストの1番上のライン】text-top;

【小文字xの中央】middle;

【デフォルトのベースライン】baseline;

【テキストの1本下のライン】text-bottom;

【ボックス内での一番下の行の下辺】bottom;

この並び順では下にいく程ベースラインが低くなります( 、ᐛ )

今回はこれで以上です(っ*´ω｀*c)

結局、図は無しにしました笑( 、ᐛ )💦

閲覧ありがとうございました✨( //ᐛ )✨