制作開始

ぼちぼち次の課題の制作を開始。
次の課題といっても、通っているスクールは三か月コース。八月末には修了するので、このサイトが最後の制作になる。
学んだことを駆使して……といっても今現在折り返しぐらいなので、まだまだ習っていないことだらけ。それでも授業終わってから考えよーではとてもじゃないが終わらなさそうなので、すこしずつつ準備を始めていく。

今回は自由テーマだったので、金魚の生体販売サイトにした。
金魚…は飼ったことないけれど、好きなので。パスでじみじみなぞるのも楽しそうという……安直？

サイトの構造がぼんやりとまとまってきたのでとりあえず、Fireworksでワイヤーフレームをつくっているところ。
（ちなみに画像に移っている金魚はらんちゅうではない）
前回の花屋のサイト制作で、自分のページの操作性の悪さに作り終わってから気づかされたので、できるだけコンパクトにまとめようと思った。
現在、多くのユーザーのファーストビューは大体1000×600～700px程らしいので、だいたいそんなところにメインコンテンツが収まるように設計していく。
UIを考えて設計することを考えると、IA（インフォメーション・アーキテクチャ）分野について勉強しなくちゃいけないんだろう。うーん…今すぐには取り掛かれそうもないけれど、おいおい関連書籍を読むかなんかしよう。

jQueryとCSS3の透過を積極的に使っていこうと考えているけれど、まだどちらも基礎を勉強していないので、検索でひっかかるtipsを見てもちんぷんかんぷん。
そっちの勉強も合わせると、作るのでいっぱいいっぱいになりそう。残り時間も少ないので、どこかで折り合いをつけなければいけないとは、思っているんですが。そこの選択もまた難しいな。

アナログ人間

四年ぶりに夏を東京で過ごしている。
集合住宅の狭いベランダに出るたびに、この世は地獄だと思う。
日差しが凶悪すぎる。

通学電車で少し時間があるので、できるだけ本を読むようにしている。（50％くらいで睡眠時間になっているけど）
翔泳社の Web制作標準講座・総合コース は知識ゼロの自分には優しく、導入書としてとてもよかった。
最近読んだ スタジオ　イースペースの　web制作新人育成ガイド　は大まかな制作の流れを想像できて、なにより現場のシズル感が伝わるイラストがかわいらしかったな。
今日から読み始めた アーキテクチャの生態系――情報環境はいかに設計されてきたか ですけれども、やばい。これは勉強できる人の文章だ。引用がたくさんあってめまぐるしくて、なんだか若々しい文章だなあと思ったら自分と10しか離れていなかった。
少しずつ、制作スキルだけでなくこういった持っていて当然の知識も勉強していかないといかんなあと思う。

というわけで読むべき本、参考にしたいビジュアル集が多いので、いちいち買っていたらあっという間に生活費がなくなる。
自分一人ならどうとでもなるが家族と同居中なので、生活費は折半なのだ。なんとか倹約しなければ……

とそんな時に助かるのが行政サービス。図書館や産業支援室のようなところへいけば豊富、までいかなくともWeb関連書籍も貸し出してくれる。まだ秋田県に県民税収めている身ですけど…ありがとうございます……。
四年前以前は文庫コーナーや画集コーナーくらいしか立ち寄ったことなかった。お金のかからない勉強法って探せばいくらでもあるんだよなあ。

Webに限って言えばインターネット全てが生きた資料なのだし、個人でまとめてくれている最新のデザイン集やコードが非常にわかりやすく載っていて、その気になればいくらでも吸収できるんですよね。

とはいえ、自分はアナログ的？ なのかマウスホイールぐりぐりして液晶に表示されるテキストを読んだり、エディタかなんかにタグをコピペしてまとめておいても、頭に入っていく感覚が薄くて不安になる。
紙をめくる指先に感じる厚みや、整理されていない走り書きのような手書きのノートをシャーペンの芯を折りながら埋めていく感覚が伴っていないと、どうしても自分の中に定着してかないような気がする。
ワイヤーフレームをつくろうとFireworksを開いても、新規のキャンバスを前に呆然とする。やっぱりノートかチラシの裏でもどこでもいいんだけれど、手書きのワンステップがないと非常に進みづらい。
視覚的なものより、どちらかというと、ハプティックなものが重要な気がする。
すぐにデジタルで制作に取り掛かれたら、それはやっぱり効率的なんだろうけど、きっと自分に合ったステップの踏み方なんだろうと前向きに思うことにした。
尊敬する原研哉さんも、ハプティックな感覚器官をもっと積極的に開いて世の中見るべき、というようなことをどこかの著書で言っていたはず……うろ覚えなので今度また読み返そう。

