今日学んだこと

読書感想文とか、勉強した内容とか

Webデザインを学ぼう!

SI屋なわたくし。

複雑なロジックを実装しろと言われたら、どんな言語だろうとそれなりに無難に作れると思ってるんですよ。

 

ただ、複雑な美しい画面作れとか、かっこいい画面作れとか言われると、もうホントお手上げになっちゃうんですよね。

ということで、HTMLやCSSをちょっと真面目に学んでみようかと思います。

コーディングの為の道具は?

DreamweaverとかCoda2、プロフェッショナルの為のお高い道具がいろいろある。ガチでやるなら金出しても良いものを使うべき・・・ですが、ここはEmacsで行きます。

Sublime textとかもイイよねとか思ったんですが、やっぱり好きな道具を使いたいということでEmacsです。

Emacsの設定は?

Web開発をしやすくする為の設定を入れていこう!と思い「Emacs web開発」で検索したら、真っ先にうちのサイトが出てきました。恐ろしや


web-mode以外にも、emmetなんてプラグインを入れてたりします。昔はzen-codingなんて呼ばれてたものですね。この動画とか見ると「Emacsすげー!」って思えるんじゃないでしょうか。


Emacs with HTML, Zencoding and YASnippet - YouTube

配色を考える

センスの無い人間にとって、配色を考えるというのは辛い作業以外のなにものでもない。自分のセンスの無さを数分おきに痛感する事になるので・・・。

そんな僕の様な人の為に、配色をサジェストしてくれる便利ツールが世の中には沢山あるので、こちらを利用する事にする。


われらがAdobe先生が提供しているツール。適当にいじってるだけでいい感じの配色を提案してくれます。

f:id:nakazye:20141215171015p:plain

iOS版もあったりするので、電車の中で考えることもできるのがうれしい。以下がその紹介ページ

レイアウトを考える

どうコーディングするかの前に、何ができるかを知る事が必要です。

モバイル対応とレスポンシブWebデザイン

スマホがこれだけ台頭してきてるなか、やはりモバイル対応というのは必須になってきています。

モバイルに対応するとなると、対応方法は大きく2つで

  • モバイル用のページを用意する
  • 同じコンテンツを用いて、PCとモバイルでレイアウトを動的に変える

となるかなと思っており、後者をレスポンシブWebデザインなんて呼んだりするらしいです。はてなは前者ですね。個人でモノづくりするにあたって、1コンテンツに2ページメンテするとかちょっと大変なので、後者を学ぼうかと思います。

どうやって勉強するか、ですが、僕は本を買ってみました。Kindle本なので、鞄を重くすることもありません。

 こちら、フルカラーの書籍となっており、Kindleで購入するならPaperwhiteよりもタブレットで読むのをおすすめします。

f:id:nakazye:20141215173111p:plain

 そして、このレスポンシブWebデザインで何ができるかというイメージを得る為には、実際のモノを見るのが一番かと思います。


こちら、その名の通り、レスポンシブWebデザインでスマホ対応(ものによってはタブレット対応)されたサイトの実例をこれでもかというほど見ることができます。

実際に紹介されている先をPCで見て、ブラウザの横幅を伸ばしたり縮めたりしてみてください。「こういう事ができるんだ」というのが体感できるかと思います。

 そこから、要素の配置をパク・・・参考にしつつ、モノを作っていけばいいのかなと思っています。

HTML5

テクニック的な話もありますが、HTML5では意味を持ったタグがいろいろと増えてるのがポイントかなと思っています。

HTML5 - Wikipediaから引用すると

nav要素(ナビゲーションのブロック用)や footer要素(作者や著作権の状態を表すまとまり用)や section要素(節)や progress要素(進捗状況)など、特別な意味を持つ要素が追加される。これらは検索エンジンのインデックス作業を容易にする。また、マルチメディアのための audio要素や video要素や2次元ビットマップ画像を描画するための canvas要素も追加される。

とあります。

このあたりは、「文字を太くしたい」とか「表組をしたい」などといったやりたいことドリブンでたどり着ける話ではなく、知ってるか知らないかの話になってきてしまいます。

ということで、ちゃんと学ぶ必要がありそうです。

こちらは、僕は紙の本を買いました。

 Amazonの評価から引用しますが

第1章で基本概念を説明した後はひたすらに各タグの説明が続くので、てっとり早くHTML5サイトを作りたい、という方には冗長に感じてしまうかもしれま せん。そのため、当方も購入を躊躇していたのですが、実際に読み進めたらば、なぜこのような形態を取らざるを得なかったのか、各ベンダー系サイトによるそ れぞれ解釈(?)の異なるマーク・アップの実例が提示されていることにより、よく理解できました。

といった形で、各タグの説明が丁寧にされてます。リファレンスとしても使えますが、章立ててまとまっており、通しで読んでも眠くなる事はありませんでした。

知ってる/知らないを知ってるに寄せる為にはホント最適な本だなーと思いました。

CSS・・・の前に。フレームワークを触ってみる

続いてはデザインのキモとなるCSSだ!となるんですが、こちらはホントできることが多く、漠然と学ぼうとしても途方に暮れてしまいます。

世の中には、再利用可能な形でCSSフレームワークとして配布してくれているものが沢山あります。

最初に、こちらを利用してみるのも手かもしれません。

日本語でも情報が沢山出てくるのは以下の2つでしょうか。

CSSの書き方を学ぶ

CSSで何ができるかを解説した情報は多いですが、どうコーディングしてどう管理すればよいかを解説した情報はあまり見かけなかったりします。

というか、僕はそんな事を考えた事もありませんでした。

本屋で偶然出会ったこの本で、考えが変わりました。

HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために

HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために

 

 ちょっと古いかもしれませんが、考え方は今でも通用するかと思ってます(CSSを効率的に開発する為にCSSメタ言語なるものがあったりするんですが、変わっているとしてもその部分で新しいものが出てきてるくらいかなと)

まさか、CSSオブジェクト指向なんて言葉が出てくるとは思いませんでした。衝撃でした。

参考:CSSメタ言語たち

その他いろいろ学ぶ

CSSでおしゃれな装飾のしかただとか、JavaScriptでかっこよく部品を動かすとか、学ぶことは色々あるかと思います。

ただ、こちらは、やりたい事ドリブンで学んでいくのがいいのかなーと思ってます。

漠然と学んでも、ゴール見えずに疲れ果てていつのまにか学ぶことを辞めてしまうというのが僕のよくあるパターンなので・・・

 

何が言いたいかというと、実際にモノ作るしかないよねーと。

今まで作ってきたもので改善したいところは沢山あるし、これから作りたいものも沢山ある。

だから、これからも、めんどくさがらず、楽しく、手を動かし続けていくしかないよね!、と

 

以上、最近いろいろとさぼりがちな自分へのメッセージでした!