備忘録

「float」を指定した要素は、通常のフロー（通常の流れ）から外れます。
親要素の高さは、フロートされた子要素の高さを含めません。
そのため、回り込みした文字列より大きな画像等の場合は、親要素からはみ出してしまします。

heightがauto(初期値)である場合、対応策の１つとして
親要素のoverflow値をvisible以外の値にするとその親要素は、フロートを含むように広げられる。

overflowの値

• visible (表示)
• hidden(隠す)
• scroll(スクロールバーを表示)
• auto(必要に応じてスクロールバーを表示)

2018年2月23日12:06 | カテゴリー：HTML | コメント (0)

webkit系のデフォルトスタイルシート

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

2016年8月2日15:44 | カテゴリー：HTML | コメント (0)

画像下部に標準で挿入されるスペースは、マージンやパディングではない。

画像は、インラインブロックボックスで構成されるため、文字や画像と横に並べて表示される。

このとき、画像の下辺が文字のベースラインにそろえて表示されるため、ページラインから下のスペースが画像の下に挿入される。

ベースラインより下のスペースを画像に挿入しないようにするためには、vertical-alignを「bottom」に指定する。

なお、HTML4.01やXHTML1.0で作成したページの場合で文字を横に並べずに画像のみを表示した場合は、主要とするブラウザではスペースは挿入されない。

しかし、HTML5で作成したページは、スペースが挿入される。

2016年4月15日00:00 | カテゴリー：HTML | コメント (0)

画像を表示する<img>が構成するボックスは「インラインブロックボックス」と呼ばれ、ブロックボックスとインラインボックスの両方の特徴をあわせ持ったものになっている。

• インラインボックスと同じように前後に改行が入らず、文字などと並んで表示される。
• ブロックボックスと同じように、スタイルシートで横幅や高さを指定できる。
• マージンやパディング、罫線を挿入すると、まわりのコンテンツの配置に影響する。
• ただし、インラインブロックボックスには、「上下のマージンは、大きい方のマージンが採用され、重ねて表示される」という決まりは、適用されない。

2016年4月11日16:29 | カテゴリー：HTML | コメント (0)

HTML4.01やXHTMLの時、区切り線に<hr>タグを使用していたが、HTML5では、<hr>タグは、場面転換といった段落の論理的な区切りを示すものと定義されているので視覚的なデザインを施すために利用してはいけない。

「見出しと文章を区切る」といった視覚的な目的にはスタイルシートでborderプロパティ指定する。

2016年4月11日15:41 | カテゴリー：HTML | コメント (0)