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;
}

コーディングする際、marginは必須といってもいいくらいよく使用します。

ですがmarginに負の値（マイナス値）を付けるにあたっては、それぞれ意見が分かれるところです。

ネガティブマージンは多くののモダンブラウザで完全にサポートされています。
ですが、ネガティブマージンは多用するものではありません。注意深く使用したほうが良いでしょう

ブラウザではサポートされていますが、Dreamweaverでは、正式な値として認識されず。
ネガティブマージンはDwのデザインビューで反映はされません。

中央配置したいブロック要素の幅が決まっているとき、ネガティブマージンを活用することでセンタリングする方法があります。

.center{
position:relative;
width:300px;
height:200px;
}

.box{
position:absolute;
width:100px;
height:100px;
margin-left: -50px;
left:50%;
}[/css]

nth-childはリスト構造など、同じ要素が多く連なる場合、5番目の要素に指定したり3の倍数の要素に、
cssの指定をしたりなど、多くの場面で活用できる擬似要素です。

実は、nth-childにはネガティブな値も指定できます。

  
テキスト
  
テキスト
  
テキスト
  
テキスト
  
テキスト
  
テキスト

 
#sample li:nth-child(-n+5) {
  color:green;
}

上記では、最初から5番目の要素までフォントの色が緑になります。

Emmetは、HTML・CSSのコーディングを効率適にしてくれるプラグインです。

Emmetの省略記法を使用すれば、下記を入力してTabキーを押すだけで展開がされます。

#test>ul>li*5>a　

↓

Dreamweaver CC 2017ではEmmetが標準搭載されています。また、個人ででDw用の拡張機能として追加も可能です。

Emmetのcheat-sheetを見ると沢山の省略記法があり、イロイロ調べてみると便利な機能存在するので、調べてみるといいですね。

WordPressでテキストエディタで文章を記述すると、文章の行が改行されるところに、自動的にpタグを付加されます。

投稿などでは、便利な機能ですが、オリジナルテーマで、固定ページを作るとき、Pタグが挿入されることでレイアウトが崩れるなど、不便な時もあります。

そんな場合、自動整形機能を無効にするPHPコードを、テンプレートファイルに書き込みます。

/**
 * 固定ページのみ自動整形機能を無効化
 */
function disable_page_wpautop() {
	if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

上記では固定ページのみ自動整形機能を無効にするPHPコードです。

Sass「サス」と読まれるものです。
CSSに変数などを使ったプログラミングに似た書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成することができます。
「style.scss」のSassファイルを変換すると「style.css」のできあがりです。

■Sass（.scss）

#header{
    h2{ margin-top: 20px }
    p{ font-size:12px }
}

■CSS（.css）

#main h2 { margin-top: 20px; }
#main p { font-size: 12px; }

ネスト（入れ子）
親セレクタ上記では#mainを何度も使用しなくても、入れ子にすることで子セレクタ管理も大変便利になります。
コーディングの時間短縮やメンテナンスも楽になります。

今まで、面倒くさかった要素を中央配置にする方法が、cssの position と transform を使用することによって簡単に実現可能になります。

覚えておくと今後コーディングする際の時短技になるかもしれません

.center {
width: 100%;
height: 500px;
position: relative;
}

.center .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);/*translate(X方向の距離, Y方向の距離)*/
}

IE8などのcss3未対応のブラウザなどでは使用できませんが、スマホなどやモダンブラウザ対応なら活躍できる技だと思います。

CSS3のtransformは、画像を魅力的に見せる場合などに、さまざまな演出が出来ます。

transformは、CSSだけで画像やboxなどを回転させたりできます。

しかし、IEなどはCSS3の対応は遅れているのが現状です。
ですが、transformなどの変形は、IE5の頃から、類似したものは実装されていたようです。

今回は、
filterを利用し、CSS3のみで類似の表現ができる、CSSのスニペットを紹介します。

.transform {
  -ms-transform: rotate(180deg);  /* IE9 */
  transform: rotate(180deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); /* IE5.5+ */
}

上記では要素を回転されることができます。
filterの場合は、(rotation=2)の1～4の間で、90度毎に回転させることができます。