HTML vol.9

  • CSS vol.4
    • display
    • position
    • float
    • visibility
    • overflow

display

http://reference.sitepoint.com/css/display
http://www.marguerite.jp/Nihongo/WWW/RefCSS/display.html
表示方法を指定するプロパティ

display: 値;

という書き方をする。
値には

block ブロックレベルではデフォルト
inline インライン要素ではデフォルト
list-item リストアイテムの表示方式
none 何もない

などがある。

  • ナビゲーションバーとかで使うとよさげ。
    • もっと早くに知っておけば、これに活かせたのになぁと残念に思いました。

position

http://reference.sitepoint.com/css/position
http://www.marguerite.jp/Nihongo/WWW/RefCSS/position.html
表示位置を指定するプロパティ

position: 値;
top: 値;
inherit 上位要素を伝承  
static 通常の配置
relative 通常の配置から指定した分だけずれて表示 top,left,bottom,rightが使用可
absolute 上位要素に指定がなければ絶対値で表示 top,left,bottom,rightが使用可
fixed 設定した値に固定される top,left,bottom,rightが使用可

visibility

http://reference.sitepoint.com/css/visibility
http://www.marguerite.jp/Nihongo/WWW/RefCSS/visibility.html
可視性を指定するプロパティ

visibility: 値;
inherit デフォルト
visible ボックスを見えるようにする
hidden ボックスを見えなくする

float

http://reference.sitepoint.com/css/float
http://www.marguerite.jp/Nihongo/WWW/RefCSS/float.html
左または右に寄せ手は位置
static以外の値が指定されている要素には適応されない。

float: 値;
left,right,none
初期値 none
  • floatはclearしなくちゃいけない。

overflow

http://reference.sitepoint.com/css/overflow
http://www.marguerite.jp/Nihongo/WWW/RefCSS/overflow.html
要素が入りきらなかったときにどうするかを指定するプロパティ

overflow: 値;
inherit 上位要素を伝承
visible はみ出してもそのまま(デフォルト)
hidden はみ出しは表示しない
scroll はみ出しは表示しないがスクロールが可能になる。
auto 入りきらないときにスクロールになる

今更ですが、使っている教科書はこちら

速習Webデザイン 改訂新版 HTML & スタイルシート

速習Webデザイン 改訂新版 HTML & スタイルシート