モダンブラウザ用のclearfix
floatで横並びのレイアウトをつくるときに、floatをかけた要素の高さを親要素が認識せずに、表示が崩れる場合がある。それを回避するためにかけるのがclearfix。
.clearfix:after { content: ""; display: block; clear: both; }
コレを書いて、.clearfixをfloatレイアウトの親要素にかける。
IE6/7対応はもういらないと思うので、zoom: 1;などは省いて良い。これだけ。
参考↓
kojika17.com
サイトをつくるときは最初にreset.cssかnormalize.cssを読み込む
ChromeやSafariなど、ブラウザはそれぞれユーザーエージェントスタイルシートと呼ばれるデフォルトのCSSを持っていて、CSSを当てていないHTMLでもある程度読みやすく表示されるようになっています。
ただし、それぞれの値は異なるので、ブラウザごとに余白など見た目が違ってきます。
このままの状態でスタイルを書いていくと、ブラウザごとに食い違いがでてしまいます。
reset.cssでリセットする
この各ブラウザのデフォルトCSSを0値にリセットしてくれるのが、reset.cssです。
reset.cssを読み込んでから、スタイルを書くことでブラウザの差異なく構築することができます。
reset.cssはいくつかあって、最近人気のreset.cssはこちらから確認することができます。
cssreset.com
AtomにいれたPackage2016
新しいPCにAtomいれたのでPackageもいろいろ追加してみた
minimap
minimap-autohide
ソースコードの全体とどの辺にいるのかを表示してくれるパッケージと、
minimapを自動で表示/非表示してくれる。
autoclose-html
自動で閉じタグ挿入。
autocomplete-plus
autocomplete-html
autocomplete-css
autocomplete-sass
コード自動補完表示。
autocomplete-paths
プロジェクト内のファイルパスを補完してくれる。画像のパスとか。
linter
linter-htmlhint
linter-csslint
linter-jshint
構文チェック。
atom-beautify
ソースをきれいに整頓してくれる。
.phpだとphp-cs-fixerも必要。
highlight-selected
選択したテキストと同じものがファイル内にある時にハイライトしてくれる。
file-icons
ファイルの種類別にアイコン表示してくれる。
pigments
色コードを視覚的に見せてくれる。他にも色々できるらしい。
sublime-style-column-selection
Optionキー＋クリック＋ドラッグで矩形選択できる。
emmet
爆速コーディングできるやつ。あんまり使いこなせてない。
