link
special
radioDTM.jp site

blogトップへ

メルマガ登録へ

linksへ

公式バナーへ

Podcastへの登録と試聴

メールはこちら


link

play for japan

酒ト飯 イイダ

最近の記事
最近のコメント
最近のトラックバック
カテゴリー
アーカイブ
リンク集
カレンダー
Sun Mon Tue Wed Thu Fri Sat
     12
3456789
10111213141516
17181920212223
24252627282930
<< June 2018 >>
プロフィール
検索
管理者ページ
RSS1.0
Atom0.3
<< コヤマリョウのSKY(サブカルクソ野郎)/小説「リンダリンダラバーソウル」〜簡単な良い話〜 | main | 社長の「これでも聴けば」Vol.106 >>
エセWebデザイナーへの道:第2回(IEの表示バグを克服する!)

はーい、構成のカネコです。
第2回にして早速更新遅れてしまいましたが、

エセWebデザイナーへの道

さーて、頑張っていきましょう。
どんなコーナーかと言いますと・・・
このコーナーではradioDTM企画構成のカネコが
立派な"エセWebデザイナー"として成長していくまでの過程を
毎週お届けします。

毎週テーマ(課題)を自らに課し、
それを克服していく過程と報告をしていきます。

*あくまでド素人が試行錯誤している様を書いていくため、
 間違いなどが多々あると予想されます。
 そういう場合は、コメント等で、ご指摘いただければ幸いです。


ってことです。そんでもって第2回にして早速の微調整なんですが、
先週「今週のガジェット」という名前をつけてコーナー内コーナーを
紹介したのですが、あんまり今後、ガジェットらしいガジェットを紹介するか
どうも微妙なので、名前を変更します。

今週のお道具!!!

うん、こっちの方がより“エセ”らしさが出ていいですね。
これでしばらく試してみようと思います。
ってことで今週の「お道具」はこちら!!!

ホームページ作成ソフト!!!!

先週はPCだったので、次はソフトになります。
カネコが使用しているのはこちら。



Adobe Dreamweaver CS6


Webに身近な人にとっては有名なソフトだと思います。
Adobe社が販売している(正確に言うと)Webオーサリングツールです。
"オーサリングツール”何だ!?って人のために、にわか知識で簡単に説明すると
プログラミング作業を簡易的にして、そこまでの知識、技術がない人でも
ホームページが作れるよってことですかね。

(後半に効いてくるので説明しておきますと)
そもそもの話ですが、ホームページっていうのは【HTML】という
専門テキストコード(=タグ)を打ち込むことによって構成されています。
これはプログラミングとはまた違うのですが、ほぼ同じだと思ってくれればいいです。
そして、2000年以降は、この【HTML】というコード情報と別に、
【CSS】というテキストコードを作り、
この2つを合わせて構成することが主流となっています。
(さらに【JavaScript】【php】【FLASH】などを組み合わせていたりします)

そして、カネコの場合は、高校生時代に友人のS橋くんから【HTML】の方のみの
知識だけ嚙らせてもらったのでした。
それが今現在、【HTML】以外の知識ゼロという環境を恨むはめになりました。

そこで、今回紹介したDreamweaverのようなオーサリングツールが必要となってくるわけです。
DWは【HTML】や【CSS】のタグを打ち込む際に様々なサポートをしてくれます。
「こんな風にしたいな」とか「こんな効果を加えたいな」などの要望に対して
適切なコマンドや、表示される位置関係などから視覚的に調整できたりなど
至れり尽くせりな機能で溢れてます。


が、しかし。そもそもの話なんですが、
実はホームページって、単なるテキストコードの塊でしかないので、
正直、専用のソフトとか無くても全然作れます。
だた、そこにはそうとうなコードの知識と理論が必要になります。
はっきり言って超大変です。
そういうの好きな人には全く苦ではないはずですが、
カネコの場合は、あくまで"エセ"なので、思いっきりDreamweaverに頼りまくっています。



・・・こんな感じで今週のお道具は終わり。
さーて、いよいよ本題!

ということで今週の課題!!!
●Windows IEでの表示バグを克服する

よし!これに挑んでみましょう!!
まずIEってのはMicrosoft社が提供している
Webブラウザのアプリケーション「Internet Explorer」の略ですね。
これはおそらく誰しも一度は触ったことがあるアプリのひとつだと思います。
かつてはWebブラウザアプリの世界シャア9割以上を誇っていたものです。

そんなIEさんが、Webデザイナーの方には、結構クセモノになっているようです。

何故かというと、Webブラウザアプリそれぞれで、表示する方法論(システム)って
微妙に違ったりしているらしいんです。(完全ににわか知識っす苦笑)
そんでもって、特にこのIE大先輩が独特の方法論を採用しているわけですね。
どういうことかというと、先程「お道具」のコーナー内でも書かせてもらいましたが、
今のホームページの主流は【HTML】と【CSS】の組み合わせで構成されているわけですが、
なんとIE先輩は、この【CSS】というシステムをかなり軽視し続けているらしいんです。

とあるブログに載っていた【CSS】の最新版である【CSS3】に対する
主要Webブラウザの対応表を貼ってみます。(図1)




笑。なにこれ。ヤル気あるんすか??
これが所謂「IEの表示バグ」です。
つまり、コードを打つ側に対して、使えない機能が満載のWebブラウザさんがIEなわけですね。
更に厄介なのは、そんな使えない大御所のIEさんが、今現在でも世界の6割の使用率を
しめているというのが、Web屋にとっては悩みのタネになっているようです。


