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

どうもこんばんは！

54日も経ったんですなぁ。

日々更新を続けていきます。

さて、今日の作業進捗です！

【ボックスにシャドウをかける方法】

セレクタをbox-shadowに設定して、あとはテキストシャドウと同じ記述方法です。

【フッターのアイコンにグラデーションをかける方法】

ベンダープレフィックスのサイトでコードを作成し、貼り付けることでグラデーションのある色を作成することができます！

【ulタグの編集】

list-style-type: circle;     ＝白い○

list-style-type: square;     ＝四角

【リストアイコンを挿入する方法】

imgではなく、backgroundで挿入する。

理由：imgで挿入した画像は位置の調節ができないため。

backgroundで画像を指定。

no-repeatで各liの左側に1回ずつ表示可能。

paddingでリストアイコンと文字の余白を調整している。

【CSSファイル（画像は2枚）】

float = 浮かせて移動する指示。

header navは要素を右に移動させる指示。

その上でheader nav ul li でleftを支持し、上からどっち側に配置するかの指示を出している。

clearfixはタグのfloatを打ち消すタグ。

なぜ打ち消すのか：floatタグで「浮いている＝要素がない」と誤認してしまうため、floatで浮いたタグを打ち消す必要があるから。

方法：floatタグで浮かせているタグの親タグのclass名をHTMLファイルで指定して、そのclass名（なんでもいい）をCSSファイルに入力して打ち消す必要があります。

以下画像でいうと、clearffix右側のプロパティを入力して打ち消します。

（プロパティはネットで拾ってこれるようです、今回の動画では詳しく触れませんでした）

fuloatを打ち消す方法は、親要素にclearfixを入れる方法と、もう一つあります。

要素を含む親タグの閉じタグの上に以下を記述します。

HTMLファイル

<div class="clear"></div>

CSSファイル

div.clear{

     clear: both;

}

こんな感じで、二通りあるみたいです。

【HTMLファイル】

構成したページ

float打ち消しの2パターンがちょっと混乱しましたが、2パターンあるってことで理解できました！

今日も成長できてよかったです。笑

それでは、今日はここまで！