【ブログ】HTML&CSS 失敗談

スポンサーリンク

ブログと共に HTML&CSS も同時進行で勉強しています。

HTML&CSSはプログラムではないので、とても簡単らしいですが私にはとてもむつかしいです。(笑)
HTML&CSSを使って放置状態のHPを何とか作り直したいということと、最終的には【Ruby】を覚えたいと思っています。

HTMLのあとに【PHP】をやって、そのあとで【RUBY】という感じです。
多分数年かかると思いますが・・・。

HTML&CSSは早い人で1週間で理解できるということですが、私には全く無理。
1週間で理解できるってのは私のレベルでは信じられないです。

今やってるのは参考書をそのままコピーしてるので、私の意図とは何の関係もないサイトが出来上がっています。
参考書を見ながらやっても間違えるわけですから、HP作れる人ってマジですごいと思いますよ。

スポンサーリンク

HTML&CSSで出来ること

お分かりだと思いますが WebページはHTMLで出来ています。
もちろん、デザインや動きを出すためにはPHPやJAVAとかを使ってるんでしょうが、私にはそんなことはわかりません。

とりあえず、HPを作り直したいというだけなのでまずはHTMLを理解したいですね。

ブログにも、もちろんHTMLの知識はものすごく役立ちます。
SEO的にも知ってるといいと思います・・・知らんけど(笑)

正しいHTML画像
先に正しいWeb表示がこれです

HTML&CSSは 自分で作った間違い探しクイズである

HTML画像
どこが間違っているかわかるかな?

画像が今回の間違い探しのHTMLの記述画面です。
このHTMLだと下の画像になります。

間違ったHTMLでの表示
footerがかぶさって表示されています

ブラウザで確認すると表示がおかしいですよね。

HYMLでメニューを記述していくと、上から順番に表示されます。
つまり、横書きのノートに順番に書いていくイメージです。

この場合だと、二枚目の画像の下のテキスト文字の下に【Photograph】以下のメニューをHTMLで記述します。
そのままだとただ画像の下にメニューがあるだけなので、それをCSSで移動させます。
それをするのが froat というコードです。

さぁ、ここからが鬼門のfroatです。
マジでfroatは理解できないので苦手です。

froatとは、まさにその通りで【浮かせる】ことです。
HTMLで記述した一部を浮かせて『右』または『左』に移動させます。
すると、ほかの画像との関係(要素って言うんですが)で訳が分からない状態になるんです。

今回は、本当に浮いてしまって、いちばん上の横長に張り付けたタイトル部分の画像の上に浮いてしまっています。

しかもfooterという、ページの最下部に記述していたものまでが同じ場所に取り込まれています。

さぁ、ここから間違い探しが始まります。

froat で崩れたレイアウトを修正するのが clearfix

HTMLとCSSでメニューを移動すると今回のように崩れることがあります。
それを修正するのが clearfix らしいですが、ほぼ私には理解できていません。

ちなみに私の中ではこんなイメージです。

水の入ってない水槽に、水に浮かない枠の中に四角い発泡スチロールを何個か並べます。
そこに水を入れると発泡スチロールは浮きます。(水がFloatの記述です)
漂ってる発泡スチロールに隠れて、浮かんでいない枠が見えなくなっちゃうので発泡スチロールを止めなければいけませんよね。
そこで clearfix という杭を立てて発泡スチロールを固定させます。
ただし、そのままでは杭が見えてしまうので杭を none というテキストで隠すというようなことだと思います。
分かります?
本人があまりわかってないので説明が難しいです。

それに気が付くほどHTMLを知らないからひたすら間違い探し

froat を指示したところがまず怪しいので、徹底的に調べます。
半角スペースがないだけでも思ったように表示されないのがHTMLです。

今回は関係ないですが、時々やってしまうのが大文字の P と小文字のpです。
テキストエディッタで見るとこの違いに気が付くまでに結構時間がかかったりします。

今回の答えは clearfix が clerfix になって a が抜けていました。

何度もこの辺りは見てたんですが clerfix でも『クリアーフィックス』って読めちゃいますよね。
これに気が付くまでに2時間かかりました。

3日の長丁場の間違い探しをさせられた e の事件

初めて CSS をつかってつくったHPでは CSS(スタイルシート)の読み込みができない事例が発生しました。
何をやってもHTMLの表示のままで、背景色も文字色も文字の大きさも変わらないということになったわけです。

今ならただの『リンク切れ』だって判断できますが、当時はそれすらわからなかったので解決までに3日かかりました。

HTMLの記述とCSSの記述を何度も読み返すこと3日目。

原因を見つけたときは 「アハ体験」 で脳汁が噴き出ましたね。

styleseet が styleset になってて e が抜けてました。

何度も読みなおしたのに読めちゃうから・・・(笑)

まとめ 自分で作った間違い探しはマジで難しい

コンピューターは融通が利かないので、こっちの意図をくみ取って動いてくれません。
人間同士なら何となくわかってもらえるものが、全くわかってくれないんですね。

あたりまえなことです。

人間は間違えちゃうし、間違えたってことは本人にその意識が無いから間違えちゃうんです。
そもそもそれが間違いなのかもしれませんが。

間違ってないつもりで間違ってることを見つけることがどれほどイライラして難しいことか・・・。
それをしないために慎重にやってても今回のように間違えるわけです。

2時間の無駄は大きいです。
やっぱりこういうことを本気で覚えるなら、だれかに教わるほうが早くて確実ですね。

コメント