CSS上級編

マイサイトをより本格的に仕上げるためのCSS上級編になります。

このマイサイトでは、主にフッターのプロフィールの形を整えるのに使っています。

結構複雑なので、初めてですと苦戦するかもしれませんが、

挑戦してみたい人はぜひどうぞ！

01.まずは素材をダウンロード

こちらをダウンロードしましょう。

02.何も考えずにお手本に沿って、HTMLを書きます。

HTMLの

</div><!–footer widget end–>

という記述の下に、

<div class=”profile”>からはじまる記述があります。こちらを書き込んでいきます。

これが、CSSのclass/IDと呼ばれるものです。

※Class/IDがどういうものかについては、PDFにまとめました。

で説明しています。参考にしてください。

02.何も考えずにお手本に沿って、CSSを書きます。

footer部分に profile / oshashin / onamae という３つの要素が追加されています。

これをお手本通りに書き込んで行きましょう。これらが

ClassとIDについてのCSSです。

※Class/IDがどういうものかについては、PDFにまとめました。

で説明しています。参考にしてください。

これらを使って、要素を細かく分けることで、特定のものだけにCSSを指定する事ができるようになります。

特に、補足で説明している、h2要素が回りこまない部分についてはよく読んでみてください。

03.overflow : hidden ;　とは何か

CSSのprofileの部分にあるoverflow : hidden ;という記述。

何に使うものなのか、試しに外してみましょう。

スクリーンショット 2014-06-05 16.55.02

こうなるはずです。厄介ですが、

この部分を深く理解しようとするとかなり大変です。

ここはおまじないとして追加して置いてください。