HTML5 & CSS3 ステップアップブックで作成したサイト

GreenLeaf

こんなサイトを作成する練習をしました。
セマンティックマークアップに修正して、CSSもそれに合わせて書き換え

Googleフォントの利用、図版のマークアップ
角丸、グラデーション、影、背景画像、半透明、リボン状表示、三段組レイアウト

スマートフォンタブレット対応、
ベンダープレフィックス、

ビデオ&オーディオの自動再生

タイトルロゴの隣の丸はcanvasで描写。
canvasについてはあまり理解できなかったけど、
とりあえずやってみた、という感じ・・・

「HTML5 & CSS3 ステップアップブック」読了

Webページのマークアップ&デザインを
HTML5CSS3に書き換える本でした。


HTML5 & CSS3ステップアップブックHTML5 & CSS3ステップアップブック
(2012/04)
ビスコ

商品詳細を見る


全部カラーで沢山の画面キャプチャと
とっても丁寧な説明が書かれていて
初心者でもつまづくこと無く、ステップ1つ1つ書き換えが行えます。

HTML5とCSS3の現状、
移行のメリットや新機能も説明してあるし、
セマンティックマークアップ、レスポンシブデザインといったものが
何なのかもつかむことが出来ました。


ただ、作業手順は丁寧に書いてあるものの
なぜその作業が必要なのか、そのタグは何なのかといった
説明は薄く、本を終えた時に何かを覚えた感じはあんまりせず。

HTML4.01もXHTMLCSSもまだ不慣れな私にとっては
頭がちょっとごちゃごちゃになっている感じ。
タグやCSSについて詳しく書いてある本が必要ですね。

******

初心者向けの本はすぐに読み終わるし内容も薄いので
沢山買っていたら破産しそう。
慣れたら後はネットである程度勉強するのが良いのかもしれない・・・

Dreamweaverレッスンブックで作成したサイト

Dreamweaverレッスンブック」で
作ったページ&学んだことをメモメモ

furinya

DreamWeaver基本操作、サイト定義
HTMLマークアップ、画像挿入、表作成、リンク指定

kazmaz

CSSによるデザイン、レイアウト
テンプレート利用、
スマートフォンサイト作成
スマートフォンアプリ作成(PhoneGap)

*****

Dreamweaverでは「デザイン(or分割)」や「ライブビュー」で
実際のブラウザー上にページが表示される様子が見れるのですが
これがあんまり正しくなくてがっかりでした。

わざわざ有料のものを使わなくても
他の無料エディタでも十分なのかも?と感じました

まだまだDreamweaverの機能を
使いこなしていないからなのかもしれませんが。

Dreamweaverレッスンブック読了


Dreamweaverレッスンブック Dreamweaver CS6/CS5.5/CS5/CS4対応 (-)Dreamweaverレッスンブック Dreamweaver CS6/CS5.5/CS5/CS4対応 (-)
(2012/06/11)
関口 和真

商品詳細を見る

---------------------------------------
<学んだ事>
Dreamweaverの操作方法
・世の中のWebページはCSSでデザインされているって事
・レスポンシブデザイン
---------------------------------------

初めてDreamweaverの操作をしたのですが、
画面キャプチャ付きの丁寧すぎるほどの説明のおかげで
挫折知らずでサクサク進められます。

(≡д≡) <・・・がっ!

作業手順は丁寧に書いてあるものの、
なんでその作業を行うのかがあんまり書いてないので
本当にDreamweaver操作に”慣れる”為の本と言う感じ

HTMLとCSSについては別の本を読んでみましょう。

Java勉強よりも、見た目が劇的に変化していく
コーディングの作業、出来上がっていく感じがあって楽しー。