ホームページの色に関する基礎知識 2/2

December 23 [Mon], 2013, 17:28
相性のよい色の組み合わせを考える

配色は、ホームページのイメージを左右する大切な要素の一つです。
きれいな色遣いを心がけることはもちろんですが、文字が読みにくかったり、
長時間見ていると疲れてしまったりするような配色は避けることも重要です。
 一般に、同系色の組み合わせは落ち着いた印象、反対色の組み合わせは
いきいきした印象になるといわれています。
カラフルにしようとしても多くの色を使いすぎると、雑然とした印象になってしまうので
注意が必要です。
デザインに自信がない時は、1つのページで使う色を2〜3色程度に抑えるか、
同系色の濃淡+白や黒など無彩色をシュミレーションして、相性の良い
組み合わせを探せるツールもあるので、ぜひ参考にしてみましょう。

色覚に障害を持つ人への配慮

ホームページの配色を考える上で忘れてはいけないのが、色彩に障害を持つ人への配慮です。
人間の目は、色の認識する3種類の錐体細胞があり、それぞれがが赤、緑、青を認識しますが、
このうちどれかが掛けていることを色覚障害と呼んでいます。
色覚生涯を持つ人がホームページを見る場合、文字色と背景色のコントラストが低すぎると、
判読出来ない可能性があります。
これを防ぐには、色相や明度の差を一定以上にするといった配慮が必要です。
すべての人に情報をきちんと伝えるという観点から、こういった問題に対する
認識も大切にしたいものです。

ホームページの色に関する基礎知識 1/2

December 11 [Wed], 2013, 17:47
美しく見やすいホームページを作成するには、色の関する知識が必要です。
webセーフカラーなど、必ず知っておきたい色の基本について説明します。

その環境でも表示可能な「標準16色」

HTMLで色を指定する方法には、16進数で表すRBG値と、名前で色を示すカラーネームがあります。
 コンピュータでは、光の三原色であるRBG(赤、緑、青)の組み合わせによって色を表現します。
HTMLでは、4RBGの階調をそれぞれ256段階に分け、それを16進数で表した6桁の値に「#」を
つけて色を指定します。
例えば、黒の場合は、「#000000」、白の場合は、「#FFFFFF」となります。これを分かりやすく、
英語の色名で表したものがカラーネームで、「black」、白は「white」となります。なお、RGB値も
カラーコートも、大文字、小文字の区別はありません。
 
どんな環境でも同じように表示可能な色として、標準16色と呼ばれる色が定義されています。
 以下のチャートは、標準16色カラーネームとRGB値を示したものです。



216色の「Webセーフカラー」

Webセーフカラーは、RGBを8ビットで表現した256色のうち、WindowsとMacで共通でサポートされている
216色のことです。これらの色は、どのOSやブラウザでもほぼ同じように表示することが可能です。
ホームページで色を指定するときは、この216色の中から選択することを推奨されています。
 16進数では、WebセーフカラーはRGBが、00、33、66、99、CC、FFの6段階で表示されます。

別のページへのリンクを設定する 3/3

December 11 [Wed], 2013, 17:26


<html>
<head>
<title>件名を指定してメールを送信</title>
</head>
<body>
<p>メールのお問い合わせ<a
href="mailto:hanako@example.ne.jp?subjesct=ホームページに関するお問い合わせ">
こちら</a>からどうぞ。</p>
</body>
</html>

(★´・д・)ノ[][][][][][][][][][][][][]

「mailto:」で送信先のアドレスを指定

メールアドレスへのリンクも<a>タグを使って設定できます。
<a href="mailto:メールアドレス">~</a>を使用し、
その後ろに送信先のメールアドレスを入力します。
 リンクを張った部分をクリックすると、標準メールソフト起動して新規メールが作成され、
指定したメールアドレスが宛先として自動的に入力されます。

Pointメールリンクは迷惑メールに注意

ホームページを見た人から連絡をもらえるようにするには、自分のメールアドレスへのリンクを
入れておくと便利です。ただし、迷惑メールには注意が必要です。
インターネット上には、ホームページに記載されているメールアドレスを自動的に収集する
プログラムが存在し、そのアドレス宛に悪質なメールを送信する業者が後を絶ちません。
そのため、最近は、リンクを張らずに画像などでメールアドレスを表示する人が増えています。

