HTML/CSS復習②からの続きです。
floatの解除
通常、親要素の高さは子要素を包む高さになる。
しかし、子要素が全てfloatの時には、親要素の高さは0になる。
子要素が全てfloatでも親要素が高さを持つように設定する
float: leftは、
CSSファイル
clear:left;で解除できる。
htmlファイルには、CSSを適用する(clear: left)ための空のタグを用意する。
htmlファイル
<divclass="clear"></div> #空のタグ
CSSファイル
.clear{clear:left;}以上のように設定すると、floatを解除できる。max-widthの設定
巨大なサイズの画面の時、要素の幅が広がりすぎないように、max-widthを指定する。
CSSファイル
.container{max-width:〇〇px;#画面幅の上限を指定width:100%;その上限内で幅を最大まで広げる}要素の表示/非表示
CSSファイル
display:none;#要素を非表示にするdisplay:block;#非表示にした要素を表示するdisplay: flex
CSSファイル
display:flex;#指定した要素の子要素が横並びになるflexbox
CSSファイル
flex:auto;#指定した要素の幅を親要素に合わせて伸縮させることができるflex-wrap:wrap;#子要素のサイズに応じて折り返すことができるflex-direction:column;#子要素を上から下に並べるfaviconの設定
favicon・・・ページタイトルのアイコン
htmlファイル
<head>
.
.
<linkrel="icon"href="ファイルの場所">
.
.
</head>文書の説明の記述
インターネットに公開した時に検索エンジンが説明用の文章として使うための文書を記述する
htmlファイル
<head>
.
.
<metaname="description"content="サイトの説明">
.
.
</head>sectionタグ
sectionタグは汎用的に使えるタグである。
リンクを同じタグではなく、別のタグに開きたい時
aタグ内に target="_blank"を記述する
MDNのサイト
MDNのサイトではHTMLの仕様を確認することができる
デフォルトの余白を確認する
Chromeのデベロッパーツールからボックスモデルを調べることで確認できる
CSS 半角空白と>の違い
CSSファイル
.worksh1{#worksクラス内の全てのh1にCSSが適用される}.works>h1{#worksクラス内の直下の階層のh1にのみCSSは適用される}