私の教科書・その他
カテゴリ展開メニュー
  • 自力で乗り越えた事件(59)
  • Fedoraから外れるけど(14)
  • 最近の悩み事(11)
  • PHP備忘録(5)
  • CSS備忘録(6)
  • このブログの変遷(8)
  • 未分類(0)
プロフィール

Author:ちゃあ
Linuxまったく素人のおばさんです。
暇があるとFedoraと戦っています。
援軍は「質問の意味がわからない!」とすぐ怒り出すCOSMOくんと、機嫌がいいと相談に乗ってくれるが「基本は自分でやりなさい!」のHIDEくん。
結局、「頼れるのは己のみ!!」が信条です。
でも!!声援とかアドバイスのコメント、なんでも大歓迎。よろしくお願いしまーす。

RSSフィード
ブロとも申請フォーム
まだまだ、序の口
次に、写真を横幅いっぱいに3枚並べる。これも、それほど難しくない。

DIV.photo_H でスタイルを指定しています。
ポイントは、写真を右に並べていくという感じで、float: left;をつかう。
また、幅600ピクセルのところに、写真を3枚並べるので写真の表示幅を200ピクセルにしてある。
写真3枚の幅の和がが600ピクセルを超えると、改行されてしまうので、注意。

以下のソースをhtmlファイルとして保存すればブラウザで見ることができます。(画像は用意してください。)
サンプルはここにあります。 

<HTML>
<HEAD>
<TITLE>タイトル付の写真を配置する-2</TITLE>
<STYLE>
<!--

SPAN {

font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}

DIV.photo_H {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 0px;
font-weight: bold;
}
-->
</STYLE>

</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付の写真を配置する-2</H2>
<P ALIGN="left">
<SPAN>
3.写真横に3枚並べる
</SPAN>
<BR><BR>
文章ここから=========
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。  
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。  
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。  
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。  
=========ここまで</P>
<DIV CLASS="photo_H">
<img SRC="img_1.jpg" width="230" HEIGHT="150" ALT="1/3"><BR>1/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_2.jpg" width="200" HEIGHT="150" ALT="2/3"><BR>2/3</DIV>
<DIV CLASS="photo_H">
<img SRC="img_3.jpg" width="200" HEIGHT="150" ALT="3/3"><BR>3/3</DIV>
</DIV>
</DIV>
</BODY>
</HTML>



CSS備忘録 | 【2008-06-17(Tue) 23:38:30】
Trackback:(0) | Comments:(0)
コメントの投稿
管理者にだけ表示を許可する

最近の記事+コメント
怪しいサイトをチェック!
メールのヘッダーチェックも。 http://www.aguse.jp/
ブログ内検索
何人来てくれたかな?
応援してるブログ
FC2ブログジャンキー
FC2ブログランキング