そんな中で、このエセWebデザイナー(見習い)のカネコにも
この表示方法の違いによって起こるバグの恐怖が降りかかってまいりました。

そして、カネコを襲ったバグはこちら。
「何か画像が指定よりデガく表示されてるっぽいバグ」

・・・何これ怖い。
分り易く会社のWindowsを使ってスクリーンショットしてみたのがこちら。(図2)



先日、公開して大変好評な『新曲もってこい』の専用ページですが、
なんか変じゃないですか??

改行に違和感。つかこんな設定してないし。

下のアーカイブなんて、こんなんになってます。↓(図3)


・・・うん、怖いね。変な線が表示されてるし。

これって実はちゃんと画像の大きさを調整してあって、
ひと月で最大5アーティストのサムネイルが表示できるようにしておいたのですが、
これだとどう考えても4つまでしかはいらないですよね。

そりゃあ「これがIEバグってやつか!?」って絶望にかられましたよ。

そこで"エセ"なりに考えました。
「・・・これって画像がデカめに反映されてるのが原因じゃないか?」と。

そうです。つまり、複数の画像を横に並べて、幅がぴったりになる計算にしているのに、
その画像が、予定よりもデカく認識されたら、
(図2のように)勝手に改行されてしまうわけですね。

ここで、解決のヒントになったのが、図3で書いた「変な線」です。
「これって【HTML】を学んだときにやった"Border”ってやつではないか??」


で、結果論ですが、これが的中してました。
Borderというのは、画像の表示を指定したときに、
他との境目を分り易くするために表示される枠のことを指します。
そんでもって、基本的には画像に対しては使われないものです。

これがIEの場合、デフォルトで表示されて、
そのBorderを合わせたサイズで画像を認識してしまうらしいのであります!

・・・これは何という時代錯誤なんでしょうか笑

確かに昔は、画像を貼る際に、Border表示をさせない指示のコードである
<Border="0">ってのを打ち込んでいたことを思い出しました。

でも多くの画像で構成されているホームページを作る場合、
いちいち打ち込むのって本当に疲れる作業です。
それに、IE以外のブラウザの場合だと、
画像にはBorder="0"という認識をデフォルトでしてくれるっぽいし、
僕は先週にも書いたように生粋のMacユーザーなので、
普段使わないブラウザの対策ってだけで気分はげんなりなわけですね。。。


ただしかし!!!
ここで冒頭に紹介した【CSS】というシステムが効いてくるわけです。

まず【HTML】と【CSS】のそれぞれの違いについて説明しておくと
(これはあくまでカネコのオリジナルな見解です)
*プラモデルで例えてみます!
●【HTML】は、プラモデルの設計図
●【CSS】は、作る上でのセンスと経験値

・・・こんな感じだと考えます。

つまり、買ってきたプラモデルをただ設計図(説明書)を見ながら作ったら
基本的には、誰でも同じような形でつくることができますね。
だけど、そういうのって、なんだかのっぺりしてて、オリジナリティに欠けたりするもんです。

そうなってくると、プラモ上級者との違いってどこだというと、
センスと経験値なんだと思います。

要するに、【HTML】はホームページの枠組みをしていて、
そこに、【CSS】というシステムを導入することによって、
より他と差別化でき、さらにこれまでの経験値を活かすことができるというわけ。

例えば、プラモデルを作りだしたばかりの時って、色々な簡単なミスをしてしまいますね。
パーツの切り離しを雑にしてたり、ボディを洗わない状態でシールを貼ってしまったり、
スプレーの色を塗る時に、まず白で下塗りすることを怠ったり。
でも人は失敗から学んで経験をするものです。
次に作るときは、まずパーツを丁寧に洗って乾かし、慎重に切り離して組み上げ、
一度白で下塗りをした上にスプレーで満遍なく塗装をして、
十分に乾いてから、ピンセットなどを使って慎重にシールを貼るわけですね。

そういった、経験値、そしてセンスを、備忘録のようにしてメモしておく作業を
ホームページ構築の行う上で、【CSS】というシステムを使って行っているのではと
足りない頭で必死に考えだし、理解しています笑
(もっと正しい見解、説明があったらコメントなどで教えてください)



さぁ長くなりましたが、そんな【CSS】を使ってどう乗り切ったかというと、
要するに、以前のやっていた、画像を貼るごとにボーダーの非表示を指示していたことを
【経験値】として記しておくわけですね。

「いいか?このページでは、画像を貼るときにボーダーは基本いらないんだぜ」
ということをCSS上に書いておくんです。
そうするとどうでしょうか?僕の経験を活かして、
それ以降、全ての画像からボーダーは消えているようになるわけです。


そうやってCSSを書きなおしたものをIEで見るとこんな感じになりました。↓(図4)



うん、きちんと計算通り枠ピッタリに画像が並んでいますね。

アーカイブはこんな感じ↓(図5)



うん、そうだよ。これがやりたかったんだよ!!!!

いやー、長くなりましたが、何とか今週の課題はクリアできました。
もし、僕のように“エセWebデザイナー”として、同じような悩みに苦労されている方が
いらっしゃった場合、少しでもお役に立てれば、これ幸い。失礼しました。




ということで次回の課題!!!
CSSによる複数のdivタグをつかった複数段ページに挑む!

さぁ、カネコはこの課題をうまくクリアできるのか??
来週の更新を乞うご期待!!!

【構成カネコ】
JUGEMテーマ:インターネット
Posted by : radioDTM | エセWebデザイナーへの道 | 17:49 | comments(0) | trackbacks(0)
コメント









この記事のトラックバックURL
http://blog.radio-dtm.jp/trackback/982854