そろそろ次の課題の準備をすすめていかなければ。正直に言うけど怖いです。

Brackets

DreamWeaverの勉強が始まって、あまりの便利さにコードをすべて忘れそうな勢いでビビっている。
なんにせよ、課題を持ち帰っては持っていないので使えないDWの代わりに、同じadobeのオープンソースエディタ、「Brackets」をダウンロードしてみた。

まだしっかり触れていないが、Terapadより便利機能がいっぱいあるみたいだ。
DWを使ってからだと移行が難しそうだが、自分にはまだこれで十分。

Bracketsの特徴と拡張機能についてわかりやすくまとめたページがあった。
家に帰ったらゆっくり見てみる。拡張もしたい。

http://dev.classmethod.jp/etc/review-brackets/

帰り道

課題提出が無事終了。

アップロードした時点で大きなエラーはなかったものの、firefoxで表示ズレがあった。

自宅からは崩れてなかったはずなので、これはバージョン違いの差異なんだろうか。

同じく学んでいる人の作品を閲覧出来る機会があったので、見てみた。

やはり他の人のを見るのは勉強になる。

デザインがいいな、と思うものも機能的なページだと感じるものも、様々。

全てを自分のものと比べて悔しくなるばかり。

これは時間かけても思いつかなかったろうと思う視点での発見が多かった。

何より腹立たしいのはこの作品には遠く及んでいない、と感じたサイトの制作者が経験者だと聞いて、ほっとした自分。

伝統工芸じゃあるまいし、経験値が全てではないのだから、そんなところで納得してはダメだとおもった。

悔しい。

朝の山の手に揺られている時も今日はどうせ悔しい思いをすると考えていたが、案の定。

この情けなさを次に活かすために、どうしたらいいかを考えよう。

生産性のない感情の揺らめきにただ付き合っていられるほど、自分に猶予はないのだから。

ワークフローまとめ（課題1）

課題提出前夜なので、ちょっと振り返りつつ、自分が初めてのwebサイト制作でどんな手順を追ったのか振り返ってみる。


課題は花屋。幅は画面幅1024pxに収まるよう、ページ数は5ページ以上という課題設定だった。

コーディングに使ったのは、XHTML1.0TransitionalとCSS2.1。文字コードはUTF-8。
エディタはTerapad。画像編集はPhotoshop Elements 11と学校のFireWorks CS4。

----------------------------------------------------------

まずはコンセプトイメージを探った。
キーワードを列挙して、どんなサイトにしたいか漠然と書き出してみる。
↓
主要なコンテンツを考え、大まかな内容を決める。
この時の項目がグローバルナビゲーションになったり。
↓
項目別の内容をもう少し掘り下げ、どんな素材が必要になるかを洗い出す。
↓
サイトマップを考える（この辺りから素材集めを並行して行う）
↓
インターフェース設計
ラべリング項目名をわかりやすい単語にして決定
↓
ここで大まかなレイアウトを見るために、ためしにindex.htmlのみコーディングしてみる。
テキストなし、画像なし、各要素の幅・高さ、背景色をのみ設定した。
ここでなんとなくreset.cssの原型ができる。positionなどコーディングの大まかな流れをつかんだ。
↓
▲1：レイアウトテストしたものを元に、インターフェース設計のメモにposition数値やクラス、ID名などをメモしてレシピを作る。
↓
▲2：レシピを見つつコーディング。
並行してパーツのデザインなどを考えていく。コーディングするなかで画像のファイル名を決めてしまうことも。
↓
▲3：XHTML、CSSがあらかた出来上がってきたら、考えたパーツデザインのメモを元に怒涛の画像編集。
サイズもデザインもファイル名も決まっているのであとは作業！ 作業！ 作業！
↓
▲1～3を1ページごとに繰り返す。基本的に複数ページ同時進行はしない（頭悪くてできなかった）
但しレイアウトテストはindexのみ。他ページはレシピを元に書き出していった。
↓
前ページができたら、共通しているCSSはbase.cssに移すなどソースを整理する。
↓
チェッカーで採点してもらい、ソースの間違いや不足を修正していく。
↓
ブラウザ毎に確認する。
ブラウザハックを使い、デザインの崩れを手直しする。
↓
自分で借りているレンタルサーバに仮アップロード。
ローカルで見逃されていたファイル名の大文字小文字の間違いなどを確認。手直し。

