マイサイトをより本格的に仕上げるための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 という３つの要素が追加されています。
これをお手本通りに書き込んで行きましょう。これらが
ClassとIDについてのCSSです。
※Class/IDがどういうものかについては、PDFにまとめました。
http://hoxai.com/others/CSS/CSSjoukyu.pdf
で説明しています。参考にしてください。
これらを使って、要素を細かく分けることで、特定のものだけにCSSを指定する事ができるようになります。
特に、補足で説明している、h2要素が回りこまない部分についてはよく読んでみてください。
03.overflow : hidden ; とは何か
CSSのprofileの部分にあるoverflow : hidden ;という記述。
何に使うものなのか、試しに外してみましょう。
こうなるはずです。厄介ですが、
この部分を深く理解しようとするとかなり大変です。
ここはおまじないとして追加して置いてください。
