htmlクラス受講8回目

まず、以前作った「ガス燈」のトップページのnavigationCSS Spritesにするという宿題の確認からしていきました。

HTMLCSSのコーディングはきちんとできたのですが、画像をCSS Sprites用に二段に作成する際、Photoshopでやったのですが、元がIllustratorの画像なのでIllustratorで作成した方がよいということ、またlinkのときとhoverのときで違いがはっきりと出るように画像を作成した方がよいとのことでした。前回の宿題もそうでしたが、Web制作には、コーディングの知識だけではなく、PhotoshopIllustratorでの画像作成やコピーの仕方などの知識も大切なのだなと思いました。

名称未設定-4a

続いてCSSの応用的なテクニックを使った複雑なレイアウトについて学びました。

margin-leftなどで間隔を取り、divなどの要素からはみ出したデザインにすることで迫力や躍動感のあるデザインを演出することができたり、ネガティブマージンといってmargin0以下のマイナスの値を取ることができたり、また、文字の中の画像に回り込みをさせる場合にfloatのみを使うことなどを教えていただきました。

さらに、CSSの次世代バージョンとして開発が進んでいるCSS3についても教えていただきました。css3makerというサイトで、css3を使った「グラデーション」「変形」「ボックスに影」「文字に影」などが簡単に利用できたり、Border Radius Generatorというサイトで「角丸」が簡単に作成できたり、CSS Gradient Generatorというサイトで、より詳細なグラデーションの作成ができることなどを学びました。

そして、上記の事柄を踏まえながら以下のサイトを作成していきました。

名称未設定-4b

以前から気になっていたCSS3について知ることができて良かったです。ネット上のサイトで簡単にコーディングができるのはすごく便利だなと思いました。
これらのサイトを積極的に活用して、CSS3を取り入れていきたいと思います!

Comments are closed.