タイトル

HTML と CSS の話

2011.10.21

目次

  1. なぜ CSS の話?
  2. CSS の概要
  3. block と inline を操る!
  4. 段組をする!
  5. まとめ

なぜ CSS の話?

CSS は・・・

  • WEB 系の開発では必須の技術!
  • ポイントを抑えると自由にレイアウトできる!
  • ちょっとテクニック使えるとカッコイイ!

うへへ

CSS いいよー

but

だけど

CSS の概要

CSS って何だ?

CSS って何だ?

最近の流れってこんな感じ

HTML
文書構造
CSS
見た目

作業の分離、HTML構造がシンプルになるとかのメリット

↓とか見たらどうでしょう?

ADP: ウェブデザイン/CSS Alternative Design Blog

CSS の基本

セレクタで指定した要素に見た目を設定する

ID
'#id名' で指定、文書内で一意になる
クラス
'.class名' で指定、複数の要素に指定可能
要素
'要素名' で指定する。ex.) div とか

さらにこれらを複数組み合わせて指定が可能。

詳しくはぐぐってください。

ポイント1

block と inline を操る!

block と inline

HTML にはブロック要素とインライン要素がある

タグ毎に決まっているが、display 属性で上書き可能

ブロック要素
要素は上から下方向に配置される
インライン要素
前後の要素は改行されない場合、左から右に配置される

ただし、インライン要素では width, height, 縦方向の margin, padding 属性は適用されない

実例!

どういうこと?

横に並ぶリスト

ブロック要素とインライン要素での代表的なテクニック

li { display: block;} (デフォルト)
  • HOME
  • BLOG
  • LINK
li { display: inline; list-style-type: none;}
  • HOME
  • BLOG
  • LINK

one more!!

inline-block

下記の属性が有効なインライン要素

  • width
  • height
  • 縦方向の margin
  • 縦方向の padding

display:inline-blockがけっこう便利。だけど… THE HAM MEDIA BLOG

ポイント2

段組みをする!

CSS で段組み!

段組みはレイアウトを行う上での必須のテクニック!

基本の2段組みレイアウトの方法を紹介

  • float を使う方法
  • position を使う方法

float を使う方法

float を指定した場合の配置を利用

親要素

後の要素は float を指定しない
重ならない様に幅を指定
clear 属性を指定して float 解除

position を使う方法

position 属性を使用した段組みのテクニック

親要素 - position: relative
position: static
右側の要素と重ならないように幅を指定
position: absolute
top, right を指定

通常(static)の場合の配置

static が指定された block 要素は次の挙動

  • 開始位置 + margin の位置に配置
  • 大きさは border + padding + width(height)
  • 子要素は 配置位置 + border + padding から開始

子要素の開始位置から margin 分離れた箇所に border が配置される。
padding した位置に子要素が配置される

relative, absolute の場合の配置

margin, padding に加えて、top などの指定が可能

relative
相対配置。static の場合基準位置からの位置を指定
absolute
絶対配置。基準となるボックスがの左上からの位置で指定。基準は static 以外の親要素。なければウィンドウ

親ボックス - position: static
relative: padding を加味した位置に子要素が配置される
absolute: 開始位置をウインドウの左上として配置

one more!!

ネガティブマージン

margin にマイナスの値を設定するテクニック

[CSS]ネガティブマージンの理解を深め、活用するテクニック集 コリス

display: table-cell

テーブル的な配置を可能にする

CSS「display: table」と「display: table-cell」で出来ること ibnet BLOG

まとめ

まとめ

まとめ

CSS はまず以下を押さえるといいかも!

  • display 属性
  • float 属性
  • position 属性

あとは擬似セレクタも使えるとかなり色々できるヨ!

この先へ!

他人の技を教わる、盗む

一歩先を目指すには・・・

  • テクニックについて説明したサイト、ブログを探す
  • Firebug, GoogleChrome の機能でソースを覗いていじる

ある程度基本的な所を覚えればあとはやる気次第!

おまけ

当資料は github でソースコード公開してます。

https://github.com/onjiro/presentation-css