ピンデザイナーのWebサイト構築技法

行間の設定(line-hightプロパティー)

テキストの行間を設定するには、line-hight
プロパティーを使用します。値には、%かptを指定しますが、行間にptを使用すると、ブラウザで文字サイズを変更した場合、テキストが重なってしまうことがあります。よって無難に%で指定しましょう。

みなさん昨日の夕飯覚えていますか？昨日の我が家はカキなべでした。最近の野菜の高騰の影響で入っている野菜の量がすくないです。

p{line-height:250%;}

ちなみに行間は150%位が読みやすいと一般的には言われています。目安の数字としておぼえておきましょう。

字間の調整(letter-spacingプロパティー)

テキストの字間を調整するのは、letter-spacingを指定します。値にはptを指定します。マイナス(-)を指定することも出来ます。（字間を詰めたい場合）

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。

p{letter-spacing:5px;}

行頭のインデントの調整(text-indentプロパティー)

テキストのインデントを調節するのは、text-indentを指定します。
全角スペースを挿入してしまいがちですが、本来は、text-indentプロパティーで指定するのが好ましいです。（W3C規定では、行頭の全角スペースは無視されるということです。）

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。このまま続くと…。

p{text-indent:25px;}

テキストの縦書き(writing-modeプロパティー)

テキストの縦書きを指定するのはwriting-modeプロパティーを使用します。値にはtb-rlを指定します。

最近の野菜の高騰の影響で鍋料理に入る野菜の量がすくないです。

p{writing-mode:tb-rl;"}

ただし注意しなければならないことは、IEの5.5以上でないと表示指定が無効となります。

⇒今日はお疲れだけどがんばりました。
サイトご覧になったらクリックをm(__)m

こんなサイトでよかったら相互リンクしませんか？

フォントの色(colorプロパティー)

フォントの色を指定するときにはcolorプロパティーを使用します。何故か？font-colorじゃないんです。時々間違えて「あれー」となりますので注意が必要です。

色の指定です！

p{color:#ff0000;}

カラーコード

black #000000	blue #0000ff	lime #00ff00
red #ff0000	aqua #00ffff	yellow #ffff00
white #ffffff	gray #808080	silver #c0c0c0

値には、カラーコード(#000000)または、カラーの名前(black)どちらでもいいです。

⇒さてこのサイトのＦＣ２ブログランキングは？
サイトご覧になったらクリックをm(__)m

フォントスタイル(font-styleプロパティー)

フォントのスタイルを指定するときには、font-styleプロパティーを使用します。
標準フォント：normal　イタリック体：italic　斜体：oblique
ただし、何も指定しなくても「normal」が適用されるので、斜体やイタリック体にしたいときだけ指定しましょう。

123ABCabcＡＢＣａｂｃあいう

p{font-style: italic;}

フォントの大きさ(font-sizeプロパティー)

フォントの大きさを指定するには、font-sizeプロパティーを使用します。値には、「%」（１００％を標準とする）と「px」です。まだまだ指定方法がありますがこの２つをまず覚えてください。

フォントサイズ24PXです。

p{font-size:24px;}

ここで読者の皆様…ブログでは…スタイルシートの変更でスタイルをいちいち定義しなければいけないのか？と疑問がわいているかもしれません。局部的にスタイルを適用させるには、こう書きます。

昨日の夕飯はなんでしたか？うちはカレーでしたよ〜

< p style="{font-size:13px;}">昨日の夕飯はなんでしたか？うちはカレーでしたよ〜</p>

⇒このサイトのＦＣ２ブログランキングは？
今日から長いお休みです。金にならん(T_T)

　

background-repeat:repeat-xのサンプル

background-repeat:repeat;を記述すると、（または、何も繰り返しを指定しないとrepeatとなる)横（Ｘ軸）方向と（Ｙ軸）方向に背景画像が繰り返され、ページの背景すべてに敷き詰められる。これをタイリングという。
サンプルはＸ軸方向に繰り返す場合の指定である。
ここをクリックすると別ウィンドウで表示します。
また表示された別ウインドウ上で、マウス「右クリック」⇒「ソースを表示」でＣＳＳをみることができるので参照のこと。
そうだ！忘れていました。背景画像はこれを使っています。

⇒このサイトのＦＣ２ブログランキングは？
為になったらクリックをm(__)m

(background-repeat,background-position,background-attachmentプロパティー)

背景画像の繰り返し

background-repeatプロパティー。

repeat	繰り返し
repeat-x	横方向繰り返し
repeat-y	縦方向繰り返し
no-repeat	１回だけ表示

背景画像の表示位置を指定

background-positionプロパティー。

縦方向の値	top center bottom
横方向の値	left center right

background-position:right bottom;

右下に配置

横方向の位置と縦方向の位置を各１つだけ配置する。ただし順番はどちらでもよい。もちろん、片方の指定だけも可。

背景画像の繰り返し

background-attachmentプロパティー。

scroll	スクロールにあわせて移動
fixed	スクロールにあわせないで固定

⇒このサイトのＦＣ２ブログランキングは？
応援ありがとうございますm(__)mおかげ様で…

背景色(background-colorプロパティー）

要素の背景色を指定するにはbackground-colorプロパティーを指定する。
値はカラーコード（#RGB値）やカラーの名前(red,white,blackなど)を指定する。
カラーコード、カラーの名前については、別サイトを検索して！。（笑）

body {background-color:#ffccff;}

body {background-color:#red;}

背景画像(background-imageプロパティー）

要素の背景画像を指定するにはbackground-imageプロパティーを指定する。
値はurl("パス（フォルダー名）/画像ファイル名")を指定する。
ここで気をつけて記述しなければいけないのは、値の書き方である。
urlを書き忘れることが多い。

body {background-image:url("images/back.gif");}

今日もがんばってる？
このサイトのＦＣ２ブログランキングは？
m(__)m

ＣＳＳの位置づけ

CSS(Cascading Style Sheet)カスケーディングスタイルシートは、ページの装飾をコントロールするものである。
ＨＴＭＬやスタイルシートの規定を作成しているＷ３Ｃによれば「ＨＴＭＬは、文書構造を示す言語であり、視覚系の項目とは切り離すべきだ」という考えを打ち出している。

定義方法

要素名{プロパティー値:値；}という形で指定する。

body{font-size 12pt;}

文書全体のフォントサイズを12ptとする。

最後に「；」をつけているが、本来なら、ひとつのプロパティー値の宣言のみでは必要がない。しかし、後から追加することがあるので、「癖」としてつけておいたほうが無難でしょう。

このサイトのＦＣ２ブログランキングは？m(__)m