htmlクラス受講7回目

まず、宿題になっていたfloattext-indentを使ったWebサイト制作のチェックからやりました。今回は先生から事前にヒントをいただきましたので比較的スムーズに作成することができました。前回習ったtext-indentもきちんとできましたが、Photoshopから画像をコピーするときの方法について、マットを背景色にすると画像がよりきれいにコピーできることを教えていただきました。

名称未設定-3a

次にCSSを使いこなすための様々なテクニックを学びました。

疑似要素(link, visited, active, hover)は、主にリンクタグ(a)に使用するスタイルで、リンクの状態やマウスの挙動によって、クラスを新たに適用したかのようなスタイル指定ができます。

また、「ブロックレベル要素」と「インライン要素」についても学びました。前者は「固まり」を表し、h1h6, p, div, ulがこれに含まれます。後者は「行内の一部」を表し、a, img, span, em, strongがこれに含まれます。両者の違いは、ブロックレベル要素が「幅や高さをCSSで設定できる」のに対して、インライン要素は「幅や高さをCSSで設定できない」ということです。そこで、インライン要素を指定サイズにしたい場合は、display:blockと記述することで強制的にブロックレベル要素に変換してサイズ変更をします。

以上の事柄を踏まえて、navigationCSS Spritesというものを適用する方法を学びました。

これを使うと、リンクボタンにカーソルを乗せたときに画像を変化させることができるようになります。以下のような画像を設定し、手順に沿ってCSS Spritesを適用しました。

名称未設定-3b

このCSS Spritesは、今回学んだ疑似要素やdisplay:blockも使いますし、これまでに習ったfloattext-indentも使うテクニックです。表示位置の調整など設定するのにひと手間かかりますが、とても便利なテクニックだし、できたときの達成感も大きいので、これからどんどん活用していきたいなと思います!

Comments are closed.