ネガティブマージン

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

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

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

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

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

nth-childのネガティブ指定

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

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

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

コーディングを速くする「EMMET」

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

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

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

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

wpの自動整形機能の回避

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

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

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

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

Sassとは

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

■Sass(.scss)

■CSS(.css)

ネスト(入れ子)
親セレクタ上記では#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未対応のブラウザなどでは使用できませんが、スマホなどやモダンブラウザ対応なら活躍できる技だと思います。

IE8でのtransform使用

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

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

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

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

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

IE8でのbackgroundSize

IE8ではbackground-sizeのcoverやcontainの設定ができず、
div内にimgとして横幅100%と設定するなどの対応がめんどくさいと思います。

どうしてもIE8での背景でcoverやcontainを使用したいという場合、backgroundSize.jsというjsを使用すると便利です。

記述は以下のように、背景指定したいdivを下記のように記述するだけです。

文字参照

文字参照は、HTMLで、記述することが出来ない文字を記述するための記述方法です。
要するに①などの環境依存文字を文字化けを起こさないようにするためのものです。

数値文字参照は
文字コードを用い、書式は

&#文字コード;のようになります。

また、コーディングでは、

のような「<」とか「>」という記号そのものを本文で使用すると、

「<」と「>」でくくられてるものがブラウザでタグとして解釈されてしまい、

例えば<本文>という風に使用してしまうと、意味不明のタグとして解釈されて無視されたりします。

そうならないように

上記で

と表記するとブラウザでは<テキスト>と問題なく表示されます。

IE対応 CSSハック

IEなどのブラウザ毎にレイアウトが崩れたりしないようにする緊急用cssハックです。

IE6

「_」をつけることでハック!

IE7

「*」をつけることで対応できます

IE8

プロパティの最後にに「\9」をつけることで対応できます

IE8

親要素に:rootを記述して「\0/」をつけることで対応できます