カテゴリー: コーディング

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度毎に回転させることができます。

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

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

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

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

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

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

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

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

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

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

そうならないように

【<】：<（実体参照）／<（ユニコード10進数表示による数値参照） 【>】：>（実体参照）／>（ユニコード10進数表示による数値参照）

上記で

：<テキスト：>

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

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

IE6

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

#hackIe {
  _color: #000;
}

IE7

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

#hackIe {
  *color: #000;
}

IE8

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

#hackIe {
  color: #000\9;
}

IE8

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

:root #hackIe {
  color: #000\0/;
}

「:nth-child()」使い方として
リストなど連続している要素のn番目に対して、cssで処理を加えられる便利なものですが、

残念ながらIE8での使用はできません。
まだまだ、IE8対応のサイトもあると思うので、擬似的に:nth-child(n)が使用する方法を、
jqueryを使用して紹介します。

■html

  

    
1
    
2
    
3
  

■js
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘#test_list ul li:nth-child(3)’).each(function(){
$(this).css({color: ‘blue’});
})
});
</script>

注釈などの上付き文字タグのcssでの調整を紹介します。

テーブルなど注釈は使う機会が多いと思うので、覚えておくと便利です。

■html

テスト(※)

■css

span.sup {
font-size: 75.5%;
vertical-align: top;
position: relative;
top: -0.7em;
}

「px」などの絶対値ではなく「em」「%」などの相対値で指定しないと、ブラウザ間での相違があるので注意です。

文章を左揃えのまま中央にセンタリングしたい場合があります。

そんな時には、inline-blockを使用します。

inline-blockはtext-alignの指定を受けるので、
親要素にtext-align:centerを指定して中央寄せにすることが出来ます。

■html

  

    test
  

■css
.box{
  text-align: center;
}
.text{
  text-align:left;
  display:inline-block;
}