cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか？

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。（最新のChromeでは使えなくなりました。代替方法は一番下）

以下の方法でGoogle Chromeを使ってローカルにあるcssファイルを直接編集して保存してみましょう。

● ローカルのフォルダをGoogleChromeに読み込ませる（ Chrome Version 62 の場合 ）

1. Google Chromeを立ち上げる

2. 右クリックし「検証」を選択する

デベロッパーツールのウィンドウが画面下表示されます

3. デベロッパーツール内メニューの「Sources」を選択する。

4. 右クリックして「Add folder to workspace」を選択する

5. 編集したいcssファイルが入っているフォルダを選択する

● 読み込んだローカルのフォルダ内の css をリンクさせる

6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く

7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると

現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する

これで準備はokです。 後は自由に編集しその後に「Command+s」（Macの場合）を押すと保存されリロードしてもその状態がリセットされず残っています。

● Finchを使用して変更したCSSの差分を抽出する

ローカルのファイルでは動作しませんので node.js や php などでローカルサーバを立てるといいでしょう。
https://chrome.google.com/webstore/detail/finch-developer-tools/phgdjnidddpccdkbedmfifceiljljgdo

参考: https://liginc.co.jp/web/tool/browser/38012

web制作時に「cssを変更/保存」→「ブラウザのリロード」はとても面倒です。
そこでemmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させましょう。
簡単に言うとオートリロード機能ですが、実際にはリロードは起こりません。リロードせずに即座に反映してくれます。
それ以外にも

• SASS, SCSS（Compass） にも対応します。
• Chromeのデベロッパーツール（Windows : F12　　Mac : Command ＋ Option ＋ i ）で変更した内容をエディタ側に反映させる

事ができます。

● 1. 必要なアプリ

• Google Chrome
• Sublime Text3

● 2. Chrome Extention「Emmet LiveStyle」のインストール

https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?hl=ja
からインストールします。
インストール後 「ウィンドウ」→「拡張機能」から以下のようにセッティングします。

● 3. Sublime Text「Emmet LiveStyle」のインストール

Sublime Text から
「Command + Shift + p」→「install」→「live style」でLiveStyle をインストールします。

● 4. ファイルをそれぞれ開く

css(scss)ファイルをSublime Textで、htmlファイルをChromeで開きます。

● 5. Chromeの右上のアイコンから「Enable LiveStyle」

LiveStyleをon にしたら 即座に反映させる css(scss)ファイルを選びます。

以上で即座に反映させる環境ができます。

compassは各自インストールしておいてください。

● 1. config.rbの準備

compassを使うときはサイトの最上位フォルダに config.rb を置きますが、ここでは以下の様な設定を使用します。
以下のコードをファイル名 `config.rb` で htmlを制作する最上位フォルダに置いておきます

# パスの設定
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# 書き出すCSSのスタイル  :expanded or :nested or :compact or :compressed
output_style = :expanded

# コメントを残すかどうか？
line_comments = false		

# 相対パスを使うかどうか？
relative_assets = true

# CSSスプライトのランダム文字列を削除
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

● 2. mixin ファイルの準備

以下のコードをファイル名 `_sprite-css.scss` で scssフォルダに置いておきます

@mixin sprite-common($map, $pixel_raito:1) {
    margin: 0;
    padding: 0;
    background-image: $map;
    background-repeat: no-repeat;
    display: block;
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    $sprite_image_path: sprite-path($map);
    $sprite_width: round(image-width($sprite_image_path) / $pixel_raito);
    $sprite_height: round(image-height($sprite_image_path) / $pixel_raito);
    @include background-size($sprite_width, $sprite_height);
}
@mixin sprite-item($map, $name, $pixel_raito:1) {
    width: image-width(sprite-file($map, $name)) / $pixel_raito;
    height: image-height(sprite-file($map, $name)) / $pixel_raito;
    $pos: sprite-position($map, $name);
    background-position: (nth($pos, 1) / $pixel_raito) (nth($pos, 2) / $pixel_raito);
}
@mixin sprite-css-hover($class_name, $dir_path) {
    $map: sprite-map($dir_path + '*.png');
    .#{$class_name} {
       background-image: $map;
    }
}
@mixin sprite-css($dir_path, $pixel_raito:1) {
    $map: sprite-map($dir_path + '*.png');
    $dir_name: sprite-map-name($map);
    .#{$dir_name} {
        @include sprite_common($map, $pixel_raito);
    }
    @each $name in sprite-names($map) {
        .#{$dir_name}_#{$name} {
            @include sprite_item($map, $name, $pixel_raito);
        }
    }
}

● 3. スプライトを生成する画像ファイルをセット

cssスプライトを作りたい画像ファイルをフォルダ `img/splites/navi/に置きます。 ロールオーバーさせたい画像ファイルををフォルダimg/splites/navi_over/` に置きます。
画像の例

├── sprites/
│   ├── navi/
│   │   ├── file1.png
│   │   ├── file2.png
│   │   ├── file3.png
│   ├── navi_over/
│   │   ├── file1_over.png
│   │   ├── file2_over.png
│   │   ├── file3_over.png

● 4. scssファイルの作成

好きな名前のscssファイル（ここでは `style.scss` とします。）を scss フォルダに作成して以下のように記述します
（2行だけです。これだけでCSSスプライト画像の生成とCSSコードの書き出しが行われます。）

@include sprite-css("sprites/navi/", 2);    // フォルダ名, 倍率
@include sprite-css-hover("navi", "sprites/navi_over/");    // クラス名, フォルダ名

● 5. compass から scss → css 変換の実行

compassを起動して scss→css 変換を実行します。 （codekitやsublimetextを使用することをおすすめします。）

● 6. HTMLを用意する

