IE8でのbackgroundSize

admin コメントをする

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

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

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

文字参照

admin コメントをする

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

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

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

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

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

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

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

そうならないように

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

上記で

：<テキスト：>

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

IE対応　CSSハック

admin コメントをする

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()をIE8で使用する

admin コメントをする

「: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>

上付き文字の調整

admin コメントをする

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

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

■html

テスト(※)

■css

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

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

ホバー時の動作を指定する

admin コメントをする

グローバルナビゲーションのホバー時に、サブナビゲーションを表示させたりなど、

便利な方法を紹介します。
この方法を使えば、指定した場所にホバーすると、特定の要素を表示させることができます。
<ul id=”sub_nav”>
    <li>ナビ１</li>
    <li>ナビ２</li>
    <li>ナビ３</li>
</ul>
$(function() {
  $(‘sub_nav’).hover(function() {
    ホバー時の動作
    $(this).css(‘display’, ‘block’);
  }, function() {
    ホバー解除の動作
    $(this).css(‘display’, ‘none’);
  });
});

左揃えのまま中央寄せ

admin コメントをする

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

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

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

■html


  

    test
  





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

WordPressにAI・PSデータをアップロードする方法

admin コメントをする
WordPressでは、アップロードが可能なファイル形式が決まっています。
ファイル形式が許可に設定されていないと、ファイルをアップロードした時にエラーになります。
今回はアップロードが許可されていない拡張子のファイルのアップロードができる方法を紹介します。
■AIデータのアップロードを許可
function allow_mime_type( $mimes ) {
$mimes['ai'] = 'application/postscript';
return $mimes;
}
add_filter( 'upload_mimes', 'allow_mime_type' );
上記は、aiファイルをアップロード可能にするための内容です。
この方法を使えば、AIファイルだけでなく動画ファイルなど、アップロードできなかったファイルをアップロードができるようになるので便利です。

Browser CSS-Selector-Test

admin コメントをする

「Browser CSS-Selector-Test」はブラウザがCSSセレクタをサポートしているかの有無を確認できます。
CSS3のなど場合、現状で使用できるかを確認する時に便利だと思います。

使用方法は、
確認するブラウザでサイトにアクセスした後、中央にある「Start test!」のボタンをクリックするだけです。

対応状況は
CSS1～CSS4までのサポート状況を確認することができます。

具体的に調べたい場合は、下部に表示されるリストで確認することができます。

緑色で表示されているのは対応しているセレクタで、赤色がが未対応のセレクタとなっています。

便利な CSSセレクタ

admin コメントをする

nth-childのような～何番目を指定できる便利なセレクタがたくさんありますが、
それ以外にも便利なセレクタが存在します。

1. :matches()

■css
box_01 h1,
box_01 h2,
box_02 h1,
box_02 h2,

:matches(box_01, box_02) :matches(h1, h2){}
:matches()を使えば、シンプルにcssを記述することができます。

 

:-webkit-any() {
　　color: #0060e6;
}
:-moz-any() {
　　color: #0060e6;
}

:matches()はSafariのみ対応していますが、
Firefox・Chromeなどでは:any()擬似クラスを使うことになっています。