ホームページをつくってみませんか？ 4

donguri

ホームページを作ってく時にやりたいことの一つとして自由にレイアウトしたい。ということがあると思います。

そこでどうやったら自由にレイアウトできるかを書いてみます。

最初に、まず基本は前にも書いているもの。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
	
</body>
</html>

これはお約束にしておいて、

<body>
<!-- 	内容を書く　　 -->	
</body>

とします。

内容の中身を作って、自由にレイアウトしてみましょう。

まず、四角を書きます。

<div></div>

というタグを使います。でこの"div"に命令を書いて行きます。

<div style="width:100px; height:100px; border: 1px solid black;" >Hellow</div>; height:100px;border: 1px solid black;" >Hellow</div>

 これで四角が書けます。width:100pxは幅が100pxの大きさ、height:100pxは高さが100pxの大きさであることを指定しています。最後にborder: 1px solid black;で線を描画するように命令しています。その意味は線(border)は1pxの太さで実線(solid)で黒(black)ということです。

こんな感じで描画されていると思います。

これを思った位置に配置してみましょう。配置する命令としては、

position:relative;　　相対値で指定します
top:300px;　 上から100pxからのところを指定します。
left:300px;　 左から500pxのところを指定します。

では<div>に追加してみましょう。

<div style="position:relative; width:100px; height:100px;border: 1px solid black;top:100px;left:50px;" >Hellow</div>

となり、表示させると、

こんな感じになります。

命令を書くことによって自由にレイアウトすることができます。

いろんな場所に描画させてみましょう。

これでどこでも好きな位置に描画できるようになりました。


この記事が気に入ったらサポートをしてみませんか？