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

記事一覧

・	内部スタイルシート2【CSS】【2010.11.05】
・	記述の基本1【CSS】【2010.11.17】
・	記述の基本2【CSS】【2010.11.23】
・	ID【CSS】【2010.11.26】

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

2010年11月


	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	29	30

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


*Record*

・ 2010.11.05 (金)
	Personalクラス 19:30-21:30 　於:生涯学習センター　　　　第二研修室
・2010.11.17（水）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室
・2010.11.23（火）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室
・2010.11.26（金）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室

Recommendation（Links）

【心象風景】

太田裕美さんのアルバム「こけてぃっしゅ」から。
当時、FMで、いろいろなシンガーの新作アルバムを紹介するプログラムがあったのだが、知っている、知らないにかかわらず録音しては通勤時に聴いていた。
それで好きになったシンガーも結構多いのだが、太田さんもその一人。
デビュー当時の曲、「雨だれ」や「最後の一葉」なども嫌いではなかったが、あえて聴こうという気にはならなかった。
ただ、先のプログラムで録音した「こけてぃっしゅ」の曲集を聴いてから彼女の曲が好きになり、遡って聴いていったのだが、結局、このアルバムが一番よかった。
このアルバムは「恋愛遊戯」を含んだ、サンバ・ボサノバなどのラテン系音楽を中心に収録されたものだが、それ以前のアルバムにこのような曲はほとんどなかった。
以前の曲で印象に残っているのは「銀のオルゴール」。（最後の一葉Ｂ面）　

まさに昭和の名曲というべき曲で、今時の若い人たちにこういう純粋で悲しい恋愛はまずないだろうという曲。
(Yukio)

アーカイブ　［2010年11月分］

2010年11月5日（金）

内部スタイルシート2【CSS】

一方、HTML要素に直接、スタイルシートを組み込むこともできます。
例えば、ある段落だけに文字サイズや色などを適用したい場合には、次のように限定した記述が可能です。（IDやクラスによる設定は稿をあらためます。）
　　

例	<p style="font-size: 80%; color:blue;">スタイルシートの要素設定</p>
	↓
	スタイルシートの要素設定

※	ただし、この場合、<head>～</head>の部分にCSS文の言語を指定するためのmetaタグを記述しておかねばなりません。（これにより、要素に記述されるstyle属性の部分がスタイルシートであることが定義されます。） <head> <meta http-equiv="Content-Style-Type" content="text/css"> </head> 　他のHTML文は省略していますが、当然、必要です。

　　
因みに要素にはどのようなものがあるか、主なものを次にあげておきます。
私自身、スタイルシ－トを組み込むことのない要素も多いですが、一応、主なものだけでもこれだけあります。（ここでは説明しませんので、どのようにCSSが設定されるかは、各自で実際に用いてみて帰納的検証を行ってください。）

　

**要素タイプ一覧**
要素名	※分類	説明
【基本構造】
html	-	文書のルート
head	-	文書のヘッダ
body	-	文書のコンテンツ
title	-	文書のタイトル
meta	-	メタ情報
div	B	範囲の指定（ブロックレベル）
span	I	範囲の指定（インライン）
h1-h6	B	見出し
address	B	作者情報
【テキスト】
p	B	段落
br	I	改行
sup	I	上付き文字
sub	I	下付き文字
【テキスト表現】
font	I	フォントの種類・色・サイズ
basefont	I	基準となるフォントサイズ
big	I	より大きめの文字
small	I	より小さめの文字
b	I	太字
i	I	イタリック体
strike	I	取り消し線
u	I	下線
tt	I	等幅フォント
【レイアウト】
center	B	センタリング
hr	B	水平線
【リンク】
a	I	リンクのアンカー
base	-	基準URL
link	-	リンク
【リスト】
ul	B	順不同のリスト
ol	B	順序付きリスト
li	-	リストの項目
【画像・オブジェクト】
img	I	画像
map	I	イメージマップ
area	-	イメージマップの領域
object	I	オブジェクトの埋め込み
applet	I	Javaアプレットの埋め込み
param	-	パラメータの設定
【テーブル】
table	B	表
tr	-	表の行
td	-	データ用のセル
th	-	見出し用のセル
【フレーム】
frameset	-	ウィンドウの分割
frame	-	フレーム内の設定
noframes	B	フレームの代替内容
iframe	I	インラインフレーム
【フォーム】
form	B	入力フォーム
input	I	フォームの部品
textarea	I	複数行の入力欄
select	I	セレクトボックス
option	-	選択肢
button	I	ボタン
【スタイルシート・スクリプト】
style	-	スタイルシート
script	I	スクリプト
noscript	B	スクリプトの代替内容

※	分類欄 Bはブロックレベル要素のことで、ひとつのまとまりを構成する要素のこと。　通常、<p>～</p>のように終端を示すタグを用いる。 I はインライン要素のことで、文章中の一部として扱われる要素のこと。 - は上の二つのどちらでもないもののこと。

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

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

