■概要
float属性は、WEBページに画像をどんな形でテキストと一緒に表示するかを設定するものです。
leftとrightを指定する場合は、displayは無視されます。
あと、以降の要素にclear属性が設定されると、画面表示に影響されます。
■使用方法
.content > img { float: left }
■例
<html>
<head>
<style>
.float-container {
width: 400px;
border: 2px solid #09c;
}
.float-container img {
float: left;
margin: 5px;
padding: 5px;
border: 2px solid #90C;
}
</style>
</head>
<body>
<div class=”float-container”>
<img src=”images/planet.jpg”>
情報伝達の手段として、一般的な電子メールですが、
LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
面倒で苦手、という声も聞きます。
基本となる形を理解していれば、
怖がる必要はありません。
以下に基本の形式を紹介します。
</div>
</body>
</html>
出力結果
情報伝達の手段として、一般的な電子メールですが、
LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
面倒で苦手、という声も聞きます。
基本となる形を理解していれば、
怖がる必要はありません。
以下に基本の形式を紹介します。
■レイアウトのfloat
float属性は、もともとイメージとテキストの配置のために登場したが、最近はレイアウトを設定するためにもよく使われます。
divタグをfloat属性とwidth, height属性などを利用する方法です。
■例
<html>
<head>
<style>
.ex-layout { height: 310px }
.menu {
width: 300px;
height: 40px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.main .left-menu {
float: left;
width: 50px;
height: 254px;
border: 2px solid red;
background-color: #ffe7d5;
}
.main .content {
float: left;
width: 250px;
height: 250px;
}
.main .content .article {
height: 200px;
border: 2px solid blue;
background-color: #e2e9ff;
}
.main .content .comment {
height: 50px;
border: 2px solid purple;
background-color: #ffddff;
}
</style>
</head>
<body>
<div class=”ex-layout”>
<div class=”menu”>global menu</div>
<div class=”main”>
<div class=”left-menu”>left menu</div>
<div class=”content”>
<div class=”article”>article</div>
<div class=”comment”>comment</div>
</div>
</div>
</div>
</body>
</html>
出力結果
articlecomment
