私の教科書・その他

Fedora奮戦記をリンクに追加
カテゴリ展開メニュー
  • 自力で乗り越えた事件(59)
  • Fedoraから外れるけど(14)
  • 最近の悩み事(11)
  • PHP備忘録(5)
  • CSS備忘録(6)
  • このブログの変遷(8)
  • 未分類(0)
プロフィール

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

RSSフィード
ブロとも申請フォーム

この人とブロともになる

▲ページのTOPにもどる
CSS やっぱり真ん中でしょう
センタータグって、本当に便利だった。
なんでも、まんなかに配置したければこのタグを使えばよかった。でも！！
「文書のコンテンツや論理構造と表現のルールを分離する」
という意味では、「使わないほうがいいんじゃのぉ？！」ということになるわけで。
で、スタイルシートを使って、今回一番やりたかったのはこれ。
二枚の写真を並べて、真ん中に配置すること。

ミソはDIV.centerの指定
配置する写真の幅を指定すること！そして、「右も左もご勝手に！」というわけでautoにすればいい。

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




<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-5</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
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;
}
DIV.center{
width: 400px;
left: auto;
right: auto;
}

-->
</STYLE>

</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-5</H2>

<HR>
<P ALIGN="left">
<SPAN>
８．写真横に２枚(中央）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。
＝＝＝＝＝＝ここまで
</P>
<DIV CLASS="center">
<div CLASS="photo_H">
<IMG SRC="img_3.jpg" WIDTH="200" HEIGHT="150" ALT="中央1/2"><br>中央　1/2</div>
<div CLASS="photo_H">
<IMG SRC="img_4.jpg" WIDTH="200" HEIGHT="150" ALT="中央2/2"><br>中央　2/2</div>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>


CSS備忘録 | 【2008-07-04(Fri) 20:15:55】
Trackback:(0) | Comments:(0)
CSS 縦があれば横にも並べたい
写真を2枚縦に並べて、文章を回り込ませるのは意外と簡単だったけど、横に2枚並べて、文章の回り込ませるにはちょっと複雑。
floatの感覚がちゃんとわかっていないとだめだ。写真を左におくなら、写真1、写真2、文章を左から並べていく感じ。右なら右から並べる感じ。それを注意しながら、空間のとり方などを指定していきます。

写真の1枚目2枚目の指定が異なります。
DIV.photo_L、DIV.photo_L2が左に置く場合
DIV.photo_R、DIV.photo_R2が右におく場合
（表示される写真の1枚目と2枚目の並び順が、６．と７．とで逆になっているのに注意してください。）

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

<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-4</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {

font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
DIV.photo_L2 {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 0px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 10px;
font-weight: bold;
}
DIV.photo_R2 {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 0px 0px;
font-weight: bold;
}
-->
</STYLE>

</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>写真にタイトルを付けて配置する-4</H2>

<HR>

<DIV CLASS="photo_L"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="左1/2"><br>左　1/2</DIV>
<DIV CLASS="photo_L2"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="左2/2"><br>左　2/2</DIV>
<P ALIGN="left">
<SPAN>
６．写真横に２枚(左）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>



<HR>

<DIV CLASS="photo_R2"><IMG SRC="img_1.jpg" WIDTH="200" HEIGHT="150" ALT="右1/2"><br>右　1/2</DIV>
<DIV CLASS="photo_R"><IMG SRC="img_2.jpg" WIDTH="200" HEIGHT="150" ALT="右2/2"><br>右　2/2</DIV>
<P ALIGN="left">
<SPAN>
７．写真横に２枚(右）
</SPAN>
</P>
<P ALIGN="left">
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝ここまで
</P>
</DIV>
</DIV>
</BODY>
</HTML>


CSS備忘録 | 【2008-07-04(Fri) 17:01:33】
Trackback:(0) | Comments:(0)
CSSつづき
ちょっと、間があいてしまいましたがCSSの続きです。
ここからが、いよいよ今回やっとできるようになった、写真の配置のパターンです。
その１は、「写真を縦に二枚並べて、文章を回り込ませたい。」
DIV.photo_V_LとDIV.photo_V_Rで写真が左のパターンと右のパターンのスタイルの指定をしています。実は、基本形とおなじ。
写真１、改行、コメント１、写真２、改行、コメント２と並べておいて、DIVで挟めばいいだけ。何でこんなことがわからなかったのだろう・・・。ネットを探してもぴったりのお手本見つからなかったし･･･。

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

<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-3</TITLE>
<STYLE>
<!--
HR{
clear: both;
}
SPAN {

font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_V_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_V_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 0px 0px 10px 10px;
font-weight: bold;
}

-->
</STYLE>

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


</DIV>
</DIV>
</BODY>
</HTML>


CSS備忘録 | 【2008-06-30(Mon) 21:56:37】
Trackback:(0) | Comments:(0)
まだまだ、序の口
次に、写真を横幅いっぱいに３枚並べる。これも、それほど難しくない。

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

以下のソースを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>
３．写真横に３枚並べる
</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)
まずは基本形
これは、参考書にも載っているので、取り上げる必要はないんだけど、基本形なので・・・・。
600ピクセルの幅のページに、1枚の写真にタイトルをつけ右上または左上において、文章を回り込ませたい。

DIV.photo_L　が写真左についての指定、DIV.photo_R　が写真右についての指定です。
そのなかでのポイント！
文章を右左どっちに回り込ませるかをfloatで指定する。
写真につけるタイトル文字の色大きさなど指定をする。
文章が写真にくっつくと見づらいので、写真と文章のあいだに10ピクセルほどの空間を取りたい。marginで上右下左の順に指定する。

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


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

font-size: 12pt;
border-bottom: solid #FFC040 1px;
border-left: solid #FFC040 10px;
padding-left: 10px;
}
DIV.photo_L {
float: left;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 10px 10px 0px;
font-weight: bold;
}
DIV.photo_R {
float: right;
text-align: center;
color: #999999;
font-size: 10pt;
margin: 10px 0px 10px 10px;
font-weight: bold;
}
-->
</STYLE>

</HEAD>
<BODY BGCOLOR="#FFFFFF">
<DIV ALIGN="center">
<DIV STYLE="width: 600;">
<H2>タイトル付写真と説明文を配置する-1</H2>
<BR>
<div CLASS="photo_L">
<img width="300" SRC="img_1.jpg" HEIGHT="250" ALT="img_1.jpg"><br>左に写真</div>
<P ALIGN="left">
<SPAN>１．左に写真</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで

</P>
<HR>
<div CLASS="photo_R">
<img width="300" SRC="img_1.jpg" HEIGHT="225" ALT="img_1.jpg"><br>右に写真</div>
<P ALIGN="left">
<SPAN>
２．右に写真
</SPAN>
<BR><BR>
文章ここから＝＝＝＝＝＝＝＝＝
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。　　
いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす。＝＝＝＝＝＝＝＝＝ここまで

</P>
</DIV>
</DIV>
</BODY>
</HTML>
　

CSS備忘録 | 【2008-06-16(Mon) 21:22:02】
Trackback:(0) | Comments:(0)
1年前、CSSでやりたかったことは･･･。
去年の春頃、古い自分のホームページのCSS化にはまり、大部分は形にした。でも、Floatとかボックススタイルについて、いまいちよくわからなくて、一部のページは手付かずだった。最近、ホームページを書く仕事が舞い込んだのをきっかけに、再チャレンジ。
当時、参考書にはスタイルの基本的な設定方法だったり、2カラムとか3カラムからなるページの作成法くらいしか書かれておらず、どうも自分のやりたいことの具体的サンプルはなく、かといって応用力もなく挫折。私がやりたかったのは、「タイトル付写真と説明文」をテーブルを使って配置していたが、これをスタールシートで実現したい！！ということ。今回、「ある程度おもうような形」になったので、数回に分けて記録として残そうともいます。

最近はブログが当たり前で、あんまりスタイルを気にしながらHTMLを手書きで書く人なんかいないんだろうなと思いつつ・・・。
こんなの、テーブルのままでいいじゃんという人もいるだろうなと思いつつ･･･。
ま、いっか。

CSS備忘録 | 【2008-06-16(Mon) 17:13:15】
Trackback:(0) | Comments:(0)
最近の記事＋コメント
怪しいサイトをチェック！
メールのヘッダーチェックも。 http://www.aguse.jp/
ブログ内検索


何人来てくれたかな？
応援してるブログ
FC2ブログジャンキー

「アクセス数が全然伸びない…」そんな悩みをブログジャンキーが解決します！

FC2ブログランキング

FC2ブログランキング

▲ページのTOPにもどる
Copyright © Fedora奮戦記 All Rights Reserved. Powered By FC2.　 skin：webdb3
無料ホームページ アフィリエイト レンタルサーバー FC2ブログ 一戸建て