techronicle テクロニクル

Webサイト作成に関する情報提供サイトです。WordPress,HTML+CSSなど。

リストと回り込み

2010/10/18 未分類

今日は、授業でリストと回り込みを扱った。リストには順不同リストと番号付きリストがある。順不同リストは、UL=unorderd list、番号付きリストは、OL=orderd listタグを使う。

リストの項目は、liで共通である。

回り込みのサンプルとしては、テキストと画像の基本的なレイアウト。テキストを左に、写真を右に配置するシンプルな並べ方である。

これだけでは、単調になりがちなので、左右交互に配置するという応用演習を行った。早い人は、すぐにCSSを完成させることができた。先週初めて、HTMLやCSSを知ったばかりなのにそのスピードには驚かされる。

回り込みには、floatプロパティを使う。このタグによって、左右の並びを制御できる。回り込みの解除には、clearタグ。ほとんどの場合は、bothを指定する。

それから、最後は、リストの行頭文字種類を変える。list-style-typeプロパティを使うが、これによって、リストの頭を●にしたり■にしたり、あるいはローマ数字、アルファベットなどにも変更できる。

行頭文字は、画像に変更もできる。できるが、位置が微妙にずれたりするので、位置決めに細かい調整が必要だったりする。

例題の場合は、絶妙な画像のサイズで、ぴったり収まっているようだ。

このあと、ブログ、Twitterのアカウント登録を行った。