HTML/CSS復習②からの続きです。

floatの解除

通常、親要素の高さは子要素を包む高さになる。
しかし、子要素が全てfloatの時には、親要素の高さは0になる。
子要素が全てfloatでも親要素が高さを持つように設定する
float: leftは、

CSSファイル

clear: left;

で解除できる。

htmlファイルには、CSSを適用する(clear: left)ための空のタグを用意する。

htmlファイル

<div class="clear"></div> #空のタグ

CSSファイル

.clear {
       clear: left;
}
以上のように設定すると、floatを解除できる。

max-widthの設定

巨大なサイズの画面の時、要素の幅が広がりすぎないように、max-widthを指定する。

CSSファイル

.container {
           max-width: 〇〇px; #画面幅の上限を指定
           width: 100%; その上限内で幅を最大まで広げる
}

CSSファイル

display: none; #要素を非表示にする
display: block; #非表示にした要素を表示する

CSSファイル

display: flex; #指定した要素の子要素が横並びになる

CSSファイル

flex: auto; #指定した要素の幅を親要素に合わせて伸縮させることができる
flex-wrap: wrap; #子要素のサイズに応じて折り返すことができる
flex-direction: column; #子要素を上から下に並べる

favicon・・・ページタイトルのアイコン

htmlファイル

<head>
.
.
<link rel="icon" href="ファイルの場所">
.
.
</head>

インターネットに公開した時に検索エンジンが説明用の文章として使うための文書を記述する

htmlファイル

<head>
.
.
<meta name="description" content="サイトの説明">
.
.
</head>

sectionタグは汎用的に使えるタグである。

aタグ内に target="_blank"を記述する

MDNのサイトではHTMLの仕様を確認することができる

Chromeのデベロッパーツールからボックスモデルを調べることで確認できる

CSSファイル

.works h1 {
          #worksクラス内の全てのh1にCSSが適用される
}

.works > h1 {
            #worksクラス内の直下の階層のh1にのみCSSは適用される
}