別のページへのリンクを設定する 2/3

December 11 [Wed], 2013, 16:24


<html>
<head>
<title>リンク先を新しいページで開く</title>
</head>
<body>
<p><a href="http://www.shuwasystem.co.jp/" target="_
blank">
秀和システムのホームページ</a></p>
</body>
</html>

{´∀`}--{´∀`}--{´∀`}--{ ´∀`}--{´∀`}

リンク先を新しいページで開く

現在のページを開いたままリンク先のページを表示させたい場合は、
<a>タグんのtarget属性で指定すると、新しいウィンドウ(またはタブ)でリンク先の
ページを開きます。

Pointページ内の特定の位置へリンクを張る

アンカーを利用すると、ページ名の特定の位置をリンク先として指定することができます。
縦に長いページなどで、目的の場所を見つけづらい時などに便利です。
まず、<a>タグのname属性でアンカー名を指定します。リンク先として指定したい位置に
<a name="アンカー名">と記述しましょう。
同じページ内でアンカーの位置へリンクしたい場合は、リンク元のタグを<a href="アンカー名">~</a>
と記述します。アンカー名の前には必ず、「#」を付けます。
別のページからリンクする場合は、<ahref="URL#アンカー名">~</a>と記述します。
この時、「#」の後ろにスペースは不要です。

Point画像にリンクを設定する

画像には、テキストと同じように、別のページやファイルへのリンクを張ることができます。
その場合は、<img>タグの外側を<a href="リンク先のパス">~</a>で囲みます。
なお、リンクを設定した画像には、枠線が表示)されます。非表示したい場合は、
<img>タグのborder属性で「border="0"」と記述しておきましょう。

別のページへのリンクを設定する 1/3

November 18 [Mon], 2013, 15:48


<html>
<head>
<title>リンク先のページ</title>
<body>
<p><a href="http://www.shuwasystem.co.jp/">秀和システムのホームページ</a></p>
</body>
</html>

o(*′▽`)〇))"o(*′▽`)〇))"o(*′▽`)〇))"o(*′▽`)〇))"

<a>タグとhref属性でリンク先を指定

他のページへのリンクを張るには、<a>タグを使用し、href属性でリンク先の場所を指定します。
属性値の記述方法は、リンク先がどこのあるのかによって異なりますが、まず最も基本的な方法を
説明します。

<a href="リンク先のURL">~</a>

リンク先を「http://」で始まるURLで記述します。開始タグと終了タグの間には、
リンクを設定したいテキストを記述します。このテキストをクリックすると、
リンク先へ移動できるようになります。

相対パスと絶対パス

上記の例のように、別のサーバーにあるページにリンクを張る場合は、リンク先を「http://」で
始まるURLで指定する必要があります。このような指定方法を絶対パスと呼びます。
 一方、自分のサイト内のページへリンクを張る場合は、ディレクトリ(フォルダ)の構造に基づいた相対的な
位置関係でページ(ファイル)を指定することもできます。この指定方法を相対パスといいます。
 
●「diary2.html」への相対パス
disry2.html

●「olddiary1.html」への相対パス
olddiary/olddiary1.html

●「lidex.html」への相対パス
../index.html

●「album1.html」
../album/album1.html


「diary1.html」と同じディレクトリ内のファイルを指定する場合は、
「diary2.html」のようにファイル名だけを記述すればOKです。
また、下層のディレクトリにあるファイルは、先頭にディレクトリ名と「/」を
付けます。
「..」(ピリオド2個)は、「diary1.html」の場所から見た上層ディレクトリを示しています。
その下の「album」ディレクトリ内のファイルは、先頭に「../album」を付けます。
 この規則にしたがって、例えば、「index.html」にリンクを張る場合なら、以下のように記述します。

<a href="../index.html">~</a>

相対パスがよくわからないときは、絶対パスでURLを指定して問題ありません。
相対パスがよくわからないときは、絶対パスで指定する場合に比べて、表示速度が
やや遅くなることもありますが、あまり気にしなくてよいでしょう。



