【CSS】display: table;

きっと俺だけ知らないシリーズ。。(この記事からスタートw)

隙間拡大
table, その外側のdivにも無いのに隙間が…?

 

拡大してみると、

隙間拡大
…空いてますね。。

この部分のhtmlはこれ。

まぁ、その、◎とか▲とかは一先ず置いといて。。

スタイル(sass)は、

予定ではこんなところで止まるはずじゃなかったんですが、どうしてもこの隙間が消えず。。

とりあえずdisplay: table; で消える

隙間なし :)
隙間なし 🙂

暫定的もいいとこなんですが、とりあえず、display: table; で消えました。
他にも、

  • table
  • inline-table
  • table-cell

で消えたんですが、inline-table, table-cellはちょっと違うなぁということで。

参考

【CSS】borderメモ

……メモばっかり (^0^;)

CSSで見出しとかに

  • ボーダー引きたい
  • 2重線にしたい
  • 片方は点線
  • 片方は実線で太さを太くしたい

ってとき。

h2 { border-bottom: 2px solid #c4ae07; position: relative;  }
h2:after { content: ""; display: block; width: 	100%; border-bottom: 1px dotted #c4ae07; position: absolute; left: 0; bottom: 3px; }

スクリーンショット 2014-11-25 16.39.16

って感じでできた。
afterは要素内に入るから、h2にpadding入ってると、内側に描画されるから、position使って浮かせて配置し直し。

コーディングメモ min-width

毎度あたふたしてる気がするのでいい加減嫌気がさしたのでメモ。

responsiveなサイトを作るときは

<meta name="viewport" content="width=device-width" />

とか書き込む。

デザイン的にヘッダやフッタがwidth: 100%; な場合、iPhoneやiPadで背景や100%部分がおかしなことになったりする。

min-width: ○○; 

100%指定している箇所に追加しておくとOK。

今回は

body { min-width: ○○px; }

こんな感じでOK。コンテンツ幅いっぱいにしたいときはコンテンツ幅を。