824823 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

CSSでアルバム

■CSSで『ねこアルバム』をつくる

行き当たりばったり　タグ研究♪♪

♪♪楽天広場で使うCSS♪♪



もりのねこアルバム　その１
新しい猫草は、いつも取り合いです。

<font style=font-size:11pt;>
とりあえず、フォントのサイズを11ポイントに指定しました。
<div style=background-image:url(http://plaza.rakuten.co.jp/img/user/75/35/7127535/27.gif); background-repeat:repeat;width:600px;height:200px;margin-left:20px;padding:5%; border-left:double;border-left-color:#008080;border-left-width:20px;>
アルバムの下地の部分です。壁紙を繰返し貼る指定にし、大きさを決めます。悩んだのは縦サイズですが、いろいろな環境で違うので、適当に数値で入れてみました。ほかに、auto（自動）や％（割合）でも指定できるんですが、どうもうまく行かないんです。縦については、ピクセルでも、見た目と数値が違う気がします。もう、こうなれば、行き当たりばったり数字を入れてみるしかありません。
<div align="right"><font style=font-size:16px; font-family:"HG創英角ﾎﾟｯﾌﾟ体",fantasy;padding:5px; border-style:double;background-color:#FFFFFF;> もりのねこアルバム　その１</font></div>
アルバムの表題「もりのねこアルバム　その１」の部分です。 フォントに関して、スタイルをつけています。周囲の色や線を指定して、字体もHG創英角ﾎﾟｯﾌﾟ体にしました。見ている人のＰＣにこのフォントがない場合、fantasyとして指定してあるフォントに変わるらしいです。（試してないので、わかんないのですが、みなさんのところでは、どんなフォントで見えますか？）DIVのタグで右寄せにしています。
<img src="http://plaza.rakuten.co.jp/img/user/75/35/7127535/20.jpg" title="勢ぞろい" align="left" style=border-style:solid;border-width:5px;border-color:#FFFFFF;>
一枚目の写真を貼ってます。align=leftで　左側に写真、右側に文字が回り込む指定になっています。ほかに写真のまわりの線などを入れています。紙に焼いた写真風に白い枠です。
<div style=background-color:#DFFFDD;width:250px;height:auto;padding:3%;border-left:double;border-right:double;margin-left:300px;margin-top:40px;>新しい猫草は、いつも取り合いです。</div>
</div></font>
右側に入れたコメントの部分です。紙の幅はwidthで、縦の長さはheight:auto;で、文字を入れただけ紙が伸びるようにしてあります。
紙や写真の位置を決めるのは、marginです。上下左右、それぞれに指定できるので、ブラウザで表示させながら、微妙な位置を調整していきます。
二枚目、三枚目の写真を貼るときは、このコメント紙の部分同様、marginで位置調整をします。マージンの位置は、直前のタグのまとまりからの位置になるようです。この場合のように、画像の横に回り込む形になっていると、余裕がある限り、回り込みになります。まだ、回り込みをクリアする方法をみつけていません。

我流なのと、まだ勉強中なので、変なところもたくさんあると思うのだけど、とりあえず、こんな感じです。

参考にさせていただいたサイト（順不同）
★ とほほのスタイルシート入門
★ スタイルシート概説リファレンス
★ 超初心者のためのスタイルシート講座
★ Web工房きくちゃん
★ 鳥さんの棲むところ
© Rakuten Group, Inc.