おきがるみがる

お気軽&身軽にスナップ写真を楽しむ雑記ブログです。はてなブログテーマ Sentenceの配布も行っております。

スマホや古いブラウザにも対応させる -『HTML5&CSS3レッスンブック』第7章(完)

ここまで『HTML5&CSS3レッスンブック』の学習まとめを連投してきましたが、いよいよラストでございます。

最後はこれまで書いてきたコードの見直しと、デザインをスマホや古いブラウザにも対応させる仕上げとなります。

補足的な内容ではありますが、こうした見直しは重要だと思うのでしっかり学びましょう。

コードの見直しとデザインの対応

http://test.okigaru-migaru.net/html5css3/chap07/news01.html

今回は古いIEや一部のスマホでレイアウトが崩れるのを防ぐということがメインです。ゆえにとっても地味ですw

ただ、2段組レイアウトについてはかなり最重要な知識だと思います。特にブログ運営者にとっては。

最も変更点の多かったnews01.htmlのHTMLソースと、CSSの変更点を掲載しております。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=940">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">

<!--[If lt IE 9]>
<script src="html5shiv-printshiv.js"></script>
<![endif]-->
</head>
<body>

<header>
<h1><a href="index.html"><img src="logo.png" alt="">FOREST STUDIO</a></h1>

<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="news.html">お知らせ</a></li>
<li><a href="about.html">工房について</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>

<div id="container">
<div id="content">

<article>
<h1>真夏のひまわり畑</h1>

<p>森の工房の隣りにある畑は、毎年夏になると満開の<a href="https://ja.wikipedia.org/wiki/%E3%83%92%E3%83%9E%E3%83%AF%E3%83%AA">ひまわり</a>の花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲は約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>

<figure class="photo-center">
<img src="sunflower.jpg" alt="青空とのコントラストで黄色いひまわりが眩しく輝いています。">
<figcaption>夏のひまわり畑</figcaption>
</figure>

<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>

<aside>
<h1>RELATED POSTS</h1>
<ul>
<li><a href="news02.html">新緑の森を散策</a></li>
<li><a href="news03.html">雪を楽しむ</a></li>
</ul>
</aside>
</article>

</div>

<div id="menu">

<aside>
<h1>CATEGORIES</h1>
<ul>
<li><a href="…">季節</a></li>
<li><a href="…">イベント</a></li>
<li><a href="…">工房について</a></li>
<li><a href="…">登山</a></li>
<li><a href="…">散策</a></li>
<li><a href="…">キャンプ</a></li>
</ul>
</aside>

<aside>
<h1>ARHIVES</h1>
<ul>
<li><a href="…">12月の記事</a></li>
<li><a href="…">11月の記事</a></li>
<li><a href="…">10月の記事</a></li>
<li><a href="…">9月の記事</a></li>
<li><a href="…">8月の記事</a></li>
<li><a href="…">7月の記事</a></li>
<li><a href="…">6月の記事</a></li>
<li><a href="…">5月の記事</a></li>
<li><a href="…">4月の記事</a></li>
<li><a href="…">3月の記事</a></li>
<li><a href="…">2月の記事</a></li>
<li><a href="…">1月の記事</a></li>
</ul>
</aside>

</div>
</div>

<footer>
<small>Copylight &copy; FOREST STUDIO, all rights reserved.</small>
</footer>

</body>
</html>

文法チェックを行う

validator.w3.org

The W3C Markup Validation Serviceを使って、HTMLやCSSに問題のあるコードがないか文法チェックを行います。

「まぁテキスト通りにやったから大丈夫でしょう!」と思いながらやってみると、

Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

という警告が出まくりました。なんてこったい。

よくわからないのですが、おそらくh1タグは1ページにつき1個しか使えないってことなんですかね。定かじゃありませんが。

と、こんな感じに見直し点を教えてくれるので、間違ってないか不安があれば活用しましょう。

IE8以前でHTML5に対応させる

古いブラウザ、特にIEは未対応な点が多いです。

github.com

