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

記事一覧

・	文字の表現4【CSS】【2011.04.01】
・	文字の表現5【CSS】【2011.04.08】
・	文字の表現6【CSS】【2011.04.16】
・	文字の表現7【CSS】【2011.04.26】

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

2011年4月


					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*

・ 2011.04.01 (金)
	Personalクラス 19:30-21:30 　於:生涯学習センター　　　　第一研修室
・2011.04.08（金）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室
・2011.04.16（土）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室
・2011.04.26（火）
	Personalクラス 19:30-21:30 　　於:生涯学習センター　　　　第一研修室

Recommendation（Links）

【うつろな愛（You're so vain）】

カーリー・サイモンさんのヒット曲。
私が自身で気に入り初めて買った洋楽曲。当時、中学生。
もちろん、それ以前も兄姉の影響でThe BEATLESをはじめとして多くの洋楽アーティストの曲は聴いていたが、自身で気に入り、自身の意志で買ったのはこれが最初。（洋楽のサントラ盤や邦楽はそれ以前にも自身で買っていたが...。）
当時、周りはフォークソングブームで、ギターを始めるなど、私もそこそこ影響を受けてはいたが、なにか物足りず、途中から洋楽ばかりを聴くようになっていた。以降、記憶ではユーミンさんの登場まで邦楽はあまり聴いていなかったように思う。
ところで、この曲には後に彼女のご主人となるジェームス・テーラーさんやローリングストーンズのミックジャガーさんがバックボーカルとして参加している。
　
今月よりしばらく洋楽を紹介していくつもりである。
(Yukio)

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

2011年4月1日（金）

文字の表現4【CSS】

今回は「線付き文字」を取り上げます。
種類としては「下線」、「上線」、「取り消し線」などがあります。」
記述例は次のとおりです。（例は「取り消し線」です。）

p.torikeshi {
　
text-decoration: line-through;
　
}

p.の次のtorikeshiは予約語ではなく、クラスとしての任意の語です。
この記述でpタグ内のさらにtorikeshiクラスのもののみ取り消し線が引かれます。
なお、text-decoration: の値には次のようなものがあります。
　

line-through	テキストに取り消し線を引く
underline	テキストに下線を引く
overline	テキストに上線を引く
none	装飾なし（初期値）

line-throughやoverlineはHTMLでは表現できませんが、underlineは可能です。
ちなみにHTMLでの「下線の引き方」の記述は

アンダーラインが引かれます

と記述することで行います。

【line-throughの出力例】

line-through

【underlineの出力例】

underline

【overlineの出力例】

overline

※上の出力例は実際には上のクラスを用いた記述例での出力ではありません。

なお、特殊な使いかたとして、アンカータグ<a>においてtext-decoration: none;を使うと下線のないリンクを作ることができます。（それがwebページにおけるインターフェイスとしていいかどうかは別の話ですが...。）
　
a.noline { text-decoration: none; }

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

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

Posted by Yukio

記事 No.0000090　


2011年4月8日（金）

文字の表現5【CSS】

今回は「行の高さ」です。
行の高さとは文字の大きさではなく、文字の置かれる行、すなわち空間の高さですから、この設定によって行間隔に影響がでてきます。
例えば
　
p {
　
line-height: l20%;
　
}

と記述すれば、通常の行間隔と比べて20%増しで行間隔を空けることができます。
なお、この記述では%で指定していますが、本年3月22日の記事で紹介しているような単位でも指定できます。
上のような指定にするとすべての段落でこの記述が適用されます。もし、特定の段落でだけこの行間隔を適用したいときには、クラスやタグなどを使って記述してください。

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

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

Posted by Yukio

記事 No.0000091　


2011年4月16日（土）

文字の表現6【CSS】

今回は「文字の間隔」です。
文字の間隔は行の高さと同時に指定すべき内容ですので前回の記事とあわせてよく覚えておいてください。
なお、これらの指定を変えるだけでも、結構、ページの印象は変わります。
　
例では前回同様120%を用いています。
　
p {
　
letter-spacing: 120%;
　
}

と記述すれば、通常の文字間隔と比べて20%増しで文字間隔を空けることができます。
なお、この記述では%で指定していますが、本年3月22日の記事で紹介しているような単位でも指定できます。
上のような指定にするとすべての段落でこの記述が適用されます。もし、特定の段落でだけこの文字間隔を適用したいときには、クラスやタグなどを使って記述してください。

※	私の場合、WEBシステムを重視するあまり、ページデザインはなおざりになりがちで、CSSは必要に応じてでないと使用しません。それは決していい事ではないので、何度も申しあげているように、このサイトや私の作り方を真似することのないようにしてください。手本にするなら大手サイトなどのように結構、丁寧にページを作っているものを参考にしてください。

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

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

Posted by Yukio

記事 No.0000092　


2011年4月26日（火）

文字の表現7【CSS】

今回は「上付き文字と下付き文字」です。一般的にいう「ルビ」とは厳密にいうと少し違いますが、使い方によっては、ルビと同じように使えます。（ふりがなとして使う場合、レイアウトを工夫する必要がありますが...。）
今回、例として使うのは「200㎥」を記述するときの「3」のように部分的に文字を小さくするものを取り上げます。
下付き文字の場合、文字のポイント数を部分的に落とすことで表現できるので省略します。
　
span.uetsuki {
　
vertical-align: super;
　
}

この記述では、spanタグの中でもuetsukiクラスに指定されたものに対してだけ上付き文字として表現されます。

【呼び出し側の記述】
　
200m3

200mはそのまま標準の文字ポイントで表記し、3の部分のみ上付き文字としています。
下付き文字にしたい場合は、上の記述の「super」の部分を「sub」にかえます。

　
【表示例】
　
200cm3

【定義部】

span.uetsuki {
vertical-align: super;
}

【呼び出し側】
　
200cm3
　

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

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

Posted by Yukio

記事 No.0000093　

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