htmlは以下のように記述します

<link rel="stylesheet" href="./css/style.css">

<ul>
<li><a class="navi navi_file1" href="#">メニュー1</a></li>
<li><a class="navi navi_file2" href="#">メニュー2</a></li>
<li><a class="navi navi_file3" href="#">メニュー3</a></li>
</ul>

これでretina, ロールオーバー対応のメニューができます。 ちなみに生成されるCSS `style.css` は以下の様なものになります。

.navi {
  margin: 0;
  padding: 0;
  background-image: url('../img/sprites/navi.png');
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -moz-background-size: 150px, 150px;
  -o-background-size: 150px, 150px;
  -webkit-background-size: 150px, 150px;
  background-size: 150px, 150px;
}
.navi_file1 {
  width: 150px;
  height: 25px;
  background-position: 0 0;
}
.navi_file2 {
  width: 150px;
  height: 25px;
  background-position: 0 -25px;
}
.navi_file3 {
  width: 150px;
  height: 25px;
  background-position: 0 -50px;
}
.navi:hover {
  background-image: url('../img/sprites/navi_over.png');
}

参考: http://bit.ly/1WgkQtD

CSSによるDIV（ブロック）要素の横並び方法4種類

デモはこちら

1.floatによる横並び

注意点

• 親要素 :after に 「content」「display」「clear」要素を追加する。
• または親要素に clearfix を指定する

css

.div_float:after {
  content:'';
  display:table;
  clear:both;
}
.div_float .cell {
  border: 1px solid black;
  float: left;
}
</style>

html

<div class="div_float">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>

実際の表示

2.display: inline-blockによる横並び

「display: inline-block」は幅や高さなどを指定できるインライン要素です。

注意点

• 親要素に font-size: 0; を指定してブロック間の隙間をなくす
• 子要素に font-size: 12pt; を指定してフォントの大きさを指定する

css

  .div_inline_block{
    font-size: 0;
  }
  .div_inline_block .cell {
    font-size: 12pt;
    border: 1px solid green;
    display: inline-block;
  }

html

<div class="div_inline_block">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

3.「display:table;」「display:table-cell;」による横並び

注意点

• 親要素に display:table; を指定（実はなくてもOK。）
• 子要素に display:table-cell; を指定

css

  .div_table{
    display:table;
  }
  .div_table .cell {
    display: table-cell;
    border : 1px solid red;
  }

html

<div class="div_table">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

3.4.「display:flex;」による横並び

注意点

• 親要素に「display: flex;」を設定
• 子要素は自動的にflexアイテムになる
• 古いブラウザ用にベンダープレフィックスが必要

css

    .div_flex{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
    .div_flex .cell {
      border : 1px solid purple;
    }

html

  <div class="div_flex">
    <div class="cell">aaa</div>
    <div class="cell">bbb<br>bbb</div>
    <div class="cell">ccc</div>
  </div>

実際の表示

<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>

参考 : http://flexboxin5.com 参考 : http://bit.ly/1VT62NP
参考 : http://bit.ly/1obD69i

スマホサイト制作時に設定しておくと良いhtml, css,js項目

1. リンクを押した時に押した領域に色をつける

a{
	-webkit-tap-highlight-color: rgba(200,200,200,0.2);	
}

2. 画像がはみ出すのを防ぐ

img{
	max-width: 100%;
	height: auto;
}

3. ボーダーを追加した時に width, height が増えるのを防ぐ

*{
	box-sizing: border-box;
}

4. スマホで見た時に横に移動（左右にグラグラ）するのを防ぐ

<body>
 <div class="wrapper">
  ここに記述していきます。
  </div>
</body>

.wrapper{
	overflow: hidden;
}

5. フォーム入力時に画面がズームするのを防ぐ

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

6. スマホでダブルタップしたときに拡大しないようにするCSS

html {
  touch-action: manipulation;
}

PWA対応 1. ホーム画面用のアイコンを追加する

192px x 192px のアイコンを作成し、以下のタグで指定します。

<link rel="apple-touch-icon" href="/touch-icon.png">

PWA対応 2. 起動までに表示する画像 Sprach Screen を追加する

512px x 512px のアイコン（splash-screen.png）を作成し以下の記述を追加します。

androidの場合 少なくとも以下の3つを manifest.json に 記述します

manifest.json

{
  "name": "my app",
  "background_color": "#000",
  "icons": "/splash-screen.png"
}

manifest.json の icons の記述方法. https://developer.mozilla.org/ja/docs/Web/Manifest/icons

iphoneの場合

こちらのサイトから作成します https://progressier.com/pwa-icons-and-ios-splash-screen-generator

今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。

● HTMLに記述

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム1</div>
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ：カラム2</div>
</div>

● clearfix（今のやり方 Windows IE6 , IE7 に対応する必要が無い場合）

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

clearfix（昔のやり方。参考までに。）

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。（おすすめ順）
厳密には
・正規化するCSS（ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」）
・リセットするCSS（全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」）
という違いがありますが、どれか１つを選んでhtmlの最初に読み込ませるという点では同じです。

● normalize.css（GitHubやBootstrap3で採用されています。）

https://necolas.github.io/normalize.css/

● Bootstrap4からは normalize.css をベースに reboot.css が採用されました

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss

● ress.css

https://github.com/filipelinhares/ress

● sanitize.css

http://10up.github.io/sanitize.css/

● eric meyer reset css 2.0

http://meyerweb.com/eric/tools/css/reset/

● modern-css-reset

モダンブラウザ向けの reset.css
https://github.com/hankchizljaw/modern-css-reset CDN

<link rel="stylesheet" href="https://unpkg.com/modern-css-reset/dist/reset.min.css" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modern-css-reset/dist/reset.min.css" />