読者です 読者をやめる 読者になる 読者になる

感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

floatを使って画像を回り込ませる

HTML/CSS
<スポンサーリンク>

1.基礎

floatプロパティというのは、指定された要素を左または右に寄せて配置する際に使用する。
後に続く内容は、その反対側に回り込むようになる。

今回は、画像をコンテンツ(文章)の左側に回りこませるサンプルを作ってみたい。
けっこうシンプルなCSSで実現可能だ。

2.デモ

今回はこんな感じで、画像を左側に回りこませるサンプルを作りたい。
f:id:sho322:20140204224808j:plain

では、サンプルを見ていく。

3.サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像を回り込ませる</title>
<link rel="stylesheet" type="text/css" href="./css/example.css">
</head>
<body>
<div>
	<img class="imgleft" src="./img/cal.jpg" width="150" height="150" alt="カレンダー" />
</div>
<p>
冊子形式などを含めた暦、もしくは暦法のこと。英語などでは「暦」や「暦法」と日本で言うところの「カレンダー」とは区別されない。
日付・曜日などを表形式などで表示し、容易に確認できるものを指す。七曜表(しちようひょう)とも言う。
</p>

<p>
カレンダーには日付のほか曜日や祝祭日などが表示される。日本で売られているものは、普通、国民の祝日が、またしばしば六曜が記されている。
市販あるいは販促品のカレンダーには日めくりや月めくり、週めくりといった紙製の冊子のものが多いが、1年分を1枚にしたポスター形式のポスターカレンダーもある。また、紙ではなくブロックを用いるブロックカレンダーもある。このほか自動的に日付が表示される電子式の電子カレンダーもある。また、日めくりの中には、1日毎とは限らず土曜日と日曜日の分が1枚になっていたり、3日毎にめくるカレンダーもある。
日本ではカレンダーは企業や商品の宣伝などのために販促品あるいは粗品として贈られることが多い。また野球やサッカーなどのスポーツ選手やアイドル、漫画・アニメのキャラクターが挿入されている市販カレンダーも人気がある。
基本的には、毎年後半に翌年のものが発売されるが、例外もある。例えば日本の学校年度に合わせて毎年前半に「同年4月〜翌年3月」のものが発売されるスクールカレンダーがある。
なお、日本のスーパーマーケットなどでは、袋に入った小さな商品(例:チャーハンの素など)を、台紙に貼り付けて縦に吊り下げている販売方法を、その形の類似からカレンダーと呼ぶことがある。
</p>
</body>
</html>
.imgleft {
	float: left;/* これを指定することで、画像を左に配置し、あとのコンテンツが右に回り込むようになる */
	margin-right: 10px;
	margin-bottom: 30px;
}

/*
p {
	margin-left: 165px; 画像の下に文字が回り込まないようにする 
}
*/


ここで、下のp要素のCSSコメントアウトしているが、こいつを使うと、画像の下に文字が回り込まないようになる。
コメントアウトを外したものを表示すると、以下のようになる。
f:id:sho322:20140204224821j:plain

4.書籍紹介

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

最近はめっきりこの本のお世話になっている。
暇を見てはサンプルを真似して、勉強している。
1ページ1ページがすごく勉強になる。