超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポンシブWEBサイトをつくろう（カスタマイズ編）
- カテゴリー Web制作Tips
前回紹介した超シンプルで簡単にレスポンシブWebサイトが作れるフレームワーク「Responsive Grid System」に画像のスマートフォン時の対応や簡単なレイアウトを付け加えてブログフォーマットのベースになるような形をつくってみたいと思います。
前回の導入編をご覧になっていない場合はこちらからご覧ください。サンプルファイルの使い方などをまとめています。
今回はカスタマイズ編として、画像を使用する場合のレスポンシブ対応や、実際に原稿を入れる際に使用するHTML5の要素などを紹介しながら簡単なブログ風フォーマットを作成してみようと思います。
提供されているサンプルからここまで作るのかと思う方もいるかと思いますが、普通にHTMLとCSSが出来る人なら簡単にレスポンシブ対応することが可能です。
レスポンシブサイトでの画像の対応方法
レスポンシブサイトでスマートフォンなどのサイトへの対応として、1コードで対応する場合の問題のひとつとして、画像の対応をどのようにするかだと思います。
PCサイト、スマートフォンサイトを別で作成する場合は予めスマートフォンに対応した画像サイズやファイルサイズにすることができますが、1コードで行う場合は小さくしすぎるとPCで汚くなってしまうし、サイズが大きく、使用する数が多くなると、スマートフォンで読み込みが遅くなってしまうなどがありますので、media-queriesを使用して行う場合は画像圧縮サービスなどを使用したりして、極力軽量で綺麗な画像などにすることも意識しましょう。
※もしくはjQueryなどで画像を振り分けるという方法もあります。
画像ファイルを綺麗なまま容量を圧縮するサービス
また、画像の配置に関していえば、2カラムや3カラムのサイトが1カラムになることによって幅の小さい画面でもサイト全体が縮小されずに最適化するのでテキストなどは読みやすくなるが、画像はどうだろうか？このフレームワーク内には画像を入れる部分についてはなにも用意がないので画像の対応については自分自身で行う形となります。
画像の対応としては画像全体が幅に合わせて自動的に縮小されていく場合や、画像とテキストが回りこんでいる場合などに回りこみを解除して画像とテキストをわけて表示させるパターンが多いでしょう。
ただし、PCサイトでコンテンツエリア幅一杯で高さがあまりない長細い画像内に文字が入っている画像などは、スマートフォンでは縮小されて文字などを画像内に入れてある場合は文字が読みにくくなるので画像使用時に確認しながら作成しましょう。
viewportの設定とCSSの指定で画像を対応
media-queriesは主にブラウザ表示領域の横幅（width）や縦幅（height）を適用するCSSを切り替えるポイント（ブレイクポイント）として指定していくことになるが、現在まで発売されているスマートフォンのスクリーンサイズは様々あって、どの端末のどのサイズをブレイクポイントとして設定していけば良いかが問題となってきます。
そこで、meta要素の「viewport」に「width=device-width」を指定することで、各端末が持つピクセル密度によって端末の実際のサイズに合わせた横幅と縦幅に調整されるため、ある程度ブレイクポイントの指定範囲を絞りこめることができます。
スマートフォンなどのモバイルデバイスに対応させる際は、viewportの設定は必須と言えるでしょう。
viewportの設定とCSSで画像のスマートフォン対応
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1,initial-scale=1"> </head>
そしてCSSの方では、max-width:100%にすることでブラウザサイズに合わせて自動的に画像が縮小されていく形にすることができます。
img{
max-width: 100%;
height: auto;
width /***/:auto; /*IE8のみ適用*/
}
画像を縮小したくない場合の一例
たとえばブログなどでGoogle Adsenseなどを入れる場合は画像サイズの縮小はNGとなります。ですのでブラウザサイズを小さくした際に画像が小さくなってしまうのは避けなければなりません。
PCなどで極端にブラウザウィンドウを小さくした場合はレイアウトからはみ出す物はよいとして、iphoneなどで1カラムにする場合はレイアウトにもよりますが、300px以内の画像を使用すれば縮小されることはないでしょう。
.sample img{
max-width:300px;
}
このように画像全体は100%にして、特定のclassが設定されている部分はサイズ固定にしてしまうという方法もありますので、使用する用途にあわせて調整していくとよいでしょう。
また最近はGoogle Adsense側でも、レスポンシブ対応の広告が設定できるようになってきているのでその場合は必要ありません。
HTML5の文書構造を意識してサンプルサイトを作成
フレームワークの概要と画像対応ができたところで、最後にHTML5の文書構造を意識して、よく使うブログのレイアウトを、すぐに使える2カラムサイトを作成してみたいと思います。
HTML5では「コンテンツモデル」「アウトラン」原稿内容などによって使用する要素が変わってきます。よりセマンティックにマークアップするには、要素の使い方や使用する原稿は何を表すのかなどをしっかりと考えてマークアップしていきましょう。
<div class="container">
<header id="siteID" role="banner">
<h1>Moony Interactive</h1>
<p class="description">レスポンシブフレームワークサンプル</p>
</header>
<div class="row gutters">
<div class="col span_8">
<main role="main">
<article class="box">
<h1>言葉のない対話 -The zoological garden-</h1>
<h2>Photography</h2>
<h3><i class="icon-file-text"></i> インドライオン Lion</h3>
<p><img src="images/z01.jpg" alt="" width="250" height="250" class="alignleft">インドライオン（学名Panthera leo persica）は、・・・省略・・</p>
<p class="row">体の大きさや毛の長さ、体色などが地域によって異なるので下記の亜種があるとされている。・・・省略・・。</p>
・・・省略・・・
<p class="more"><a href="#">続きを読む</a></p>
</article>
</main>
</div>
<!-- /col span_8 -->
<div id="sidebar" class="col span_4">
<aside class="sideinfo" role="complimentary">
<h4><i class="icon-pencil"></i> Pick Up</h4>
<dl class="newentry row">
<dt>
<h5><i class="icon-file-text-alt"></i> <a href="http://www.html5-memo.com/" target="_blank">HTML5でサイトをつくろう</a></h5></dt>
<dd class="row">
<p><img src="images/bnr01.jpg" alt="" width="100" height="100"/>HTML5とCSS3でのサイト制作についての基本を勉強しながらまとめ、Wordpressでビジネスサイトを構築するために行ったことを連載しています。</p></dd>
・・・省略・・・
</dl>
</aside>
<aside class="ad" role="complimentary">
<ul class="bnr">
<li><a href="http://www.html5-memo.com/mdn01/" target="_blank"><img src="images/bnr336_wp.png" alt="" width="336" height="138"/></a></li>
・・・省略・・・
</ul>
</aside>
</div>
<!-- /sidebar -->
</div>
<!-- /row gutters -->
</div>
※サンプルファイルは一例ですので、これがHTML5の記述方法だということではありません。原稿内容にあわせて適切に考えていきましょう。
またCSSについては特に難しいコードではないので省略しています。サンプルファイルからcromeの要素を検証や書籍サンプルからご覧ください。
ゼロからHTML5の新要素や考え方を勉強したい人へ
すでにHTMLやxhtmlでサイトを作成している人で、「HTML5でサイト制作したい」「新要素を使うだけでなく意味もしっかり知りたい」という人に向けて、MdNインタラクティブで連載した「ゼロからはじめるHTML5でのサイト制作」として12回の連載でHTML5の新要素についてやXHTMLとのマークアップの違いをよく使うレイアウトを例にして解説していますのでこちらでもHTML5の勉強ができます。
http://www.html5-memo.com/mdn/
HTMLのrole属性について
サンプルファイルのHTMLの要素にはrole属性がついていますが、馴染みが薄い属性ですが、これは使用する要素が「どのような役割を持っているか」をrole属性として設定することができ、main要素と同じく、アクセシビリティーの観点から追加された要素になります。
サンプルで使われていたrole属性の中の「Landmark Roles」には下記のようなものがあるが、これらはHTML5の新要素と共にドキュメントの内容をより細かく定義することができるようです。
- role="application" ： アプリケショーン
- role="banner" ： ヘッダー部分
- role="complementary" ： 補助的情報部分
- role="contentinfo" ： コンテンツ情報、メタ情報
- role="form" ： フォーム
- role="main" ： メインコンテンツ
- role="navigation" ： ナビゲーション
- role="search" ： 検索機能
参考リンク： The Roles Model
ただし、使用する原稿によってわかりにくい部分があるようであれば、設定しなくても良いかと思います。
簡単に使えるアイコンフォント「font-awesome」で見出しにアクセントを加える
見出しも画像にすることで書体をデザインできますが、スマートフォンなどで画像が縮小されて読みにくくなる可能性もあるのでCSSやアイコンにはフォントアイコンの「font-awesome」を使用して作成しました。
フリーで提供されているアイコンフォント「Font Awesome」を使用することで、アイコンが表示され、フォントと同様にCSSによって色やサイズの変更が可能になるのでとても便利です。
今回ブログのリニューアルでもデザイン部分ではロゴ以外はすべてWebフォントを使用してデザインしています。
アイコンフォントについて
今回のサンプルでは、アイコン画像をアイコンフォントの1つ「Font Awesome」を使用したが、その他にも多数のアイコンフォントがネット上に公開され、これらの多くははSILライセンスで提供されています。
実用的で有名なアイコンフォントを紹介している「Fontello」は、それらのアイコンフォントの中から使用したいアイコンを選択すると、選択したフォントと対応するスタイルシートが含まれたデータ一式をダウンロードすることができるので、HTMLコードで設定したくない場合などはこちらがよいでしょう。
またアイコンフォントは自分で作成することも可能で、「ICONVAULT」や「IcoMoon」は、自分で作成したSVGなどのベクター形式のアイコンをアップロードすると、その場でそのアイコンフォントを無料で作成してくれるサービスもあります。
最後に
「Responsive Grid System」は最小限のレイアウトのベースで独自のルールもあまりないのでHTMLとCSSの知識があれば簡単に導入でき、コンテンツ部分は自由に作成したいという場合に、便利にレスポンシブ部分だけを活用できるのでるので、静的コンテンツの他にもWordpressサイトの構築でも便利に使うことができると思います。
現在のベースがモバイルファーストよりになっているが、自分の用途にブレークポイントを追加することによって、より細かくレイアウトを調整することも可能なので、カスタマイズして自分なりのフレームワークにするとよいでしょう。
ブログや中小規模のサイト制作では簡単に導入できるフレームワークではないかなと思っています。（予算多くないのでここまでの内容ででよいというサイトたくさんありますよね。）
書籍「HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック」
今回まとめた内容とサンプルは書籍「HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック」でも掲載しておりますので、是非そちらもご覧ください。
書籍の詳細情報はこちらから見れます
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら