「レスポンシブWebデザイン」の作り方 入門

~レスポンシブWebデザインに挑戦!(HTML5 & CSS3も)~

タグ:RWD

レスポンシブWebデザインの実装(コーディング)についてまとめたページが一通り完成しました。

レスポンシブWebデザインの実装(基本編)

一通りと書いたのは、まだ、図表やイラスト等の画像ができていないからです。
しかし、テキストは完成しているので、UPすることとしました。

今後は、図表やイラスト等の画像の作成、UPに向けて、作業を進めて行く予定です。

「Viewportの指定」「フルードイメージの導入」「メディアクエリの設定」「フルードイメージの導入」等々、レスポンシブWebデザインの実装(コーディング)する上での、基本についてまとめていますので、よろしければ参考にしてください。
ブログネタ
ホームページ制作 に参加中!

ようやくサイト公開ができたわけですが、まだ未完成であり、暫定的なページがあるのも確かです。
現在、完成に向けて、鋭意制作中ですが。

もちろん、完成しているページもあります。
一つは、レスポンシブWebデザインのメリットやデメリット、そもそもレスポンシブWebデザインとは何か等々についてまとめたページです。

レスポンシブWebデザインの基礎知識

そして、もう一つ。
上述した「基礎知識」のページを作成したところ、思っていた以上のボリュームになってしまいました。
そこで、メリットやデメリット等々基礎知識の概要を簡潔にまとめたページを別に作りました。

レスポンシブWebデザインの基礎知識(まとめ)

残りのページ作成も頑張ります!
ブログネタ
ホームページ制作 に参加中!

まだ暫定的なページもありますが、サイトをUPしました。

レスポンシブWebデザインの作り方・入門

恥ずかしながら、一年ぶりの更新です。
本来の予定では、このblogは、サイトの下書きというか、まずはblogに記事を書きつつ、それらをまとめたものをサイト化しようと考えていたのですが、手が止まっていたのも事実。。。

しばらく前に、このままではいかんと思い、えいやっとサイトを構築することにしました。
で、ベータ版的な感じではありますが、とりあえずUPしました。

現在、サイトをより充実させ、完成を目指して鋭意制作中であります。

せっかくこのblogもあるわけですので、何らかの形で有効利用したいとは考えております。

何はなくとも、サイトのほうを、お時間があれば、ご覧にになっていただきたく思います。

レスポンシブWebデザインでのサイト制作の際、お役に立てるようなサイト、blogを目指したいと思います。

レスポンシブWebデザインの作り方・入門

ブログネタ
ホームページ作成 に参加中!

003_RWDとは

レスポンシブWebデザインへの挑戦を始めるに際し、まずは敵を知ることから、ではないですが、「レスポンシブWebデザインとは」について、簡単にまとめてみます。

レスポンシブWebデザインとは、マルチデバイス対応を実現するための、Webサイト制作手法の一つ。

極々簡単に、一言で説明すると、このような感じになるのではないでしょうか。
ただ、さすがにこれだけではあんまりなので、もう少し詳しく。

パソコン(PC)、タブレット、スマートフォン等の画面サイズの異なる様々なデバイス(マルチデバイス・マルチスクリーン)で、各デバイスで最適なWebサイトの表示を実現させるWebサイト制作手法が、レスポンシブWebデザインと呼ばれるものです。
なお、マルチデバイス対応を実現する手法はいくつかあり、レスポンシブWebデザインは、その中の一つということになります。

レスポンシブWebデザインの大きな特徴は、
 ・単一のHTMLソース(ワンソース)で実現できる
 ・画面サイズを基準にして、コンテンツを最適なサイズ・レイアウトで表示する
という点だといえます。

レスポンシブWebデザインを実現するためには、主に次の3つの技術的要素から構成されます。
 ・メディアクエリ(Media Query)
 ・フルードグリッド(Fluid Grid)
 ・フルードイメージ(Fluid Image)

レスポンシブWebデザインは、2010年5月に、海外技術系ブログで発表された手法で、この一、二年、注目が集まり、採用するサイトも増えてきたようです。
ただ、実際に、レスポンシブWebデザインでサイト制作を行おうとする際、特に、それが商用サイトなど、完成度をシビアに求められるものであればあるほど、様々な課題が残るのも、また実情のようです。

テクニック、ノウハウ等の情報の蓄積も進んでいるようですので、それらを参考にしながら、制作に取り組む必要があるでしょう。
しかし、最も重要なことの一つは、レスポンシブWebデザインのメリット・デメリットを理解し、これから制作するサイトへの採用が適切か否かの判断だともいえるかもしれません。

と、今、「メリット・デメリット」と書きましたが、どのような技術でも、利用、採用する際には、そのメリット・デメリットの把握、理解が欠かせません。
初めての技術等であれば、まず一番に気になるが、そのメリット・デメリットだといっても過言ではないかと思います。

なので、次の記事では、レスポンシブWebデザインのメリットとデメリットについてまとめてみたいと思います。
ブログネタ
ホームページ制作 に参加中!

002_books

レスポンシブWebデザインへの挑戦にあたり、まず購入した技術書、参考書類の書籍の紹介をしたいと思います。

レスポンシブWebデザイン関連の書籍としては、『レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック』と『レスポンシブWebデザイン「超」実践デザイン集中講義』の2冊を購入しました。

   

どちらも既に、一通り読みました。
現時点では、内容に不満はなかったです。
ただ、まだ実際に手を動かしていないので(レスポンシブWebデザインサイトを作成していないので)、詳細な感想は、また改めて紹介したいと考えています。

なお、両著とも、サイト制作未経験、HTML、CSSの知識に自信がないという方には、少々厳しいのではないかと思われます。

レスポンシブWebデザインに挑戦することを決め、まずは上述の2冊を購入し、一通り目を通したのですが、そこで初めて、(絶対ではないにしろ)HTML5とCSS3も避けては通れないことに気が付きました。
そこで、HTML5とCSS3関連の書籍『HTML5 & CSS3ステップアップブック』を購入。


HTML5、CSS3関連書籍は、レスポンシブWebデザイン関連書籍以上に多くありますが、HTML5以前の主流であった(現在もまだ主流かも)、HTML4.01、XHTML1.0からの書き換えに主眼が置かれているところに惹かれて決めました。
2012年4月発売開始という点が、少々気になったことは気になりましたが。。。

この書籍についても、実際にサイト制作を行った後に、詳細なレビュー、感想を紹介したいと思います。
なお、この書籍も、未経験者向けではないですね。
コンセプトがコンセプトですしね。

最後にもう一冊。
これは、購入予定はなかったのですが、書店で手に取り、内容に目を通して、思わず買ってしまいました。
現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』です。



既に、一通り目を通し終えました。
レスポンシブWebデザインサイト制作に未着手の現段階では、今回購入した4冊の書籍の中で、最も満足した1冊です。

レスポンシブWebデザインについても触れられていますが、それだけではなく、現在のWebの現状、流行、潮流、トピックの多くが紹介されている一冊です。
正直、しばらく、情報収集や学習をさぼってしまっていたので、非常に勉強になりました。
レスポンシブWebデザインへの挑戦という点からだけではなく、今後のサイト制作にも、大いに参考になりました。

僕のように、フリーでWeb制作を行っている方、Web制作会社ではない組織の中でWeb制作に携わっておられる方、それほど大手ではなく、常に最新の情報に触れているとは限らないような方などで、最新の動向、知識、技術のトレンドを押さえておきたいとう方々であれば、購入して損はないと思います。

また、この書籍も、他の3冊と同様に、サイト制作未経験者には、敷居が高い内容かと思われます。
ただ、この書籍に関しては、今後、真剣にサイト制作に取り組んでいく予定であれば、購入する価値はあると考えます。
理解できない内容も多いかとは思いますが、そこが、今後、学習、理解が必要な項目だということを、確認することができると思うからです。

以上が、今回、まず購入した4冊です。
追加の感想、レビューがあれば、また改めて紹介したいと思います。

ちなみに、書籍はネットではなく、書店で購入しました。
ただ、書店に行く前に、ネットで下調べはしました。
レビューの確認です。(主にAmazon)
レビューを盲信することはないですが、ある程度の参考になると考えています。

で、複数の購入候補を決めた上で、実際に内容をざっくとではあるが確認し、購入する書籍を決めました。
小説やコミックであれば、タイトルや作者名だけで購入するのも不安はないですが、技術書、特に入門書の場合は、確認した上で購入したいですよね。
相性もありますしね。

もちろん、ネット上に、非常に多くの情報があることもわかっています。
ただ、書籍・本には書籍・本の、ネットにはネットの、メリット、デメリットがあると思います。

書籍・本には、情報の更新性がない、有償である、場所を取る、持ち運びが不便等々のデメリットもありますが、体系的に学習できる、一度目を通してしまうと、必要な情報へのアクセスが、意外とネットを利用するよりも早いものだと、個人的には考えています。
PC等を起動する必要もないですし、同様の理由で、電気も不要ですしね。(まあ、実際は、部屋が暗いと始まりませんが。。。)

個人的には、これまでも、新しい技術等を学習するときは、ネットよりも、まずは書籍・本を選んできました。
今後は、若い世代を中心に、そのような点も変化していくのかもしれませんが。

もちろん、ネット上の情報にも、大変有用なものも多いと思いますので、機会があれば、また改めて紹介したいと思います。
ブログネタ
ホームページ制作 に参加中!

↑このページのトップヘ