LoginSignup
48

More than 5 years have passed since last update.

忘れてしまうCSSの超基本

Last updated at Posted at 2017-02-25

普段書かないので、あれどうやるんだっけと思ったときにメモしてます。

margin プロパティの順番

margin: 10px;                /*上下左右*/
margin: 10px 20px;           /*上下、左右*/
margin: 10px 20px 30px;      /*上、左右、下*/
margin: 10px 20px 30px 40px; /*上、右、下、左*/

clearfix

float: left;

などfloat指定された要素のみを子要素として持つ親要素は、そのサイズが計算されず、正しく表示されない。
そこで、以下のようにclearfix classに疑似要素を作って

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

親要素に

<div class="clearfix">
  <div class="floating">I'm floating</div>
</div>

と指定することで、表示崩れを直せる。

width, height にpaddingとborderも含める

デフォルトではbox-sizing: content-boxとなっていて、widthの値が示すサイズはpadding, borderを含まない。box-sizing: border-boxとすると、padding,borderを含んだサイズになる。

width: 30%;
padding: 15px;
box-sizing: border-box;

line-height に倍率だけ指定する

line-heightに倍率だけ指定すると、fontサイズに対する倍率で高さを指定することができる。

font-size: 10px;
line-height: 1.5;

文字を上下の中心に配置する

heightline-heightを同じにすることで、上下中央揃えにすることができる。
ただしこれは1行のものに有効。

height: 30px;
line-height: 30px;

marginの相殺

  • 隣り合う要素のmarginは相殺される
  • 子要素のmarginは親要素を突き抜ける

文字を省略して表示する

text-overflow: ellipsis; /*...と省略する*/
white-space: nowrap;     /*改行を禁止する*/
overflow: hidden;        /*はみ出した部分は表示しない*/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48