道具の進化、便利さを実感する

だいたい、こういう技術っていうのは、興味から始まるものであって、強制ではいけないわけですよ。

それでもタグの暗記とか、しろと言われれば、やる気も出ないでしょう。
なので、そういった部分が無いように、他人と機械の力を借りて、中級ぐらいまで進みましょう。

そこで必要になるのがFirebugですね。
Firefoxのアドオンと呼ばれるもので、これは必須です。
firebugダウンロード

Firefox持ってない人は論外です。
Firefoxダウンロード

インストールしたらFirefoxを開き、Yahooのページでもいいので表示して右クリック。
一番下にFirebugで要素を調査というのが出るので、それをクリック。

配置を調整すれば、以下の画像のようになるはずです。

どういう機能かというと、他人のサイトのCSSを好きなように覗いたり、いじったりできるというものです。
例えばYahooのCSSの一部

body {
    font-family: "MS PGothic","Osaka",Arial,sans-serif;
    font-size: 75%;
    line-height: 1.22;
    text-align: center;
    word-wrap: break-word;
}

この部分のfont-sizeの75%部分をクリックすると、この数値の変更ができるわけです。
矢印キーの上下でも、数値を変えられます。

このfont-sizeを200%にした状態が以下の画像です。

思ったほど崩れてはいませんが、見えてはいけない部分がせり出されてしまっています。

次にFirebugのbodyのCSSが表示されているところの空白をダブルクリックしましょう。
段落が一つ下がって、新しくCSSが追加できるようになりました。
そこで以下のものを追加してみます。

font-weight: bold;
color: red;

その結果が以下の画像。

文字が太くなり、一部の文字が赤くなりました。
天下のYahooを汚してやった気分でしょう。
こういう事が出来るのです。

これの何が便利かって、いちいち『CSSをいじり、保存し、ブラウザを更新し、確認しないでいい』という事です。

神経質な人は、この数値をひとつ変えては保存し、更新し、確認するという無駄を繰り返し、やっと希望のレイアウトを手に入れるという事をやってきたわけですから、手間の省け方がすさまじいという訳です。

僕も、これを知ってから、仕事の進み方が倍以上に早くなりました。
それほど確認作業は無駄な手間だったという訳です。

なので、これから覚える人は、こういう道具を使って無駄を省き、上達に邁進できるということです。

さらに追加道具を紹介しておきます。
ez-HTMLダウンロード

ごちゃごちゃした作りですが、初心者には使いやすいHTMLエディタです。
HTMLとCSSのタグ入力補助機能があるので、ひとまずタグは頭文字だけ覚えておけば、なんとかなります。

あとは使っていれば、嫌でも覚えるので、こういうものに手伝ってもらっていけばいいということです。

道具っていうのは、やはり使いようなのでしょうね。

技術は盗んで覚える

古来より、技は見て盗めって話があります。
盗み方によりけりですが、参考にするために目に焼き付けるというのが簡潔に言うと、盗むって話ですね。

なので、盗むつもりで穴があくほど見ればいいのですが、ここが現代の難しいところで。
「盗もうにも、どこを見ればいいのかわからない。」という事が起こったりします。

確かに、知らない用語は調べようがなかったり、見つかっても専門用語ばかりで、説明さえ頭に入ってこない事もあります。
見てるつもりが見ていない状態なわけです。
見て盗むというのは、実際やっているところを見ることが前提だったのでしょうね。

そこで、実際に盗んでみましょう。

先ほど、CSSを弄んだYahooから。
Yahoo! JAPAN

ブラウザでYahooのページを開き、右クリックでページのソースを表示させます。
そのソースをすべてコピーし、エディタに貼り付け。

名前はなんでもいいので、index.htmlとしておきますか。
保存先はデスクトップにでも。

さて保存が出来たら、デスクトップを見て下さい。
yahoo.htmlと名のついたアイコンがあるはずです。

設定によって人それぞれですが、おそらくIEのアイコンが出来上がっているでしょう。
それをダブルクリックすると、Yahooの画面がでてきたはずです。

僕が開いたのはこういう感じでした。

見た目はまったくかわってませんね。
これで盗んだわけです。

ついでに暇だったので、Yahooニュース欄をいじってみました。
自分でも何がしたいのかわかりませんが、どこに何が書いてあるのが分かれば、こういうこともできるということです。

そこまで行けば、なんとなくHTMLは大丈夫になったと思って下さい。
あとは細かいタグを覚えるだけです。

そして、CSS。
ソース12行目の部分ですね。

<style type="text/css">
～～～～～
</style>

という物凄く長くなっている部分、ここがCSSです。

試しに、ここを削って表示させてみて下さい。
レイアウトがめちゃめちゃになります。

逆に、このめちゃめちゃな状態から、元の綺麗なレイアウトに自力で出来ればCSSはマスターしたといっても良いでしょう。

試しにやってみましょう。
パズルのようなものです。
ピースはあるし、完成図もある。
さらに、わからなくなったら正解を見ても良い。

これならば、なんとなくできるでしょう。
最初は分からないものでも、やってるうちに体が覚えてくれるわけです。

何事もこんなものですよ。

総括

一から百まで手順を書き記す気にもならなかったので、やってみてはどうか？と思った部分だけ紹介しました。

結論を言いますと、HTMLとCSSは慣れです。
まずはローマ字に慣れ、知らないタグに慣れ、機械にも道具にも慣れる。

そうなるために、飽きない方法をとっていくのが上達の近道だと思います。

予想以上に漠然とした内容になってしまったので、近々、僕のECサイトテスト環境をAmazonのようなレイアウトにして、その経緯を紹介していこうと思います。
ほぼ、CSSでなんとかできるはずですから。

では、お楽しみに。