科学の箱

科学・IT・登山の話題

Frontend

CSS Depth – Day 1

投稿日:2019年9月3日 更新日:

main要素のdisplayはIEではinlineになっている

display:blockを使う。main要素はhtml5~導入された。文書の主要なコンテンツであることを示す。hidden属性がないmain要素を複数置くことはできない→hiddenで切り替えれば表示上は必ずmainは一つになる。IEではdisplay:inlineになる仕様。chrome/firefoxではblockである。

  box-sizing: border-box;

 box-sizingのデフォルトはcontent-boxである。この場合width/heightはコンテンツで計算される。paddingおよびboaderは計算に含まれないためにサイドバー等のレイアウトを組んだ時に100%を越えてしまい、overlaptが発生する可能性がある。このような場合にはborder-boxにする。paddingとboaderを含んだ計算になるために、隣り合った要素とサイズが干渉しない。ただしpaddingは0にしておく必要がある。

ユニバーサルセレクタ

box-sizingのデフォルトはcontent-boxであり、これによりレイアウトが崩れることはわかった。またこれを直すためには、border-boxが使える。しかし関連するレイアウトすべてについてbox-sizingを入れていくのは面倒くさいし、確認するにも手間がかかる。そこで利用できるのはrootノードからの継承と、ユニバーサルセレクタである。box-sizingについては上書きが発生しないと困るのでここではユニバーサルセレクタを使う。

*,
::before,
::after {
  box-sizing: border-box;
}

overflowを起こしたときに

autoにしてあらかじめ決められた枠組みでscroll barが出るのが望ましい。

heightをwidthの枠組み

widthは%でレイアウト組をするのが簡単。heightはそれは使わないほうが良い。

 

メタ情報

inarticle



メタ情報

inarticle



-Frontend
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS Depth – Day4

flex display:flexは次のdiv子要素をflex子要素として取り扱う。 layoutで隙間を埋める display : flexを子要素レベルでつけてあげる flexの勉強 flexbo …

no image

CSS Depth – Day 2

lobotomized owl selector body * + * { margin-top: 1.5em; } floatを解除する <div style=”clear: both”&gt …

no image

CSS Depth – Day3

display : blockと子要素のheight display : blockを指定しない場合、親要素へ伝えられる子要素のheightはinline要素のheightになるために、親要素と子要素 …

no image

internのnpm testでEACCESSエラーが出た場合の対処方法

npm testを実行するとEACCESSエラーが出る。   > npm test (ノಠ益ಠ)ノ彡┻━┻ Error: listen EACCES: permission denie …

no image

Typescript

Microsoftが2014年ごろに開発したJavaScriptを拡張して作ったプログラミング言語 大規模開発を効果的に進める 静的型付けによりエラーを防ぐ。デバッグも簡単になる。 クラス型指向により …

2019年9月
« 8月   10月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30  

side bar top



アーカイブ

カテゴリー