pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。

「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位（vw, vhや%）,
絶対単位（px）を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。

.exsample{
    width: calc(100% - 10px);
}

calc()」の実装例: 要素のセンタリング

要素をボックス内で上下左右、中央にセンタリングすることができます。

.exsample {
    position: absolute
    top: calc(50% - 100px);
    left: calc(50% - 100px);
}

上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。

今回はCSSのコメントアウトの重要性についてです。

コメントアウトなんてせずにcssの記述をしていると、書いている人にとっては良いでしょうが、
メンテナンスする人にとっては、読みにくいCSSを書いていることになります。
CSSに限らずdivの閉じタグなど重要なので入れていくほうが良いでしょう。

■CSS コメントアウトの例
一行

   width:100px; // コメントアウトの内容

複数行

/*
 コメントアウトの内容
 コメントアウトの内容
 コメントアウトの内容
*/
   width:100px; // コメントアウトの内容

上記が基本的な書き方となりますが、
いろいろなデザインにして、読みやすくすることもできます。

/*
*
*	コメントアウトの内容
*/

/*-------------------------------
 
	コメントアウトの内容
 
-------------------------------*/

コメントアウトを利用するのが面倒くさいと思う人もいるかもしれませんが、
後々のメンテナンスや修正で非常にわかりづらいと時間の無駄になったり、面倒なことになります。

Creative CloudのCreative Cloud Extractを使用すれば、
スライスを自動で行ってくれたり、CSSを自動生成してくれます。

https://assets.adobe.com/
上記の、サイトにアクセスしてPSDをアップロードして、
「詳細」「アクティビティ」「Extract」のメニューから「Extract」をクリックします。

Creative Cloud Extract 画面では、
選択した要素に対し、右メニューにcssが表示されたり、フォント、カラー、レイヤーの選択までできてしまいます。

できることとしては、
1.画像を書き出す
2.テキストをコピー
3.グラデーションのCSSを自動生成

などです。

Creative Cloud Extractだけでなく、DreamweaverにもExtractが入っています。

サイトのコーディングをしていると「先頭や最後の要素のみに対して指定がしたい場合があります。

そんな時に便利な
nth-childとnth-of-typeですが使い分けとしては

nth-child(n)
ｎ番目の指定された要素に適用
指定された要素でなければ未適用
nth-of-type(n)
指定した要素のｎ番目に適用
上記となりますが、

【例】

タイトル
文言
サブタイトル

上記の例で使用すると
h2:nth-child(1)では
最初の要素はh1のため適用はされません

h2:nth-of-type(1)
間にほかの要素を挟んでも初めのh2に適用されます。

nth-childを主に使う人も多いと思いますが、
nth-of-typeも知っておくとコーディングで役に立ちます。

プロパティcounter-incrementを使うと、
liなどの要素に番号を自動的に付与することができます。

リスト（list-style-type: decimal）のような感じです。

counterを適用する要素に対しbeforeやafter要素を付け
プロパティでカウンタ名を指定することで連番をつけることができます。

ol {
    counter-reset: li; 
    list-style: none; 
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。

簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。

■html

    
1番目
    
2番目
    
3番目

■css
.flexBox {
    display: -webkit-flex;
    display: flex;
}　

また、上下左右中央寄せは

.flexBox {
    display: -webkit-flex;
    display: flex;
　　justify-content: center;
　　align-items: center;
}

で指定します。

横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。

.flexBox {
     display: -webkit-flex;
    display: flex;
}
.flexBox li:nth-child(3) {
     -webkit-order: -1;
    order: -1;
}　

Androidで©の色が変更できないといった場合の対処法です。

タグにlang=”ja”が入っている場合、スマホで見たときに色が変更できていない問題に遭遇する場合があります。

lang=”ja”を省いたりlang=”en”に変更したりなどで対処できますが、

©テスト
.copyright {
    color: #ffffff;
  　font-family: Verdana;
    font-family: "Droid Sans";
}

Androidでのフォントをfont-familyで指定することで対応できます。

IE9以降では擬似要素が表示されているにもかかわらず、IE8では表示されていないというときの対象法です。

contentプロパティの値を空白文字を挿入することで表示される場合があります。

.test {
	position: relative;
}
.test:after {
	background: #ccc;
	content: ' '; //空白文字を挿入
	position: absolute;
	top: 0;
	right: 0;
        width:50px;
        height:50px;
	}
}

tableタグのthやtdは内包する要素や親要素の画面幅によって横幅が決まります。
では、3カラムレイアウトのテーブルの場合に、均等配置すれば良いでしょうか。

答えは、tableタグに対して「table-layout: fixed;」を設定すると、均等配置になってくれます。

tableのデフォルトは「table-layout: auto;」で、レスポンシブサイトで、
スマートフォンのサイズになった時に戻したいというときはautoを指定してください。

table.equalityTable{
	table-layout: fixed;
}