ラベル IE Hack の投稿を表示しています。 すべての投稿を表示
ラベル IE Hack の投稿を表示しています。 すべての投稿を表示
2012/06/24

IE対応済み！今すぐコピペして使えるHTML5テンプレート

HTML5が流行り始めて結構経ちました。
個人的にもHTML5でサイト制作したいなーと思っていたので
まずはHTML5のテンプレートを用意しました。
最近のサイト制作ではjQueryを使うことが多いようなので
jQueryも対応しています(ハイライト部分)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="author" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <!--[if lt IE 7]>
        <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
        <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
    <![endif]-->

    <!-- page content -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="js/script.js"></script>
  </body>
</html>

解説

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Google Chrome Frameという色々な制限によってアップデート出来ない環境にあるIEのためのプラグインです。
ユーザーがGoogle Chrome Frameを入れている場合に対応するためのmetaタグです。
Chrome Frame: Developer Guide - The Chromium Projectsによるとchrome=1では常にChromeとして表示し、
Chrome=IE6と指定するとIE6以下だけChromeとして表示し、それ以外のブラウザではそのまま表示するそうです。
参考：Google Chrome Frame FAQ - The Chromium Projects
Google Chrome Frame plugin - Google Chrome ヘルプ

<meta name="viewport" content="width=device-width">
iOSでページ幅と初期倍率などを設定する場合に指定します。
詳しい指定の仕方はSafari HTML Reference: Supported Meta Tagsを参照。

<!--[if lt IE 9]>
    <script src="js/html5.js"></script>
<![endif]-->
まず、11, 13行目はバージョン ベクタと言ってIE判別に使うコードです。
12行目はIEでもHTML5の新要素に対応するためのJavaScriptです。
他にも印刷で崩れないようにしたり、新要素のデフォルトのスタイルを指定したりしているようです。
html5shiv - HTML5 IE enabling script - Google Project Hostingからダウンロードすることができます。
設置場所は<body>より前(例えば<head>内)でなければならず、パフォーマンス上CSSの後がオススメだそうです。
参考：CSSでIEの特定バージョンだけに対応する簡単な方法 | 某氏のたわごと NEXT
[CSS]IE9対応、IEの各バージョンごとに異なるスタイルシートを適用する方法のまとめ | コリス
HTML5入門－html5.jsでIE対応－｜mayy

追記(2012/06/28 7:27)

html5.jsはZIPをダウンロードしてdist/html5.jsを使ったほうが良いとされていましたのでコードを変更しました。
理由はコチラが詳しいです→IE対応でよく利用するhtml5shivの使用方法変更について｜Blog｜Skyward Design

<!--[if lt IE 7]>
    <p class="ie_fuck">お使いのブラウザは<strong>古い</strong>ため、表示が崩れることがあります。
    <a href="http://browsehappy.com/">他のブラウザ</a>を使うか、<a href="http://www.google.com/chromeframe/?redirect=true">Google Chrome Frame</a>をインストールすることで正しく表示することができます。</p>
<![endif]-->
つまり何が言いたいかってのはクラス名の通り。むしろ[if IE]でもいいんじゃないですかね。
IEだけCSSがちゃんと動かないとかIEのためのCSSハックとかファックですよね。
個人的には切り捨てちゃうんだけど仕事だとそんな事言ってられないので工数いっぱい欲しいですね。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
Initializr - Start an HTML5 Boilerplate project in 15 seconds!で生成されるHTML5テンプレートにあった書き方。
23行目でCDN(コンテンツデリバリネットワーク - Wikipedia)から読み込んでいる。
CDNはなんか最適化されていて高速らしいし、ブラウザのキャッシュが効くのでロード時間の短縮が期待できるとか。
24行目で読み込めているかチェック＆読み込めてなかったら自分のを読み込む処理を書いているらしい。
参考：jQueryをロードする際のナイス！と思った書き方

一応これで今すぐ使えるはず。HTML5/CSS3対応のリセットCSSやノーマライズCSSについては今度まとめたい。

追記(2012/06/30):<meta name="format-detection" content="telephone=no">について

アドバイスを頂いたのですが知らなかったのでググってみました。
iPhoneのSafari用のメタタグで、電話番号リンクに自動変換するのを制御するものだとか。
この電話番号への自動変換が結構アホの子らしくてIPアドレスとか小数が誤認識されるので付けたほうがいいみたいです。
参考：iPhone向けSafari、HTML拡張属性を使いこなす | 株式会社シンメトリック公式ブログ - 携帯開発から生まれる技術情報
このエントリーをはてなブックマークに追加
タグ: , , ,
2012/02/08

BloggerをIEで開くと最新版でもIE7として表示されることによる問題

記事フッターのソーシャルボタンがIEだけ右の画像のように改行されてました。
画像には写りきってないですがソーシャルボタンだけで3行使っていて
レイアウトがカッコ悪くてどうにかしたかったのですが原因不明なので諦めてました。

各ブラウザの最新版をサポートするはずの
Gorw!ボタンの背景が白くなっていたので
とりあえずTwitterに投げときました。

きっとGrow!の中の人が
エゴサーチして対応してくれると
思ってた(・ω＜)ﾃﾍﾍﾟﾛ

本当に対応していただいて、
実はBloggerのテンプレートにIEを見たらIE7だと思えというアレなコードが入ってたということでした。
以下がそのコードです。
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
2行目の部分を削除することによってIE9などで開いてもIE7として表示されることはなくなります。

最新版のIEさえもIE7として認識させる理由はなんなのでしょうね…。
IE7の方がマシなんてことは普通ないと思いますけど…。

不具合報告ってほどのことをしてないけどお礼にGrow!してもらっちゃった！やった！(*´∀｀*)

それではー
このエントリーをはてなブックマークに追加
タグ: , , , , ,
2012/02/05

Bloggerのラベルウィジェットのカスタマイズ

ラベルウィジェットを設置したのだが
ラベルを表示させると縦に羅列されて、
サイドバー以外に設置する場合は
あまりにもスペースを取りすぎるので
カスタマイズしました。
ラベルウィジェト自体はHTMLのリストタグを
使って構成されているので
CSSをいじって横に並べるようにしました。
floatを使ったリストの基本的な横配置です。
.list-label-widget-content ul li{
    float: left;
    margin-right: 3px;
    white-space: nowrap;
}
これで置いてみるとラベル名と()で囲まれた投稿数が半角スペース1つ分くらい空いていて
投稿数が左右どちらのラベルに対応しているかわかりにくかったのでカンマを挟んで、マージンを設定しました。
<b:widget id='Label1' locked='false' title='ラベル' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='"widget-content " + data:display + "-label-widget-content"'>
    <b:if cond='data:display == "list"'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='"label-size label-size-" + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<a expr:href='data:blog.canonicalHomepageUrl + "feeds/posts/default/-/" + data:label.name + "?alt=rss"' expr:title='data:postLabelsLabel + " " + data:label.name + " (RSS)"'><data:label.count/></a>),</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>
なぜか、white-space: nowrap; を設定しないとIE7以下で正常に表示されません。
コレを取るとリストの表示幅終端付近で押しつぶされたタグが表示されるので必須です。

追記(2012/03/31)
ラベルカウント部分にラベル毎のフィードへのリンクを追加しました。
参考：Windup T: Blogger - ラベル別のフィード配信
このエントリーをはてなブックマークに追加
タグ: , , , , ,

タグ(RSS)