CSS上級編

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

 

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

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

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

 

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

 

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

http://hoxai.com/others/CSS/otehon.zip

 

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

HTMLの

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

<div class=”clear”></div>

という記述の下に、

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

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

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

http://hoxai.com/others/CSS/CSSjoukyu.pdf

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

 

 

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

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

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

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

 

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

http://hoxai.com/others/CSS/CSSjoukyu.pdf

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

 

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

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

 

03.overflow : hidden ; とは何か

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

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

 

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

 

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

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

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