感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

Webデザインの新しい教科書を読んだ感想と学んだことのまとめ

<スポンサーリンク>

Webデザインの新しい教科書を読んだ感想

まず、この本は良くも悪くも「教科書」だということだ。
良い点は、基本の基本から、モダンなWebページの開発を解説してくれるところだ。
また、簡単ではあるがサンプルも載っていて、実際に手を動かして学ぶことができる。

悪い点は、あくまで教科書であり、ある意味では退屈だということだ。
つまり、基本をしっかり丁寧に解説する代わりに、突飛で楽しい記述はなく、「かんたん、やさしい Webデザイン」的なノリでは書かれていない。
(実際には噛み砕いて説明してあるのだけれど)
あくまでHTMLの基礎を淡々と、でも手抜き無く解説してくれる本だ。

だから「手早く"やってる"感じを得て楽したい」というタイプの人が読むと、きっとつまらなくなって途中でやめてしまうと思う。

この本をバスケの練習に例えるなら、ボールを使った練習に入る前のフットワークみたいなものだ。
退屈だけど、絶対にやらなければいけないもの。それが「Webデザインの新しい教科書」の位置づけだと思う。

でもこの本を読むことは、部活に比べたらよっぽど楽だ。

だって、中学だけでも、3年間。
毎日1時間以上、走りっぱなしだった。
あの頃のフットワークに比べたら、Web開発の勉強なんて机に座って3時間くらいでひと通り読めるし、手を動かして真似しても1週間で読み終わることができる。

これを読み終われば、いきなり試合に出る(=Webサイトを作って公開する)こともできる。
部活をやってたときなんか、初めて試合に出るためにどれだけの時間を費やしたことだろう。

そういう意味で、この本は寄り道せずに最初に読むべきだったと思う。避けてはいけない大切な基礎を伝えてくれる本だから。
こないだたまたま本屋に行ったときに、たまたま出会えてよかった。

繰り返し読んでいきたい。

あと、「なぜそうなるのか」をちゃんと解説してくれるところも、この本の特にいいところである。

基礎から覚える、深く理解できる。 Webデザインの新しい教科書

基礎から覚える、深く理解できる。 Webデザインの新しい教科書

「Webデザインの教科書」から学んだ参考になるWebサイト

Twitter Bootstrap
あらかじめ用意されたテンプレート化された仕組みを元にWebサイトが作れるフレームワーク
http://twitter.github.io/bootstrap/
Twitter Bootstrapを解説した記事
http://blog.asial.co.jp/887

■ToDoMVC
さまざまなJavaScriptフレームワークを使ったシングルページアプリケーションの実装例が公開されているページ
http://todomvc.com/
・ToDoMVCについて書かれた記事
http://www.publickey1.jp/blog/12/javascript_mvctodotodomvc.html

はてなブックマークの海外版
・Delicious
https://delicious.com/

HTMLの要素は何の略か。

いつも何気なく使っていたHTMLのタグだが、ちゃんと意味がある。
英単語は語源を知ると覚えやすいように、HTMLのタグも意味がわかると覚えやすい。
Webデザインの教科書が一番わかりやすく説明してくれていたので、改めてまとめ直してみた。

要素 何の略? 意味
h heading 見出し
p paragraph 段落
em empasis 強調、重要視、重点
strong strong emよりさらに強調
sup superscript 上付き文字。2乗とか書くときに使う
sub subscript 下付き文字、H2Oとかで2を小さくしたいときに使う
blockquote block-like quotation 固まり状の引用。文章のまとまりを引用するために使う。
q inline quotation 語句の引用を示す際に使う
cite citation 引用元、週ってん元の情報源の参照を示すのに使用する。
br forced line break 強制改行
hr horizontal rule 水平羅線
del deleted text 削除されたテキストの意味。打ち消し線をつけるのに使う。
ins inserted text 情報の追加を意味する。
img image おなじみ。画像。
src source おなじみ。情報源、参照先。
alt alternative text 画像が表示されないときなどの代替テキスト。
a anchor 意外と知らない。aタグはanchorの略。つなぎとめるという意味。
href hypertext reference 参照するWebページ。
id identifier 識別子
address address 連絡先情報をマークアップする。
ul unordered list 順不同リスト。ulはli要素とセットで使う。
li list item リストの項目。箇条書きリストの項目をマークアップする。
ol ordered list 番号順リスト。1,2,3などと順番にリストにするのに使う。
div document division 区分を意味する。
span span of content 範囲の意味。
tr table row
th table header 見出し
td table data 内容

画像フォーマット

画像フォーマット 色数 適するもの
JPG 約1678万色 写真、色数の多いもの。
GIF 256色 ロゴマーク、色数の少ないイラスト。
PNG-8 256色 ロゴマーク、色数の少ないイラスト
PNG-24 約1678万色 画質を落としたくないもの

JPEG形式の画像は、画質が低下するほど鮮やかだった色がくすんで見えたり、ノイズが発生しやすくなる。
JPEG形式で保存された画像は保存を繰り返すたびに画質が悪化していくので注意が必要。

用語

・meta要素とは、Webページの仕様を伝えるもの。
文字コードUTF-8が最も一般的である。
・ブロック要素は情報を「ひとつのブロック」として扱う。
・インライン要素は文中の一部分だけに適用したり画像を入れたりと、ピンポイントに使う場合に適用する。
・ピクセルとは、コンピュータの画面を構成する小さな正方形の集まりの1つのこと。picture elementの合成語。

読んだ本

繰り返しになるけれど・・・。

基礎から覚える、深く理解できる。 Webデザインの新しい教科書

基礎から覚える、深く理解できる。 Webデザインの新しい教科書

感謝のプログラミング

今回で感謝のプログラミングは【341時間目】
10000時間まで、あと【9659時間】

ある程度まとめて読んだものを復習としてブログに書くことにしたので、記事数は減ってしまっている。
どの程度でアウトプットするかはこれから試行錯誤していきたい。