Posted by Yukio

記事 No.0000071　


2010年11月17日（水）

記述の基本1【CSS】

昔、プログラミングに興味を持って習いにきた人の中にも、C++やJavaなどの実用コーディングを見て、「なんじゃこりゃ！」と、一瞬にして興味を失くした人が何人かいました。
それもそのはずで、基本はともかく、実際に機能するシステムとするには、それこそ何千行にも及ぶようなプログラムを何本も記述しなければなりません。
タイプだけでも大変な量ですから、現在のインスタントな教育で学んだ人達にとっては、かなり根気を要する作業になります。
多分、それを自分のものにするには、いったいどれほどの時間がかかるのか...と、考えただけで嫌気がさしたに違いありません。
ただ、何事もそうでしょうが、基本をきちんとマスターし、簡単なプログラムから順に試作していけば、いずれ、何千行のプログラムでさえ、自然にできるようになるものです。（というか、作っていったら、知らない間に何千行にもなっているものです。私ももちろん、「なんじゃこりゃ...」の口でしたが、当時は周りにそういうことをしている人がいなかったので、焦る気持ちがないだけ幸いでした。）
なお、今回説明するCSS自体はプログラミング言語の中でもHTMLと並び、かなり平易な言語で、C++やJavaのようにある程度の予備知識が必要な言語ではありません。
HTMLを理解していて、Excelを使える程度のプログラム力とCSSの文法書等、資料があれば誰でも充分、マスターできる言語です。
もっとも、平易な言語ではあっても、いまやWEBページ制作には欠かせない機能的な言語となっています。是非、身につけてください。（とは、いっても、このアーカイブ記事で紹介するのはCSS全体の中のごくわずかな部分でしかありませんが...。）

【記述基本形】

上の記述例で、セレクタであるbodyの部分を、前回、説明したたくさんの「要素名」に置き換えることができます。例えば、p {background-color: #0000ff}と記述すれば、<p>タグのある部分の背景色をすべて、青色にすることができます。
「記述基本形」での記述のようにセレクタをbodyとすれば、そのページの背景色を設定することができます。（IDやクラスを使い、部分的な特例設定も可能です。これについては、稿をあらため説明します。）

※	これらの記述を、前3回で説明した、外部スタイルシートとして記述するか内部スタイルシートとして記述するかは記述者の自由です。また、上の記述例では説明を解り易くするために色分けしていますが、記述時に色分けをする必要はありません。

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

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

Posted by Yukio

記事 No.0000072　


2010年11月23日（火）

記述の基本2【CSS】

なお、プロパティとその値はセミコロン（;）で区切ることによって複数、記述することができます。次の例は背景色を青色にすると同時に行の高さを150%にします。（今回は記述法の説明ですので、記述内容の説明は割愛します。詳細は稿をあらためて説明します。）
　
　
【記述例】

　
上の記述は設定（スタイル）ごとに複数行に分けてもかまいません。
　

また、セレクタもコンマ（,）で区切ることにより複数の指定が可能で、例えば次のような記述が可能です。

　
上の記述では、要素<h1>、<h2>タグの色を#003366（この記述のセレクタの色）にします。
h1、h2については本年2月26日の記事で。（記事内では大文字の<H1>、<H2>で説明していますが、同じことです。）
　

　

※ 上の記述例では説明を解り易くするために色分けしていますが、記述時に色分けをする必要はありません。

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

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

Posted by Yukio

記事 No.0000073　


2010年11月26日（金）

ID【CSS】

前回の説明でp {background-color: #0000ff}という記述がありました。これは<p>タグが出現する部分の背景色をすべて青色にするというものです。
これはある状況ではとても便利ですが、逆に先の例文で青色にしたくない<p>タグの部分がある場合には邪魔になります。
このような場合には、ID、もしくはクラスというものによって、限定的な範囲に対してスタイルを適用させることが可能になります。
今回はIDで、「IDカード」などとよく使われるように、早くいえば個体識別のことです。
1つのIDは同じページ内に1つしか使用できず、#（ハッシュ）に続けて記述しておきます。

【ID定義記述例】

IDには任意の名前を付けることができますが次の決まりがあります。

使用できる文字は、半角英数字、ハイフン（ - ）、※アンダーバー（ _ ）。
先頭文字はアルファベットのみ。（先頭に数字や記号は不可）
大文字と小文字は別の文字とみなされる。

※	ID名にアンダーバー（ _ ）を含めると、ブラウザによってはIDが正しく認識されないことがあるようで、避けた方が無難です。

【IDの設定】

特定のタグにIDをプロパティとして加えれば、前述のID定義を適用させることができます。

各要素のタグ内にプロパティを加え、上の例のように、id="ID名"という形式で記述します。呼び出し側には#（ハッシュ）は記述しません。
例の記述により、この段落にのみID（example）で定義したスタイルが適用されます。（他の<p>タグには影響を及ぼしません。）

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

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

Posted by Yukio

記事 No.0000074　

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