HTML5&CSS3デザインブック マルチデバイス対応サイト構築 標準HTML5タグリファレンス
スマホサイトWeb WordPressなどのSEO
小画面 少コンテンツ 省テキスト 多画像対応の
コーディング実験検証
ご覧のサイト、SEO塾.comを1カ月足らずの突貫で作成するという身の程知らずの試みで、ほんとうに助けてもらった3冊の本。
具体的なコーディングのサンプルがなかったら、これらモダンWebの3冊なくして、サイトは完成しなかっただろうとも言える。
レスポンシブWebデザインやフラットデザイン(Material DesignやModern UIなども)などは、他の本やApple、Google、Microsoftのサイトなどで勉強して、
下記が非常に気になる見本のサイトだった。
もちろん、ビジネスサイトとしても、デザインとしても、足元におよばないが、とにかく目指したかったサイトである。
昔のNetscapeや、MS独自レンダリングIEなどの対応を思い出すほど、ウンザリしたが、
とくに、Appleが新しいデバイスを出すごとに、表示確認に追われ、胃の痛い日々である。
左がデバイス、右がブレイクポイントである。
(スマートフォンの縦では、下記表は、左右が上下に変わる)
パソコン | なし |
---|---|
タブレット縦 | 800px |
iPad縦・iPhone6Plus/6SPlus横 | 768px |
iPhone6/6S横 | 667px |
iPhone5/5S横 | 568px |
iPhone6Plus/6SPlus縦 | 480px |
Android縦? | 400px |
iPhone6/6S縦 | 375px |
iPhone5/5S縦 | 320px |
Androidのほうはいい加減であるが、iPadやiPhoneは手元にあるから仕方ない…
SEO目的では、ボックスの中にキーワード入りの見出しと段落のセットを格納する。
これらが、コンテンツとなり、内部リンクのタップターゲットとなる。
デバイスごとに、横縦ごとに、4カラムから3カラムに、最後は1カラムに、表示させたいわけだ。
4カラムは、パソコンと、タブレットの横縦、ファブレット(大画面スマホ)の横で、
スマホ横では、4カラムを2カラム×2に変化させたい。
ファブレットの縦でも、2カラムにするべきときもある。
そして最後はスマホ縦で、1カラム。
ここまでこだわると、いろいろなデバイスのブレイクポイントごとにCSSを書き足していくことになり、阿鼻叫喚。
SEO塾.comのベースは、絶賛販売中のSEOテンプレートである。
イーティーネット社製で、よくできている。
それだけに、やりたいようにやるには、HTMLコーディングとCSSの変更追記が大ごとになってしまった。
具体的には、別CSSを後読みするようにして、これにもリセットCSSを設定している。
画像中心ページ(あるいはページ内コンテンツパーツ)と、テキスト中心ページで、デザインやフォントサイズ、インデントなどをいじりまくっているので、これまた泣きの涙が止まらない。
画像は作成する暇もスキルもないので、購入して済ませた。
大散財である…
このような目標を、まがりなりにも実現できたのは、次のモダンWeb本たちのお陰である。
何をレスポンシブにしたいかはケースバイケースだろうが、まずミニコンテンツをボックスに入れて、この段組を変化させることが一番だろう。
いろいろ見回ったが、ボックスのフロートなら、この『HTML5&CSS3デザインブック』が最適だった。
Chapter 1 Webページにおける段組み
Chapter 2 Webページを作成する準備
Chapter 3 ブログ・ニュース系サイトのコンテンツページ
Chapter 4 ブログ・ニュース系サイトのトップページ
Chapter 5 ビジネスサイト風のトップページ
Chapter 6 ビジネスサイト風のコンテンツページ
著者のエ・ビスコム・テック・ラボの、書籍解説ページ↑
詳細な目次と、簡単な解説もあるので、ご覧いただければと思う。
上記と同じエ・ビスコム・テック・ラボの本
内容的に被るものもあるが、こちらはレスポンシブについて、非常に詳しく解説されている。
ボックスのフロートはもとより、画像のレスポンシブ化、スマホ対応で高速読込など、モダンWebのコーディングが実例入りで分かりやすく書かれている。
Chapter 1 マルチデバイス対応の指標
Chapter 2 ビューポートの設定
Chapter 3 デバイスに合ったページの用意
Chapter 4 デバイスの判別
Chapter 5 パーツのマルチデバイス対応
Chapter 6 画像の最適化
Chapter 7 Webページの高速化
とにかく、レスポンシブWebデザインの意味や、具体的な実装方法が、この本で完全に理解できるだろう。
同じく、著者のエ・ビスコム・テック・ラボの、書籍解説ページ↑
詳細な目次と、簡単な解説もあるので、ご覧いただければと思う。
こちらは、2012年1月刊なのに、未だにそばに置きっぱなし、代替本も見当たらない。
迷ったときにすぐにページをめくって目当てものにたどり着くので、ありがたい。
タグリファレンスで、左に解説、右にソース、見開き2ページで用が済む、親切なつくり方でもある。
第1章 HTML5の概要
第2章 ルート要素とドキュメントメタデータ
第3章 セクション
第4章 コンテンツのグループ
第5章 テキスト
第6章 編集
第7章 埋め込みコンテンツ
第8章 テーブル
第9章 フォーム
第10章 インタラクティブ
第11章 スクリプティング
目次を書いても意味はあまりないのだが、念のため。
2014年5月刊、上記『標準HTML5タグリファレンス』と同じ著者、藤本壱氏(および森史憲氏)の、より新しい本。
この書評を書いて、あらためてAmazonであれこれ比較して、この本を選んで通読したところ。
もちろん、HTML5プラスCSS3で、ポケットリファレンスのとおり、コンパクトな辞典のようなもの。
1ページに簡潔明瞭に解説が載っており、ちょっとした調べものでは利便性が高い。
カラーで見やすく、通読しても参考になることが多く、CSS3などはWebを検索してもまかなえるのだが、やはり本が手元にあると仕事もはかどる。
CSS3は、このようなポケット版でも辞典めいたものがなかったので、大変嬉しい。
とにかく新しいWebサイトをつくるなら、HTML5、CSS3、レスポンシブWebデザイン、スマホ対応サイト、モダンWebなどを勉強するなら、これらの本をお勧めしたい。