ISOBE PCサークル　ホームページ

記事一覧

・	背景画像3【CSS】【2011.02.04】
・	背景画像4【CSS】【2011.02.15】
・	背景画像5【CSS】【2011.02.18】
・	背景画像6【CSS】【2011.02.25】

カレンダー＆アーカイブズ

2011年2月


		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28

カレンダーの上にあるセレクトボックスを用いてアーカイブ（過去のデータ）を表示。
赤字の日はクラスやイベントのある日。
その中で下線のあるものは記事があり、それへのリンク。
同日に複数の記事がある場合は先頭の記事に飛ぶ。
祝祭日はその日の背景に日の丸が表示されるがクラスやイベントがない場合、数字は黒字。


*Record*

・ 2011.02.04 (金)
	Personalクラス 19:30-21:30 　於:生涯学習センター　　　　第二研修室
・2011.02.15（火）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室
・2011.02.18（金）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第二研修室
・2011.02.25（金）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第二研修室

Recommendation（Links）

【東風（TONG POO）】

YMOの1曲。アルバム「イエロー・マジック・オーケストラ」より。
私が彼らのアルバムを買ったのは「ソリッド・ステート・サバイバー」が最初で最後であった。
この曲はそのアルバムには収録されていない曲だが、なぜか最も好きな曲なので、ここにあげておく。
さて、メンバー3人の卓越した演奏技術はもちろんだが、この時期には矢野顕子さんや渡辺香津美さんなどもライブサポートメンバーとして参加している。今、考えれば本当に豪華なメンバーである。
こういう演奏を聴くと、バンドというものにあらためて惹かれる。
(Yukio)

アーカイブ　［2011年2月分］

2011年2月4日（金）

背景画像3【CSS】

前回の記事において、背景画像を「縦方向のみのタイルパターン」として表示する記述を取り上げました。
今回は「横方向のみのタイルパターン」を取り上げます。
　
　
【横方向のみのタイルパターン】

前回のCSSの記述でrepeat-yというものがありましたが、今回の記述ではその部分がrepeat-xとなるだけです。

BODY {
BACKGROUND-IMAGE : URL(./sakura2.jpg);
BACKGROUND-REPEAT : repeat-x;
}

つまり、このCSSの記述は、数学の方程式などで用いられるx座標、y座標と同様、Xは横軸、yは縦軸を示しており、その方向へ画像をRepeat（繰り返し）します。

今回のCSSでの表現では、ブラウザのページ領域の最上部にのみデザインするのに適しています。特に下図のような背景色へのグラデーション画像を使うとより洗練された背景を実現できます。（例の桜の図では前回同様、白色へのグラデーションで表現しています、画像の方を加工できれば、基本的にどのような背景色へのグラデーションでも可能です。）

　

詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。　

Posted by Yukio

記事 No.0000082　


2011年2月15日（火）

背景画像4【CSS】

先の3種類の記事において、背景画像は羅列されるのみで、スクリーンの特定の位置に表示させるなどの細かな指定はできませんでした。
今回のCSS機能は背景画像の表示位置をピクセルをはじめ様々な単位で細かく指定できるので、これまでの背景指定では難しかった表現を比較的容易に実現することができます。
　
　
【表示位置の指定】

今回の記述はBACKGROUND-POSITIONというもので、背景画像の表示位置を設定するものです。表示位置の基準となるのは背景画像の左上隅部分です。
　

次のCSSの記述例のとおり、今回の機能を使うにはBACKGROUND-REPEAT: no-repeat;と一緒に使うことが多く、より効果的です。（画像の表示を繰り返さないための命令）

BODY {
BACKGROUND-IMAGE : URL(./wall.jpg);
BACKGROUND-REPEAT : no-repeat;
BACKGROUND-POSITION : 100px 100px;
}

上の記述でBACKGROUND-POSITION: の次に100px 100pxという2つの数値が羅列されています。この2つの数値が、ブラウザのページ表示領域におけるピクセル単位での、左がx座標（横軸）、そして右がy座標（縦軸）となっており、そこを基準点として画像が表示されることになります。

その他にもPixelのかわりに「CENTER」や「TOP」で指定したり、様々な単位で指定する方法がありますが、ここでは割愛します。

詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。　

Posted by Yukio

記事 No.0000083　


2011年2月18日（金）

背景画像5【CSS】

今回の機能はHTMLにも固有の機能である「背景画像のスクロール停止」機能ですが、一応、CSSの書き方も覚えておいてください。
　
　
【背景画像の固定（スクロール停止）】

HTMLを用いて背景画像を固定するためには<body>タグに次のようなプロパティを記述をします。

<body background="./back.gif" bgproperties="fixed">

同様の機能をCSSではBACKGROUND-ATTACHMENT: fixed;と記述します。
　
BODY {
BACKGROUND-IMAGE: URL（./wall.jpg）;
BACKGROUND-ATTACHMENT: fixed;
}

背景画像を固定したページへの移動

詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。　

Posted by Yukio

記事 No.0000084　


2011年2月25日（金）

背景画像6【CSS】

過去５回に亘り説明してきたCSSでの背景画像の設定ですが、最後にそれらの設定を一つの記述にまとめる方法を紹介して終えたいと思います。
　
　
【背景画像の一括設定】

一括設定は特に難しいものではなく、先の記述パターンをブランクで区切り、羅列しておくことにより可能になります。

body {
      
               background: 
              #000000 
              url(wall.gif) repeat-y 100 100 fixed;

              }

簡単な説明で申し訳ありませんが、特に説明する必要もないでしょう。

詳細はクラスで説明します。

※わかりにくいようであれば説明しますのでクラス開催日にお申し出ください。　

Posted by Yukio

記事 No.0000085　

　
過去のデータを読むときにはサイドバーの「カレンダー&アーカイブズ」より。