Fedora奮戦記

CSS やっぱり真ん中でしょう

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

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

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

<HTML>
<HEAD>
<TITLE>写真にタイトルを付けて配置する-5</TITLE>
<STYLE>

</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>

</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>

</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)

Firefox Portable Edition Ver.30. 日本語化

最近、ブラウザ各社のバージョンアップが盛んです。どこも、フラウジングがめざましく速くなった！ときそっています。どれをデフォルトのブラウザにするか迷うところです。それにしても、MozillaのPortable Editionへの対応の速いこと。
　　USBメモリで持ち運べる「Mozilla Firefox, Portable Edition」v3.0が公開
早速、我がUSBのFirefoxをバージョンアップし日本語化してみました。ので、その備忘録を。
ついでにThunderbird, Portable Editionバージョン 2.0.0.14の日本語化についても、おまけで。

１．mozilla firefox, portable edition | portableapps.com - portable software for usb drivesでFirefoxの英語版をダウンロードしインストール。
　　mozilla thunderbird, portable edition | portableapps.com - portable software for usb drivesでThanderbirdの英語版をダウンロードしインストール。　

２．Firefox Add-onsでQuick Locale Switcher 1.6.5.7をダウンロードしておく。（Thunderbird日本語化にも使う）

３．http://releases.mozilla.org/pub/mozilla.org/thunderbird/releases/latest/win32/xpi/のなかの、Japanese language pack3.0(ファイル名：ja.xpi）をダウンロードしておく。（Thunderbird日本語化にも使う）

４．Firefoxの英語版を起動し、メニューTools→Add-onsで、２．と３．のファイルをインストール。
Thunderbirdも同様です。

５．インストール後、Firefoxの英語版を再起動し、メニューTools→Quick Locale Swicherで日本語に変更します。

さて、メニューが日本語になったかな?

自力で乗り越えた事件 | 【2008-06-22(Sun) 21:26:21】
Trackback:(0) | Comments:(0)

まだまだ、序の口

次に、写真を横幅いっぱいに３枚並べる。これも、それほど難しくない。

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

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

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

</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>

</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)

カシオがすごい

電卓でおなじみのCASIOが提供している、高度計算サイト。
「計算に困ったらkeisanへ」、「計算のことならkeisanへ」がキャッチフレーズだとか。

物理公式から特殊関数、統計関数まである。ああ学生時代にこんなのあったらよかったのに･･･。
今のおばさんに役に立ちそうなのは、こよみの計算とか肥満の計算くらいか。

Fedoraから外れるけど | 【2008-05-30(Fri) 15:45:48】
Trackback:(0) | Comments:(2)

ポリシーファイルが設定されているアプリケーションは？

また、一月があっという間。パソコンどころではない事件に遭遇し、LINUXも何もかもすっ飛んでしまった。これで、それまで行き詰ってた内容も、折角覚えたコマンドも、すーっかり、忘れ？！また1から出直し。「そりゃあひどいんじゃない、続きを楽しみにしてたのに・・・・。」というお方はおられないでしょうし。もしおられたら、仏の顔も三度・・・・までとおゆるしください。

さてと、SElinux再再々度の「はじめのいっぽ」はですね、
＜コマンドベースではなく、GUIでの話ですが＞
「どのようなアプリケーションにポリシーファイルが設定されるかを、管理→セキュリティレベルの設定で見ることができる。」と書かれているのに（残念ながらFedora core4の例）、わがCentOS５のセキュリティの設定ウィンドウでは、SELinuxが有効かどうかまでしか表示されない。おっかしいのかなぁ？
どっかにパッケージがあるかも！！と、selinuxという検索キーでパッケージ検索してみると、policycoreutils-guiというのを発見。インストールしてみる。
管理ツールの中にSElinux managementなるものが現れ、Configure SELinux in a graphical settingと説明されている。どうやらポリシー修正の手伝いをしてくれそう。やったぁ。

policycoreutils-guiって最近のfedoraにはデフォルトで入っているのかな?

自力で乗り越えた事件 | 【2008-05-28(Wed) 16:55:44】
Trackback:(0) | Comments:(0)

またやってしまった。

また、一月がたってしまったようで・・・。
３０日間いったい何してたんだろう？本や雑誌を読んでも今ひとつピンと来ない、DNSサーバー設定。私がやりたいこととどこか違うんだよなぁ、どれも。
なんだか、根本的にとんでもない思い違いをしているらしい・・・・。うー、こんなときみんなどうやって解決しているんだろう。

ところで、気晴らしに、はまっているのが。
iIKnow！
ただで、英語の勉強ができる。今、私がやっているのは、動詞コロケーション１というコース。「ああそうだっけ」、という言う回しがでてきしたりして。なかなか楽しいです。

うーん、なんだかこのブログフツーの日記になりそうな気配。
イカン、イカン！！

最近の悩み事 | 【2008-04-24(Thu) 10:48:23】
Trackback:(0) | Comments:(0)

Fedora奮戦記

linuxサーバー構築が長年の夢のおばさんが、 Fedoraと戦い、いきづまったり、感激しながら成長していく記録（になるはず？！）です。ごめんなさい、最近CentOSにくらがえしました。

Home