【2012.11.18】デザインの勉強の仕方

課題 CSS


Let's Go!　経験者用課題



ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>THML基本構造</title>


<style>
#container{
  width:400px;
  margin:50px auto 0 auto;
  padding:15px 20px;
  background-color:#dbdbdb;
}
#header{
  margin:10px 0 15px;
  padding:10px;
  background-color:#56c25f;
}        
#content{
  height:200px;
  margin:10px 0;
  padding:10px;
  background-color:#56c25f;
}
h1,h2{
  color:#fff;
  font-size:1.4em;
  font-weight:mormal;
  margin:0;
  padding:0;
}
</style>


</head>
<body>
  <div id="container">
  <h1>html</h1>
  <div id="header">
  <h2>head</h2>
  </div>
  <div id="content">
  <h2>body</h2>
  </div>
  </div>
</body>
</html>

段組み[ column ]（カラム）の解説

  • 段組の構造




container

ソースコード

#container{
  width:400px;
  margin:50px auto 0 auto;
  padding:15px 20px;
  background-color:#dbdbdb;

CSSプロパティの説明

#（シャープ）   /* [ id ]セレクタを用いての指定したもの */
.（ドット）   /* [ class ]セレクタを用いての指定したもの */
[ id ]１ページ内に同じ名前で使用できるのは１度まで
[ class ]何度でも使用することができる

container（コンテナ）    /* 全体を囲むカムラ「段組」 */

width（ウィズ）   /* ボックスの幅 */

margin（マージン）   /* 外側の余白 */

padding（パッティング）   /* 内側の余白 */

background-color   /* 背景の色 */

auto   /* 内容に合わせて自動設定。初期値 */

/* ボックスのプロパティの値
[ top ]   上辺
[ bottom（ボトム） ]   下辺
[ right ]   右辺
[ left ]   左辺

値をまとめて指定した場合
1つ：【上下左右】；
2つ：【上下】【左右】；
3つ：【上】【左右】【下】；
4つ：【上】【右】【下】【左】；
の順番になる */

/* [ width ]で横幅を指定し、左右のマージンに[ auto ]を指定する。
すると左右のマージンが同じ値になるように自動調節され真ん中に表示される。 */

ブラウザ表示

header

ソースコード

#header{
  margin:10px 0 15px;
  padding:10px;
  background-color:#56c25f;
}

CSSプロパティの説明

header   /* データの先頭に付加される、データ自体に関する情報 */

padding（パッティング）   /* 内側の余白 */

ブラウザ表示

conetnt

ソースコード

#content{
  height:200px;
  margin:10px 0;
  padding:10px;
  background-color:#56c25f;
}

CSSプロパティの説明

height（ハイト）   /* ボックスの高さ */

ブラウザ表示

タイプセレクタ

ソースコード

}
h1,h2{
  color:#fff;
  font-size:1.4em;
  font-weight:mormal;
  margin:0;
  padding:0;
}

CSSプロパティの説明

font-weight   /* （フォントウェイト）フォントの太さを指定する */
/* 指定する太さの値
[ normal ]   標準（数値400）
[ bold(ボールト) ]   一般的な太さ（数値700）
[ lighter（ライター） ]   相対的に一段階 細く
[ bolder（ボーダー） ]    相対的に一段階 太く
[ 数値 ]   100,200,300,400,500,600,700,800,900 の100刻みで指定 */

ブラウザ表示

font-color:をホワイトに指定しているためブラウザ上では背景色と同じになっています

div

div   <!-- [ <div>〜</div>で囲んだ部分をひとかたまりとする ] -->

結果をブラウザで表示