暮らしをおトクにかえていく|ポイントインカム
ワラウ - 遊べるポイントサイト
Internet Explorer
Version 7以降
Fire Fox
Version 3.5以降
Safari
Version 5以降
それ以前のバージョンでは表示が異なる場合があります。
  • 現在製作中...


HTML & CSS & JavaSc...

HTML & CSS & JavaScriptリファレンス

価格:2,625円(税込、送料別)

レンタルサーバー&ドメイン

ホームページを作るときにはサーバー(作ったHTMLを置く所)を借りなければいけません。お手頃なレンタルサーバーをいくつか上げてみました。



月額105円から、キャンペーンあり


380円から借りれるお得なサーバ!!オススメ


ナウでヤングなレンタルサーバー


20GBの大容量で『お試し期間が2週間!!』


レイアウトのためのボックスを作ろう

HTML講座ではレイアウトするために<table>タグを使いましたが CSSでレイアウトする場合は<div>タグを使い、 CSSで大きさや色などを指定します。

ボックスを作る

ボックスを作る場合はまず、ボックスの高さ(height)、横幅(width)を指定します。 ボックスの大きさがわかりやすいように背景に色(background-color)も付けておきましょう。

<html>
 <head>
  <style type="text/css">
  <!--
  .box{
   height:100px;
   width:100px;
   background-color:gray;
   }
  -->
  </style>
 <head>
 <body>
  <div class="box">100ピクセルの正方形。</div>
 </body>
</html>
100ピクセルの正方形。

高さ100ピクセル、横幅100ピクセルで背景が灰色のボックスが出来ました。

<div>を使って高さ250ピクセル、横幅300ピクセル、背景が青色のボックスを作ってみましょう。

※今回からは上のフォーム(背景が水色)にCSSの中身のみを、下のフォーム(背景が黄色)にHTMLを書いて下さい。

<html>
<head>
<style type="text/css">
<!--

-->
</style>
</head>
<body>

</body>
</html>

答えはここをクリック

CSS

.box{
 height:250px;
 width:300px;
 background-color:blue;
 }

HTML

<div class="box"></div>

高さや横幅を指定する単位はpx(ピクセル) 以外に%(パーセント)cm(センチメートル)mm(ミリメートル)em(エム)等があります。ホームページ制作で 主に使用されるのはpx(ピクセル)em(エム)です、 最初はこの2つを覚えておけば大丈夫です。
このCSS講座では主にpxを使って説明していきます。

このボックスを作るのはCSSでレイアウトする基本ですのでよく覚えておきましょう。

ボックスの枠線(わくせん)

<div>で作ったボックスにborder(枠線)を付けることもできます。
枠線には線のborder-width(太さ)border-style(線の種類)border-color(線の色) と設定出来る項目があります。

<html>
 <head>
  <style type="text/css">
  <!--
  .box{
   height:100px;
   width:100px;
   border-width:5px;
   border-style:dashed;
   border-color:green;
   }
  -->
  </style>
 <head>
 <body>
  <div class="box">枠線の装飾</div>
 </body>
</html>
枠線の装飾。

border-widthはピクセルで指定します。例)border-width:1px;

border-styleは主に3種類あります。

solid
実戦:普通の線です。
double
二重線:2本の線です。
dashed
破線:点線です。

border-colorは付けたい色を指定します。例)border-color:blue;

<div>を使って高さ250ピクセル、横幅300ピクセル、背景が赤色、黒色の太さ10ピクセルの実線のボックスを作ってみましょう。

<html>
<head>
<style type="text/css">
<!--

-->
</style>
</head>
<body>

</body>
</html>

答えはここをクリック

CSS

.box{
 height:250px;
 width:300px;
 background-color:red;
 border-width:10px;
 border-color:black;
 border-style:solid;
 }

HTML

<div class="box"></div>

borderの線の太さ、線の種類、線の色を別々に指定していましたが、 一つにまとめる事ができます。

<html>
 <head>
  <style type="text/css">
  <!--
  .box{
   height:100px;
   width:100px;
   border:3px double green;
   }
  -->
  </style>
 <head>
 <body>
  <div class="box">一つにまとめた書き方。</div>
 </body>
</html>
一つにまとめた書き方。

borderで指定するとボックスを囲んだ枠線が表示されますが 上下左右それぞれ指定することもできます。

border-top
ボックスの上辺に線を引きます。
border-bottom
ボックスの下辺に線を引きます。
border-left
ボックスの左辺に線を引きます。
border-right
ボックスの右辺に線を引きます。