---------------------------------------------------------------------------

ざばーっと書いたけど、大まかにこんな感じだったと思う。
今週はFireWorksでのデザインカンプの作成も始まったし、これからHTML5学ぶんだし、このワークフローはまたいろいろ増えたり減ったりするんだろな。
ま、今回はこんな流れだった。

HTML・CSS・アップロード検証

課題提出を目前にしてCSS採点ページがあるということを知った。
そりゃHTML採点があるならCSS採点もあるんでしょう。そうでしょう。
なぜもっと早く気付かなかったのか……と思いながらとりあえずCSS2.1で検証してもらうと、ボッコボコに減点してもらった。

CSSを策定しているW3WのCSS検証サービスはこちら。
http://jigsaw.w3.org/css-validator/validator.html.ja#validate_by_upload+with_options
もちろん無料。いやーありがたいことです。
単純に；落としてることとか、知らなかったCSS2.1準拠の書き方とか。

HTMLはこちらでチェック。
http://cetus.sakura.ne.jp/htmllint/htmllint.html

合わせて無料レンタルサーバにFFFTPでアップロードして検証してみるとローカルでは見逃されていたファイル名の大文字小文字の違いなどが見えてきて、うわー提出前に気が付いてよかったなあ。

ただ借りているサーバーのリリースがごく最近だったようで、初心者の自分にはひどく使いにくい。
初心者にやさしい、広告のでない無料サーバーをもう少し探したい。

IE以外のブラウザでリンクが見えているのにクリックできなかった件

課題もあとわずか、作業を詰めていく中で一週間くらい悩み、放置していた問題が片付いたので、まとめてみる。
一か月前にweb制作を始めたド素人の個人用メモに過ぎないので、分かりやすい説明を求めている方は申し訳ないが他の方のまとめられているのをお勧めします。

IE以外のブラウザ（firefox,chrome,opera）でリンクが機能しなかった

上部に横一列のナビゲーションを設置していた課題作品のwebサイトで。

基本的にどのページにも設置していたナビゲーションだったが、あるページでナビゲーションが機能しなくなった。
ロールオーバーを設定していたのだが、アンカーに触れてもピクリともしない。
クリックしてもなんの反応もない。しかしナビゲーションは確かに表示されている。

アレ？ と思いXHTMLを見てみるが、ほかのページと代わりはない。
そりゃそうだ。共通するナビゲーション部分のソースはコピペして使っているのだから。
いやしかし見落としているだけで、余計なの混ざっちゃってるのかもしれない、と一応、コンテンツ部分だけ抜き出して、もう一度他のページからソースをコピペしなおしてみる。

おや？　リンクが反応した。クリックできる。
やはり何かまじっちゃってたのか…と思いながら、コンテンツ部分用の外部CSSを問題のページ専用のものに付け替えた。

すると、リンクが再び反応しなくなった。

エエエ、とがっくりきながら、しかしこれは前進だ。

問題は外部CSSだったのだ。

今回のサイトは

reset.css　　　　　（リセット用）
base.css　　　　　（共通している要素（headやfooter）のデザイン）（問題の上部ナビゲーションの設定はここでしていた。）
ページ名.css　　（各コンテンツエリアのデザインをページごとに分けて作っていた）

の三段構えで作っていた。

件のクリックしなくなった問題は、一番下のページ名.cssを付け替えた時点で起こった。
ということはこのページ名.cssに何か問題があるのだ。

