Cinema Novo Blogger: 7月 2006

色指定はテキストならば[color :]、背景色ならば[background-color :]をそれぞれ指定する。指定できる値はRGB(Red,Green,Blue)を16進数で2桁ずつ指定する方法。[白 : #ffffff; / 黒 : #000000;] RGBの2桁が同じ値の場合、[白 : #fff; / 黒 : #000;] でも同じ。[白 : white; / 黒 : black;] と定められた16色の場合、そのキーワード指定も可能である。

配置

配置指定にはその枠組みを指定するもの(プロパティ)として枠組み線[border :]、枠組み線の外側[margin :]、枠組み線と内容の間の空き幅[padding :]で位置調整でき、個別に上[top]、下[bottom]、右[right]、左[left]を指定する事も可能。枠組み線[border :]では色[color]、太さ[width]、形式[style]も指定出来る。

枠組み線を赤い二重線で、太さは標準の文字サイズの半分
border :0.5em #ff0000 double;

枠組み線を赤い二重線で、太さは標準の文字サイズの半分で、枠組み線と内容の間の左の空き幅を10%確保。
border :0.5em #ff0000 double; padding-left :10%;

枠組み線を赤い二重線で、太さは標準の文字サイズの半分で、枠組み線の外側を10%確保。
border :0.5em #ff0000 double; margin-left :10%;

囲み(<div>)毎の配置ならば、手軽に使われるものとしては回り込み[float :]、その解除[clear :]で、回り込み指定の際はその幅[width :]を指定する。

左より40%幅で、回り込み
border :0.5em #ff0000 double; float :left; width :40%;

回り込み指定無し。

上の横線で左回り込み解除
clear :left;

もうひとつの配置指定としては相対位置、絶対位置指定[position :]があり、上[top]、下[bottom]、右[right]、左[left]、それぞれの位置を指定する。[position :]のプロパティは通常表示[static;]、通常表示の位置より相対位置で配置される[relative;]、通常表示以外の指定がされている配置から位置を決める[absolute;]とやや複雑なので、『そのまま使えるスタイルシートサンプル集』などの参考書で知識を身につけた方がよいでしょう。

フォント

テキストフォントのデザインはサイズ[font-size :]、太さ[font-weight :]、斜体[font-style :]が主だった物で、特定フォント名指定[font-family :]は汎用的な明朝系[serif;]、ゴシック[sans-serif;]、筆記体・草書体[cursive;]、装飾的フォント[fantasy;]、等幅[monospace;]などが無難ではあるけれども、使いすぎると文字化けの原因にもなりかねないので、こだわり過ぎない方がよいでしょう。

2006-07-06

タッチパッド付キーボード(Keyboard with touch pad)

今日、タッチパッド付キーボードの事を障害持った方達にお話ししました。

僕自身、利き手不自由で、マウス操作が駄目で、割高なノートを使っているのはお話済みだけど、デスクトップパソコンにしたら、まずはキーボードをタッチパッド付キーボードにしたいと思う。

指先でキーボードとカーソル操作できる感覚は捨てがたいし、ショートカットキーの活用などもあわせれば、操作時間に不便を感じない。

とはいえ、デスクトップパソコンに買い換える目途も立たず、未だプラトニックな状態なのだけけど。

USB接続タッチパッド付キーボード 1011PU

2006-07-04

マークアップ Markup

Category column

ブログのユニバーサル・デザインなどというのを教えたりしているのだけど、記事投稿でマークアップ言語を使え、ページ全体のソースもテンプレートである程度カスタマイズ出来るbloggerはどちらかというとお勧め。

授業の資料として、よく使われるマークアップ言語をここでもご紹介。

段落(<p>)

文書は段落より成り立つ。そのセンテンスの長さや要点と話法、それぞれ癖はあるだろうけど、段落分けの区切りがないと読みづらいし、判りづらい。

見出し(<h*>)

ある程度まとまった文書を眺めると見出し分けする事で判りやすくなる場合がある。がしかし、無理に見出し分けつけると混乱招く事もある。

文書をまとめる際に語る順番をポイント毎にまとめ、そのポイントのタイトルを付けてやる感覚が一番判りやすいも。

住所録など作る際に、どのように分類するか、親戚、知人、仕事上などで分け、更に地域別に整理するなど、自分の頭の整理を見出し分けを利用し、文書整理する感覚が一番ベストかと。

リスト(<ul>)

番号無しリスト(<ul>)と番号ありリスト(<ol>)があるけれども、リスト項目(<li>)で現す事でわかりやすさが増すのであれば、使うべきで、段落とリストをうまく使い分ける事が大切。

ただ、あまりに大きなリスト数の場合は小分けして見せるのも配慮のひとつだし、その場合、なんのリストなのか判るように見出しをつけてやると親切。

<h2>北海道</h2>
<ul>
<li>札幌市<li>
</ul>
<h2>東北</h2>
<ul>
<li>青森市<li>
<li>秋田市<li>
<li>岩手市<li>
<li>仙台市<li>
<li>山形市<li>
<li>福島市<li>
</ul>

囲み(<div>)

文書のまとまりの範囲を指定する際に使うもので、デザインがこの囲みをベースに行われると整理された文書情報を提供できる。

デザイン指定はスタイルシートを用いる場合、(<div id="main" class="top">)など、その位置のみのデザイン指定のid属性か、同ページで繰り返し使われるclass属性を使い分けるのがこつ。

リンク(<a>)

関連する情報を繋ぐリンクを張る場合、使う物で、上のマークアップの中でしか使えない

情報先へ飛ぶ場合は<a href="[飛び先アドレス]">リンク先</a>などと記述し、飛び先がページの中の場合は<a name="top" id="top">そして</a>などと記述する。

用語解説や補足、あるいは裏付け、関連項目などうまく使えば、活用度が増す。よく使われている「ここをクリック」などは飛び先の情報が不明確なので、使ってはいけないとされているし、同じ用語で、違う飛び先を指定するのは、利用者の混乱を招くともされている。

画像(<img>)

最も手軽に利用される画像のマークアップは<img src="画像のあるアドレス" alt="画像が表示されない時の代わりのテキスト" width="画像幅" height="画像高さ">で記述するのだけれど、画像の大きさは指定する事で読み込み遅い環境でもその大きさを確保する役目を果たすけれども、必ず記述というわけではない。

むしろ大切なのはalt属性で画像の代わりとなるテキストが必要ない時でもalt=""と記載する。代わりとなるテキストは画像イメージをそのままテキストにする必要はなく、むしろ文脈が通じるようにalt属性を使うのが大切。バナーなど画像イメージのみのリンクの場合はalt属性に必ずテキストを書かねばならない。

画像イメージを伝えたい場合はtitle属性を活用し、画像イメージの情報を付加する事も出来る。

<p>明日はです。<p>
<p>明日は<img src="http://www.phoenix-c.or.jp/~takayan/img/sun.gif"
 alt="晴れ" title="お日様" width="47" height="30" />です。<p>

テンプレートのカスタマイズはTemplate タグを参考にすると判りやすい。

登録: 投稿 (Atom)

Cinema Novo Blogger

リンク

2006-07-31

人として The Human Condition

2006-07-20

生きる権利(Living right)

2006-07-19

Public Domain Movie Torrents July

追加分

2006-07-11

CSSデザイン

色

配置

フォント

2006-07-06

タッチパッド付キーボード(Keyboard with touch pad)

2006-07-04

マークアップ Markup

段落(<p>)

見出し(<h*>)

リスト(<ul>)

囲み(<div>)

リンク(<a>)

画像(<img>)

ブログアーカイブ

Google

ショッピング

Friend

All Rights Reserved