Weｂデザイン勉強55日目の成長報告！

今日はめちゃ眠いです！

一眠りして作業してるんですが、余計に眠いです！笑

さて、今日の作業進捗報告の時間です〜！！

【範囲を指定して、その中で要素を移動させる方法】

このタグでは、画面右側の星柄の帯を画像の右上に配置する支持を行いました。

position: relative;  =範囲の指定

position: absolute; =範囲の中で、「動かす」という指示の意味合いを持つ。この時点でfloatに近い意味合いをもつため、範囲の中で浮いた状態になり指定している要素の下の要素が上に上がってくる。

top=上から

left=左から

【ヘッダーの固定方法】

position: fixed; =固定する意味

ヘッダー固定の場合、現在の場所から固定はされますがルールとしてどこの位置で固定という支持を出す必要があるためtop left 両方0pxを指定しています。

この際、positionを使っているのでheader要素も浮いたような状態になり下の要素であるwrapperが上にあがってくるためmarginタグでtopの余白を取ることで正しく表示するように指示しています。

【新着情報の表示方法】

overflow: scroll;   = はみ出した場合スクロールさせるという指示

auto＝同じくスクロールさせる

hidden=隠す

overflow-x: hidden; =x軸（横軸のスクロールは非表示という指示）

【範囲を指定した画像の切り出し】

overflowは画像の切り出しも可能です。

以下の記述をすることで、横500px縦200pxを超えた画像を非表示にして切り出すことも可能です。

【練習問題でレイアウト作成】

1.サイドバーとコンテンツの縦幅横幅背景を設定

2.floatでどちらも左揃えにする

3.footerが浮き上がってくるのでfooterに対してclear:both;の指示を出す。

（これの記述方法が前動画とちょっと異なっていたんですが、これの方法がめちゃめちゃわかりやすかったのでひとまずこれで理解していようと思いますｗ）

4.サイドバーとコンテンツを中央揃えにするためmarginのプロパティで指示。

margin:上下px 左右px(autoでOK);

width: 配置するる要素の合計px数

【セレクタの種類】

* ＝全称セレクタ（全部のタグに対して適用する）

p ＝タイプセレクタ（特定のタグに対して適用する）

今日はこんな感じです！

ああ眠いので今日の作業はここまで！

おやすみなさい！