クリエイター：コーディング備忘録ブログ – ページ 53 – クリエイター：コーディング備忘録ブログ

IE8への対応をいつまで考えるべきか

まだまだ、IE8への対応を考えて、コーディングを気をつけていますが、IE8への対応をいつまで考えるべきでしょうか。

プログレッシブエンハンスメント

最新のモダンブラウザでは高機能を活かした表示をして、古いブラウザでもそれなりに表示することができるようにコーディングをする。
このようなWebコンテンツ制作はプログレッシブエンハンスメント(Progressive Enhancement) と呼ばれています。

最新ブラウザでは HTML5 と CSS3 による高機能な表示を、古いブラウザ ( IE8 や IE9 ) でもそれなりに使えるサービスを提供する、といった制作方針です。

IE8 と IE9 のシェアはあわせて 7%

パソコンでのシェアでは、日本国内での IE8 と IE9 のシェアはあわせて 7% ほどです。

古いブラウザで利用できて、安全が高いWebサイトを制作するというのは、時として相容れません。
両立することはできませんから、選択が必要です。

対応としては1.HTML5のタグにCSSを設定しないことや、2,html5.jsを使用して、ライブラリを組み込むことによって、IE8 未満でも HTML5 の新要素が認識されるようになるので対応は可能といえば可能ですが、
IE8のサポートは終了するけど、IE8を使わない人がいないわけではないので、念のため最低限は対応するか、安全性を考慮して切り捨てるか、選択するする必要があるのかとも思いました。

固定ページのパーマリンクを投稿名.htmlにする

2017/9192017/919 admin コメントをする

WordPressのパーマリンクのカスタマイズをご紹介します。
WordPressは動的にページが生成されますので、URLには「.html」が付きません。
が、疑似的につける方法があります。

アクションフックを使って、デフォルトのパーマリンクを上書きします。
下記をfunction.phpに記述しましょう。

/**
 * 固定ページのパーマリンクを投稿名.htmlに変更
 *
 */
add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
function mytheme_init() {
global $wp_rewrite;
$wp_rewrite->use_trailing_slashes = false;
$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
}
}

カスタム投稿を使っている場合には、下記のプラグインも有用です。
Custom Post Type Permalinks

IEでWebフォントを表示させる

サーバ上にフォントをアップロードすることによって、閲覧者のPCのブラウザで扱えるようにすることで、PCの環境に左右されないで、フォントを表示させることが可能です。これをWebフォントといいます。
ですが、フォントの形式によって、注意すべき点があります。

IEでのフォント形式は.eot形式のみ

それは、InternetExplorerが認識できるフォントは.eot形式であることです。
また、この.eot形式はIE独自のものなので、FirefoxやGoogleChromeなどのモダンブラウザでは認識できません。

もし、TTF形式のフォントをWebフォントとして用いた場合、GoogleChromeとIEでは以下のように表示されるフォントが異なってしまいます。

そこで、フォントを変換してくれる便利なサイトを紹介します。
otf to eot converter
https://everythingfonts.com/otf-to-eot

otfファイルをeotファイルに変換してくれるので、とても便利です。

IE8 対応コーディング

対象ブラウザがIE8以上の案件がまだまだ多いですね。
IE7対応を考えなくても良くなってコーディングはしやすくなりましたが、「IE8」でもまだまだ使えないプロパティが多いです。
そこで今回は、「IE8対応のポイント」をまとめます。

HTML5に対応していないこと

HTML5のサイトでhtml5shiv.js IE8に読み込ませて対応する。
ですが、html5shiv.js を使った方法では、 HTML5要素をレイアウト崩れしないようにしてくれるのですが、あくまでもそれだけです。

opacityのバグ

opacityのプロパティを設定すると背景が濃くなってしまったりするケースがあります。
IE8のopacity操作には注意が必要です。

background-sizeが設定できない

IE8 では未対応なので対応させる為には jQuery プラグインなどを使用するか、imgなら100%指定が可能なのででposition:absolute;で設定する必要があります。

「:last-child」や「:nth-child(n)」が使えない

:first-childは使用可能なので、:first-child+*などcssの書き方を変えて、対応するしかありません。