というわけであれやこれやと検証した結果……

positionを設定してある要素同士の重なりが問題だったみたいだ。

ページ全体をposition:relativeで中央寄せし、子要素ナビゲーションにはposition:absoluteでbase.cssに、同じく子要素のメインコンテンツにはposition:relativeでページ名.cssにそれぞれ位置指定していた。
しかしこれは他のページも同じだしな…と、他のページのページ名.cssを引っ張り出して見比べてみると……

*ID名などは仮

問題のページCSS

#maincontents｛
 position:relative;
 margin-left:auto;
 margin-right:auto;
 padding-top:85px;
｝

-------------------------------------

他のページCSS

#maincontents｛
 position:relative;
 margin-left:auto;
 margin-right:auto;
 top:85px;
｝

-------------------------------------

おや？
どうやらメインコンテンツの上部の余白の稼ぎ方が違ったらしい。

問題のページはpaddingを上に伸ばしているので実際は見えている状態だったが、上部ナビゲーションの上にメインコンテンツ領域がかぶさった状態だったらしい。

他のページはpositionのtopで上から85ｐｘのところからこの領域、という指定をしていたので上部ナビゲーションとは重なっていない。

なるほどなるほど。
レイヤーみたいに重なっちゃってるんだな……うん？ なんかそんな話授業のどこかで聞いたな…と汚い殴り書きノートをめくってみる。

あった。positionを初めて習ったとき、あんま使わないよネ～と思っていたposition:fixedの項目の下に、

z-index  positionがついたものの重なり順を設定できる。
ex)z-index:10; ←1でもよいが10単位が一般的。数字が大きいほうが上に重なる。

と走り書き。
この10単位が一般的、というのは、
後から新たに挿入する要素がでてきたとき、要素1：z-index:1と要素2：z-index:2と設定してしまうと要素2のz-index:を3にしてから新要素：z-index:2などと設定しなくてはならない。
しかしもともとz-indexを10と20で設定しておけば間に挿入する新要素のz-indexは11でも15でも19でもいいのだ。
つまり、元の要素のz-indexをいじる手間が省ける。
しかも要素1のさらに下層にも挿入するのも簡単にできる。
ということらしい。

少し脱線したが、とりあえずbase.cssの上部ナビゲーション部分にz-index:100を設定してみた。
（100の理由はとにかく上！　上に来い！！　という気負いと、もし他の要素にz-index指定があっても100は上回れまい、という微妙にビビりな理由から。他要素にz-indexが登場していなければ10で十分かと思われます）


きた！
リンクが反応した！ ヤッターと小躍りして家族に擦り寄ったら、事情を知らない相手から「あぁそうよかったね」とドライな返事。いや、返事してくれただけでありがたい。よかったよほんと。

-----------------------------------------------------------

結果…

positionで指定した要素同士の領域が被ると、下層になってしまった要素のアンカーリンクはたとえ見えていてもクリックもロールオーバーもできない（まさに触れられない）

ということだったみたいだった。
しかも厄介なことに、IEではクリックできる。
とりあえず自分で確認したブラウザopera,firefox,chromeではクリックできなかった。

対処法は重なった要素のどちらか、あるいは全てにz-indexで重なり順を調整すること。
リンクを機能させたいなら一番上にその要素を持ってくる。

まだブラウザ毎の差異について軽く話を聞いていただけで、アァ～デフォルトのマージン量が違うんだナ～くらいにしか思っていなかったので、今回のことで身に染みた。今回はIEで通って、それ以外だと機能しないパターンだったが、世間ではその逆で、IEにだけ効かない！！ ということが多々あるらしい。
IE嫌われてんだなあーとかるーく思っていたがこういうことを毎度IEだけで起こったら確かに嫌やな…と実感。

とりあえず、今回のページは特に重なりを必要とするレイアウトでもなかったので、結局z-indexを使わず、padding-topをpositionのtopに差し替えて終了。
うんうん言いながらいろいろ検証してみてよかった。こういうアクシデント（ていうほどでもないんだろうけど）対処って勉強になるなあと。

さ、課題にもどるのだ……。