IE8以前ではHTML5に対応していないので「html5shiv」というプラグインをインストールします。

ディレクトリにアップしてヘッダーにコードを記述します。

スマホで表示される横幅を整える

スマホは環境によって表示できる横幅が様々です。

今回作っているサイトは横幅900pxなのに対し、iOSでは980px、Androidでは800pxで表示されます。iOSでは余白が大きめに、Androidでは余白0で表示されます。

これを統一するために、ヘッダーのmetaタグのname属性をviewportにして、content=“width=940px”と指定してやります。

すると余白が左右それぞれ20pxの表示で統一されます。

CSS

article * {
    background-color: inherit;
}

article time {
    display: inline-block;
}

header {
    zoom: 1;
}

#posts article {
    -webkit-text-size-adjust: 100%;
}

#photo h1 {
    zoom: 1;
    filter:progid:DXImageTransform.Microsoft.
    Shadow(Color=#000000, Strength=5, Direction=135);
}

#photo p {
    zoom: 1;
    filter:progid:DXImageTransform.Microsoft.
    Shadow(Color=#000000, Strength=5, Direction=135);
}

#photo a {
    background-color: #ffaa00;
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4NTIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkU3QjgiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkFBMDAiIG9mZnNldD0iMSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c4NTIpIiAvPgo8L3N2Zz4=);
}

/* 2段組み */
#container {
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#content {
    width: 600px;
    float: left;
}

#menu {
    width: 270px;
    float: right;
}

#content article {
    width: auto;
}

#content article img {
    width: 400px;
}

#menu aside {
    background-color: #ffffff;
    border: solid 1px #aaaaaa;
    padding: 20px;
    margin-top: 0;
    margin-bottom: 30px;
    -webkit-box-shadow: 1px 1px 3px #aaaaaa;
    box-shadow: 1px 1px 3px #aaaaaa;
    border-radius: 20px;
}

IE9以前でグラデーションを使う

IE9以前はグラデーションも未対応です。そこでSVGグラデーションと呼ばれるテクニックを使います。

testdrive-archive.azurewebsites.net

SVG Gradient Background Maker」で開始色と終了色、グラデーションの種類を選択して出力されたコードをCSSに追記するのみです。

photo aセレクタの長ったらしいコードがそれですね。

しかし、IE8以前はSVGグラデーションも未対応ですのでfilterプロパティを使います。ここでは説明を割愛します。

テキストの表示を修正する

デスクトップ環境と同じ表示にした場合、Android 4.xだとテキストの横幅が短く表示されるそうです。

Androidの環境が無いのでわかりませんが、何やらダブルタップで拡大表示した時と同じ横幅になるそうです。

そこでarticle *セレクタのback-ground-colorプロパティの値をinherit(親要素の設定を継承)にし、article timeセレクタのdisplayプロパティの値をinline-blockにすることで解決できるそうです。

後者はまだしも、前者の背景色を指定するだけで横幅が修正される理屈がよくわかりませんな。

また、iOSでは文字サイズが大きめに表示されてレイアウトが崩れます。そこでposts articleセレクタの-webkit-text-size-adjustプロパティの値を100%にすればデスクトップ環境と同じサイズで表示されます。

2段組レイアウト

この章で1番重要と思われる項目です。ブログでよくある2カラムはこの2段組レイアウトによるものです。

メインカラムにcontent、サイドバーにmenuと割り当てて、containerでこの2つをまとめるという形です。

この時、containerの横幅は900px、contentは600pxなのに対し、menuは270pxです。これでメインカラムとサイドバーとの間に30pxの余白が生まれる設定ですね。

つまりわざわざ余白を指定しなくてもいいってことですね。

これにて学習終了! 次は復讐がてらまとめます

分厚いテキストではありましたが結構すぐ終わりました。

テキストの本筋をなぞっただけで、細かい補足説明まで読み込むともう少し時間がかかるでしょうが、1日1チャプターとやると1週間で終わります。

でもざっくりとしか読めてないので、次はちょいと復讐がてらまとめつつ、学習の総評をしたいと思います。