background-sizeをIE8に適用させる

IE8ではbackground-sizeの指定が効きません、そこで jquery.backgroundSize.jsというプラグインを使用することによって、 background-sizeのプロパティの指定ができます。

適用することのできるbackground-sizeは

auto 自動で算出する（初期値）
contain 縦横比は保持したまま、背景の領域に収まる最大サイズになります
cover 縦横比は保持したまま、背景領域を覆う最小サイズに拡大します
px pxで数値指定
% %で数値指定

記述するjquery

nth-child、last-childをie8でも使いたい

カラムの横並びのマージン指定のときに:nth-childは便利です。しかしIE8以下は対応してません。

※ :first-child のみ対応してます。

どうしてもie8でもnth-child擬似クラスを使いたいときのハック。

ul.line-boxies > *:first-child+*+*{
margin-right:0;
}

first-childの+*(次)+*(次)で3番目にfirst-childを適用しています。

CSSで実装するホバーエフェクト

アニメーション・エフェクトを使用すれば、ウェブサイトのデザインを魅力的に魅せるだけでなく、ユーザーの注目を集めることができます。
今回は、サイトコンテンツ表示に活用できる、HTML/CSSのみで実装できるホバーエフェクトをまとめています。

ホバー時にアニメーションさせるには「transition」というプロパティを使用します。

■transition　プロパティ　時間　アニメーション;
最初のプロパティはアニメーションさせるプロパティを指定します。例えば「all」とすれば設定したすべてのプロパティがアニメーションされます。
アニメーションの種類は「ease」「linear」「ease-in」「ease-out」「ease-in-out」「cubic-bezier」を指定することができます。

.transition01{
transition: background-color 3s linear 0.1s;
}

.transition01:hover{
background-color: red;
}

box-shadowを使用したデザイン

画面に立体感をもたらすシャドウ。デザインで最近シャドウを取り入れたサイトをよく見かけます。
そこでCSSで指定した要素に影をつける方法を紹介します。要素に影をつけるにはセレクタにbox-shadowを使用します。

基本的なHTMLとCSSは下記の通りです。
■html

影

■css
.shadow {
box-shadow: 1px 3px 5px 5px rgba(0, 0, 0, 0.2);
}

指定している各数値は左から、水平方向に1px、垂直方向に3px、ぼかしの具合に5px、ぼかしの広がりを5px、色（色+20%）を指定しています。
box-shadow ( 水平垂直ぼかしの具合ぼかしの広がり色（色+透明度） );

CSS で影を付ける方法は他にもfilterのプロパティのdrop-shadow でも影を付けることが可能です。
ただし、box-shadow で指定できる inset（内側の影）とぼかしの広がり具合を指定できません。

search.php：検索対象の絞り込み

2017/982017/98 admin コメントをする

WordPressで検索を作る際に、カスタム投稿の中だけを検索対象にしたい。
そういった場合のfunction.phpへの記述をご紹介します。

参考：http://works.coldsleep.jp/blog/search-method/

function SearchFilter($query) {
  if ($query->is_search) {
    $query->set('post_type', 'カスタム投稿名');
  }
return $query;
}
add_filter('pre_get_posts','SearchFilter');

これでめでたく、カスタム投稿に作った記事内容だけが検索結果に表示されるようになりました。

文字を縦書きにする

WEBサイトの大体は上から下にスクロールするよう構成されています。そのため、縦組みではなく、左から右への横組みで作られているサイトがほとんどです。

ですが、和風のサイトをデザインする際などに、縦組みで制作すると効果的だと思います。
そこで今回は、html上で文字を縦書きにする方法を紹介したいと思います。CSS3から対応したプロパティなので、古いブラウザでは対応していない場合があります。

■html

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

■css
p {
font-family:’明朝B’;
-webkit-writing-mode:vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
　-webkit-font-feature-settings: ‘pkna’;
font-feature-settings: ‘pkna’;
width: 100%;
height: 150px;
}

日本語は縦（vertical）の右から左（Right to Left）なのでvertical-rlを用います。

文章に明朝体を与えています。
font-feature-settingsはpknaを指定しないと大体のブラウザで崩れます。