中学英語の全体像 NO.3

November 15 [Fri], 2013, 15:15
幹をつくるもう1つの大きな要素
:その話はいつのこと?[動詞の時制]


ここまでの内容を簡単にまとめると、
英文は「主語+動詞」が土台をつくり、
 そのあとに動詞とって「なくてはならない言葉」
続くことでした。

この幹「主語+動詞」+なくてはならない言葉」に、もう1つ加えなくてはならない
大事な要素があるんです。

それは何かいうと、動詞の「時制」です。
時制とは[その話がいつのことなのか?」を表すものです。

たとえば、「私は昔、アメリカに住んでいました。」というのと、
「私は今、アメリカに住んでいます。」とでは、伝えたい内容が全く違ってきます。
 同じように「私は今、大学生です。」というのと、「私は来年から大学生です。」
というのもまた違う話です。

このように、伝えようとしている文が、今の話なのか、過去の話なのか、未来の話なのかをはっきりさせる、つまり動詞の「時制」がなんなのかをはっきりさせておく必要があるわけです。

主語+動詞+動詞になくてはならない言葉+動詞の時制

さあ、裸の幹にたくさんの花をつけよう

ここまでの英文の幹は、「主語(名詞)+動詞+動詞になくてはならない言葉)+[動詞の時制」だとお話ししました。

でもこれだけでは、あまりにさみしいですよね?このままだと

I know the news.    私はそのニュースを知っています。
I am a student.      私は学生です。
I waik             私は歩きます。


ろか、せいぜい時制を変えて、過去の話や未来の話にするくらいしか英語を使って文を作ることができません。
 これではあまりにシンプルで、「どんなニュースか?」「どんな学生か?」とか、もっと多くの情報を
相手に正確に伝えたいときに、どう言えばいいか困ってしまいます。ではどうするか?

「主語(名詞)+動詞+動詞になくてはならない言葉」+[動詞の時制」にたくさんの飾りをつけて、表現豊かにしてあげればいいのです。

英文の幹に、きれいなお花を咲かせてあげるイメージ(表現豊かというと聞こえはいいのですが、悪く言えば、英文が長くなり、複雑になるということです。

いずれにせよ、忘れてはいけないのが、
幹である「主語(名詞)+動詞+動詞になくてはならない言葉」+「動詞の時制」があってはじめて、「飾り」ちう花がつけられるということです。

飾りは飾り。この順番を間違えてはいけませんよ。

ページに画像を挿入する 3/3

November 14 [Thu], 2013, 18:13
画像の周囲に余白を設定する



<html>
<hesd>
<title>画像の周囲に余白を設定</title>
</head>
<body>
<p>
<img src="photo4.jpg" align="left"width="320"
height="240" hspace="20" vspace="10" alt="風景">
画像の余白は、ピクセル数で指定できます。
ここでは、左右の余白を20ピクセルに指定します。
<br clear="left">
上下の余白は10ピクセルに指定します。
</p>
</body>
</html>

(´・з・`)ノ-=≡☆-=≡☆-=≡☆-=≡☆-=≡☆

画像の周囲に余白を設定するには、hspace属性とvspace属性を使って記述します。

<img src="画像のファイルのパス" hspace="左右の余白" vspace="上下の余白">

余白のサイズは、ピクセル数で指定します。左右と上下のどちらかだけを指定することもできます。
ただし、左と右の余白、上と下の余白を別のサイズにすることはできません。

画像の周囲に枠線を設定する



<html>
<head>
<title>画像の枠線を表示</title>
</head>
<body>
<img src="photo5.jpg" width="320" height="240" border="8" alt=植物">
</body>
</html>

(*´ω`*)ノxxxxxxxxxxxxxxxxxxx

画像には、周囲の枠線(ボーダー)を付けることができます。
枠線はborder属性で以下のように記述できます。

<img src="画像のファイルパス" border="枠の太さ">

枠線の太さは、ピクセル数で指定できます。なお、HTMLでは、
上下左右の枠線の太さを個別に設定することはできません。
また、枠線の色も指定できません。


ページに画像を挿入する 2/3

November 14 [Thu], 2013, 17:56
画像にテキストを回り込ませる



<html>
<head>
<title>テキストの回り込み</title>
</head>
<body>
<p>
<img src="photo1.jpg" width="112" height"84" alt="花1">
特に指定しない場合、テキストはこのように画像の下端に合わせて配置されます。
</p>
<p>
<img src="photo2.jpg" align="left" width="112" height="84" alt="花2">
テキストを画像に回り込ませたい場合は、align属性を利用しましょう。
属性値をleftに設定して、画像を左に配置した場合、
このようにテキストが画像の右側に回り込んだ状態で表示されます。
<br>特に、画像の幅が小さい場合などは、この方が見栄えがよくなる場合が多いようです。
これによってテキストが読みやすくなる場合もあるでしょう。
</p>
<p>
<img src="photo3.jpg" align="right" width="112" height="84" alt="花3">
alight属性で属性値をrightに設定した場合、このように、テキストが画像の左側に回り込んだ状態
になります。
<br clear="right">回り込みを途中で解除したい場合は、brタグのclear属性を指定します。
</p>
</body>
</html>

▼・ェ・▼・ェ・▼・ェ・▼・ェ・▼・ェ・▼

標準では、画像と並べてテキストを入力すると、画面の下端に合わせてテキストが配置されます。
レイアウト上、これでは不都合な場合は、画像の左右にテキストを回り込ませることもできます。
その場合は<img>タグのalign属性を使って、以下のように記述します。

<img src="画像のファイルパス" aligh="left">
画像が左に配置され、右側にテキストが回り込みます。

<img src="画像のファイルパス" aligh="right">
画像が右に配置され、左側にテキストが回り込みます。

<br clear="left">
画像を左に配置したときの回り込みを解消します。

<br clear="all">
画像を左右どちらに配置した場合にも、画像の回り込みを解除できます。




中学英語の全体像 NO.2

November 13 [Wed], 2013, 18:28
RET'S TRY!

次の英文の動詞にとって、「なくてはならない言葉」はなんでしょう?
ちなみに1つだけ、そのままでも大丈夫な、孤独を好む動詞もいます。

⑴I know.   ⑵I am.   ⑶I waik.

●´I`●´I`●´I`●´I`●´I`●´I`●

答え

中学英語の全体像 NO.1

November 13 [Wed], 2013, 17:44
英文のルール

(名詞)+動詞

●主語とは、その文章の主人公。日本語でいうところの
「私は」「あなたが」の部分です。

●主語になれるのは名詞だけ!
っといいつつ「名詞」ってなに?

名詞とは、人や物を表す言葉のことです。(「名」前の「詞(ことば)と書いて「名詞」です。)

主な名詞

@物の名前 dog school pensil
A人の名前 Ken Kanako Tom
B地名    Jpan Korea London

動詞の例

walk run like

●動詞とは?

動詞は、主語の後ろにくっついて、英文の幹を作ります。
こちらも意味と役割を知っておきましょう。
 動詞はとは、人や物の「動き」や状態を表す言葉を指します。
繰り返しになりますが、ここまで説明した「主語(名詞)+動詞」の2つがあって
はじめて英語の文が成り立ちます。
 
●主語(名詞)+動詞」のあとは・・・。

動詞が自分の役割を果たすために、なくてはならない言葉(目的語か補語)が続きます。

「なくてはならない言葉」がちょっとわかりにくい?具体例を使って説明すると・・・。

例:「私は本をかいます。」 I boy books になります。
このbooksが「なくてはならない言葉」になります。

この「なくてはならない言葉」がなくなると、I boy 「私は買います。」となります。
・・・「いったい何を買うのだろう?」とツッコミみたくなります。

そこで動詞boyは、「何を」の部分を引っ張ってこよう。
boyの場合は「何を」の部分(=なくてはならない言葉)が加わることで
意味をもった文が出来上がるのです。

このように、動詞が自分の力を発揮するためには、
「なくてはならない言葉」が必要なのです。
そして、その言葉が何かはすべて動詞が決めるのです


ここまでをまとめると、英文の骨組みは、
「主語+動詞」+「なくてはならない言葉」となります。
P R
カテゴリアーカイブ
http://yaplog.jp/tomcat2/index1_0.rdf