style-free | Webデザイナーのヒヨコ

Webスタンダードの授業、今日から再開しました。
長ーーーい、夏休み終了！

今日からDWの授業だったけど、教程は見ずに先生に質問攻めでした。
夏休みの間にわからなかったことを、色々聞けて良かった♪

style-freeのTOPページはまだ制作途中ですが、少しゴールが見えてきたかな？
がんばろうっと！

Webデザイナーの先輩からデザインのお仕事のお話を頂きました。
まだまだ勉強の身なのでお仕事としては無理かな～と思ったのですが
「勉強の為、やってみたら」と言われて、無謀を承知で引き受けてしまいました。

が、しかし納期がせまっているらしい。
そのうえ10月3日からわたくし、バリ島に旅行に出るので
必然的に期限が10月3日に！
間に合うのかしら？(^^；)

採用されると、ギャラもでるらしい。（￣ー￣）ﾆﾔﾘｯ
ま、採用は無理でも勉強になるからがんばろうっと♪

と、いうわけで当ブログはデザインめちゃくちゃのまま
暫く放置される見込みです。ｍ（｡－_－｡）ｍｽ･ｽｲﾏｾｰﾝ
経過報告時々入れま～す。

BOSS先生の講評を見て、やれそうなところから直してみようと思います。

• 更新履歴の部分が可変しないのであれば、背景をひとつの画像として「wrapper」に置く
• 更新履歴は定義型リストを使う
• 「hr」をデザイン的に使うのは×。使うならブロック要素の上下のボーダーにする
• メニューの再検証
• キーワードの選定

こうやって見てみると、最初のコンセプトが甘々のまま見切り発車したのが原因と思われます。
実験用サイトって感じで、軽～く考えていたのが大間違い！
それじゃ仕事としてWebデザインをすることはできませんよね…

まずは、頭を絞って何を伝えたいのか考えてみます。

病院（医院）のサイトデザイン。
締め切りがせまっているというのに、まったくカンプに着手できない。

今日はボーイスカウトで赤い羽根の共同募金。
明日もボーイスカウトで釣りに。
それも集合時間午前７時！
おまけに、本来のお仕事が詰まってきてニッチモサッチモいきませぬ。

今日こそはカンプデザインにかかりたいと思います。
現在 0時
あぁーーー！今日じゃなくて明日になってしまったよぉ…

さっ、ガンバろっと♪

Web Accessibility Toolbar 1.2.1 日本語版／ツール＆ダウンロード － Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』

CSSの勉強をはじめると、いつもなにげなく見ていたいつものサイトは
「どんなHTMLで、CSSはどうなってるだろう？」って気になりだします。

そこで便利なのがこの『Web Accessibility Toolbar 』です。

InternetExplorerなどのブラウザを使っていつでも簡単に
WEBページのアクセシビリティをいろいろな角度からチェックすることができます。

『Webページの画面全体のスクリーンキャプチャーを1回で撮りたい！』

縦に長いページのページ全体のスクリーンショットを取ろうと思い
画像処理ソフトで何枚もの画像を貼って繋げているとかなりの時間と労力がかかってしまいます。
「これを1回でできないの？」
探せばあります！
私が使ったのはコレです。
キャプチャーイット！ツールバー（無料）

私は普段Firefoxというブラウザを使っています。
このFirefoxというブラウザにも、もちろんIEにも対応していて、ブラウザのツールバーに組み込めるので
偶然気に入ったWebサイトを見つけた時など、即スクリーンキャプチャーして、自分のスクラップブックにストックしています。

このキャプチャーイット！ツールバー（無料）をインストールするとワンクリックでMy Picturesの中の『CapIt』というフォルダの中にJPGファイルで保存されます。
全画面をキャプチャーできるのはもちろんのこと、プラウザ全体や自分で範囲を選択したりできます。
無料版でも機能は充分でしたが、さらに高機能をお求めの方は製品版のキャプチャーイット！PRO ツールバーもあります。

Webサイトを製作していると、ブラウザによって
見え方にずいぶん違いがあるのに気がつきます。
私はInternet Explorer6とInternet Explorer7、Firefox2.0でブラウザチェックをしています。

ブラウザもバージョンが違うと見え方も全然違って見えます。
特にInternet Explorer！
Internet Explorer6とInternet Explorer7両方を
1台のパソコンにインストールしてみてみようと思ったらできないんですねぇ。。
仕方ないと諦めていたらこんなツールを教えてもらいました。

IE3〜IE7を一括インストール「MultipleIE」
http://tredosoft.com/Multiple_IE

Winな環境なので、Macではどんな風に表示されているのかも気になる・・・
かといってブラウザチェックのためだけにMacを購入ってのも高くつくのでこんなサービスが便利です。

http://browsershots.org/

http://www.browsercam.com/http://www.browsercam.com/

スクリーンショット.jp
http://www.screenshots.jp/

CSSでロールオーバーのメニューを作成するのが一般的になりましたね。
私も良く使います。

初めは全て別々の画像を切り出していましたが、
最近は1枚画像で表示位置を移動させてロールオーバー効果を出す方法がお気に入りです。

最近一番のお気に入り手法は、1枚画像でロールオーバーするだけでなく
動きまでつけられちゃうこの方法！
javascriptは使っていません。