FFJBLOGGER

本日はコメントについて解説を致します。

本日も同様にこのサイトのスタイルシートでコメントが入っている部分を一部抜き出してみました。


/*simple_red 100%
back_obj :#D30900;画像と同じ色
line :#8C0000;テーブルデコレーション色
back_bg :#F0E6E6;bodyバック色
link_txt :#BB0000;フォント色
url :/_img/simple_red/head.gif;画像
*/


/*　～　*/
スタイルシートでのコメントは上記にあるように/*と*/で囲みます。


この間に記載された文字は、ページ上での適用外となるので、覚書等を書いておくと

その部分で何をしているのかが分かりやすいので、適宜記載をすることをお勧めします。


以前に使用したブログタイトル部分にコメントを加えるとすると下記の様になります。


/* ブログタイトルでの文字指定内容 */
.blogtitle{
font-size :30px;
font-weight :bold;
padding :20px 0px 0px 10px;
text-align :left;
letter-spacing :2px;
}

こうすると次回に変更を行うときに、何処の場所を変更すればよいのか一目瞭然ですよね・・・


囲み忘れの無いように変更していった部分から随時コメントを記載してみましょう。


必要なければ、コメントを入れなければいいですけどね。。。  

スタイルシートを勉強する上で参考になる本を紹介します。


XHTML+CSSスタンダード・デザインガイド―XHTMLとデフォルトスタイルシートを基本にしたデザインコントロールの実践

エ・ビスコム・テック・ラボ (著)
単行本 (2005/03)
毎日コミュニケーションズ
おすすめ度：
  

スタイルシートを勉強する上で参考になる本を紹介します。


プロとして恥ずかしくないスタイルシートの大原則 プロとして恥ずかしくないスタイルシートの大原則
ムック (2006/01) MdN
おすすめ度：
  

スタイルシートを勉強する上で参考になる本を紹介します。


HTML&スタイルシート レイアウトブック
外間 かおり (著)
単行本 (2005/04)
ソーテック社
おすすめ度：
  

スタイルシートを勉強する上で参考になる本を順番に紹介します。


スタイルシート スタンダード・デザインガイド―SEO/ユーザビリティ/アクセシビリティを考慮した実践的HTML&CSSデザイン術
エ・ビスコム・テック・ラボ (著)
単行本(2004/06)
毎日コミュニケーションズ
おすすめ度：
  

本日より、スタイルシートを勉強する上で参考になる本を順番に紹介します。



HTMLとスタイルシートによる最新Webサイト作成術―ホームページでなにを伝える?どう作る?
単行本(2002/12)
エクスナレッジ
おすすめ度：
  

本日は本文が書かれている部分の指定について解説をいたします。


今回も同様に、今回の解説部分となるこのサイトのスタイルシートを一部抜き出してみました。


.main{
color :#000;
font-size :12px;
padding :15px 0px 15px 0px;
height:100%;
width:95%;
overflow:auto;
line-height:135%;
}


上記でブログの本文部分の指定をしています。

これは、管理画面内のデザインのトップページにてブログ本文が記載する部分に

＜div class="main" ＞

の指定がされr手いる状態となります。

color :#000; ⇒ 文字色 黒
(#000000 と同じ意味)

font-size :12px; ⇒ 文字の大きさ 12px

padding :15px 0px 15px 0px; ⇒ 上 15px 右 0px 下 15px 左 0px

height :100%; ⇒ 高さ 100%

width :95%; ⇒ 幅 95%

overflow :auto; ⇒ ブラウザ依存（一般的にはスクロール）

ここには他に下記の指定が可能です。
visible ：ボックスからあふれた場合には、あふれた状態で表示(デフォルト)
scroll ：入りきらない内容はスクロールバーが表示
hidden ：ボックスからあふれた場合には、あふれた部分は表示されません。

line-height :135%; ⇒ 文字の大きさに対して135%の高さを確保


今回は特別ページに変更をしていませんが、表示している本文の文字の色を変えたい場合には
color の指定を変更する事で文字の色を変更する事が可能です。


あんまり色を使いすぎてもみずらいページになってしまうので、程々にしておきましょうね！


やっぱり、取り敢えず実際に試してみるのが一番なので、色々変更してイメージをつかんでみてくださいね！  

本日はTOP右側に掲載している画像の掲載方法について解説をいたします。


今回も同様に、今回の解説部分となるこのサイトのスタイルシートを一部抜き出してみました。


#banner,#subbanner{
background :#D20900 url(/_img/simple_red/head.gif) left bottom;
padding :0px 10px 10px 10px; }


上記でタイトル部分の背景の指定をしています。


これを変更するとTOP右側に表示をさせている画像が表示できます。


まずはこちらの説明から。


background :#D20900 url(/_img/simple_red/head.gif) left bottom;

background ⇒ 背景のを指定しています。
#D20900 ⇒ 背景の色
url(/_img/simple_red/head.gif) ⇒ 背景に使用している画像の位置を指定しています。
(実は背景に画像が使用されているんですよ)
left bottom ⇒ 背景画像の位置の指定 (左の下)


padding :0px 10px 10px 10px ⇒こちらは前回説明いたしましたよね・・・


これを現在の内容に変更すると下記の状態となります。


#banner,#subbanner{
background :#D20900 url(../usr/mmf15/20060323.gif) right no-repeat;
padding :0px 10px 10px 10px; }


画像の位置については、管理画面から画像掲載すると

../usr/サブドメイン(XXX.ff-j.com のXXXの部分)/画像名称 となります。


自分のサブドメインはmmf15で、画像名称が20060323.gifという画像なので


url(../usr/mmf15/20060323.gif) となります。


画像の位置は解かりやすいように右側に表示をしていしていますので right (右) の指定をしています。


no-repeat としているのは、画像を繰り返し表示させない為です。


その他の画像表示方法としては下記の方法があります。

repeat 繰り返し（デフォルト）
repeat-x 横方向のみ繰り返し
repeat-y 縦方向のみ繰り返し
no-repeat 繰り返さない


これでFFJBLOGでTOPに貴方の好きな画像が表示する事が可能です。


今回もバックアップをしっかり取っておいてから取り敢えず何でもいいので一度画像を表示させてみましょう。


慣れるより慣れろ！ですからね～


それでは次回まで・・・  

本日はブログタイトルの指定について解説を致します。

昨日同様にこの際とのスタイルシートでブログタイトルに関係する
部分を一部抜き出してみました。

まず最初に、タイトルの部分のソースを確認すると

＜h1 class="blogtitle"＞FFJBLOGER＜/h1＞

このような感じでかかれています。


これに関係するスタイルシートで指定されている部分は下記の部分となります。

---------------------------------------------------
h1,h2,h3{
margin :0px;
padding :0px;
}
---------------------------------------------------
.blogtitle{
font-size :30px;
font-weight :bold;
padding :20px 0px 0px 10px;
text-align :left;
letter-spacing :2px;
}
---------------------------------------------------


■解説その１

h1,h2,h3{
margin :0px;
padding :0px;
}

まず最初に、h1,h2,h3ですが、重要な見出しに使用されるHTMLタグの一つです。

通常 h1～h6までを使用します。

この要素に対して、各ブラウザが初期値として文字サイズが設定されている場合がありますので、
ブラウザ毎での影響を防ぐ為に、0pxを指定しています。


■解説その２

.blogtitle{
font-size :30px;
font-weight :bold;
padding :20px 0px 0px 10px;
text-align :left;
letter-spacing :2px;
}

class="blogtitle" と指定されている場合に、この要素で囲まれている文字は指定された内容でブラウザ上で表示されます。

font-size :30px; ⇒ 文字のサイズ 30px
px ⇒ピクセル単位

font-weight :bold; ⇒ フォントの太さ bold (太字)
normal ･･･････標準(数値で400～500と同じ)
bold ･･･････太字(数値で600～700と同じ)
lighter･･･････現在の指定より一つ細いもの(数値で100～300と同じ)
bolder ･･･････現在の指定より一つ太いもの(数値で800～900と同じ)

padding :20px 0px 0px 10px; ⇒ [上=20px][右=0px][下=0px][左=10px]
で領域内の幅をもたせています。

1つ指定した場合： [上下左右]のパディングになります。
2つ指定した場合： [上下][左右]のパディングになります。
3つ指定した場合： [上][左右][下]のパディングになります。
4つ指定した場合： [上][右][下][左]のパディングになります。


text-align :left; ⇒ 左寄せ
行揃えの位置や、均等割付を指定する際に使用します
left ⇒ 左寄せ
right ⇒ 右寄せ
center ⇒ 中央揃え
justify ⇒ 均等割付

letter-spacing :2px; ⇒ 文字間隔が2px
文字の間隔を指定する際に使用します


う～ん・・・少しずつ書く予定ですが、説明を書いているといっぱい書かないと理解してもらえないかと思いこんな状態になってしまいます・・・


取り敢えず実際に試してみるのが一番なので、色々変更してイメージをつかんでみてくださいね！


その時には、必ず元の内容をバックアップしておく事！！


わけが分からなくなったらそのバックアップをそのまま使用すれば元に戻りますからね！！


それでは、また明日・・・・  

リンク部分（a 要素）の指定方法

このブログでは、リンク部分（a 要素）にスタイルシートで下記指定をしています。
その指定されている内容について簡単に説明をいたします。

a {color:#BB0000;text-decoration:underline;}
a:link {color:#BB0000;text-decoration:underline;}
a:visited {color:#BB0000;text-decoration:underline;}
a:active {color:#BB0000;text-decoration:none;}
a:hover {color:#BB0000;text-decoration:none;}


管理画面よりデザインを選択して「・オリジナルデザインの登録」をクリックすると「スタイルシート」の枠があります。こちらの中で記載されている内容を一部解説いたします。


リンクタグに関係する指定の内容


a {color:#BB0000;text-decoration:underline;}
a:link {color:#BB0000;text-decoration:underline;}


まだ訪れていないリンクを示す場合にa要素で{} で記載されている内容が指定されています。
color:#BB0000 ⇒ リンクの色は #BB0000 ( #B00 でもOK )
text-decoration:underline ⇒ 文字の装飾は underline ( 文字に下線を引く )
※ＲＧＢでの色指定をしています。



a:visited {color:#BB0000;text-decoration:underline;}


既に見たリンクを示す場合にa要素で{} で記載されている内容が指定されています。
color:#BB0000 ⇒ リンクの色は #BB0000 ( #B00 でもOK )
text-decoration:underline ⇒ 文字の装飾は underline ( 文字に下線を引く )

上記によりまだクリックていない場合と既にクリックした場合のリンクの色が変化していない状態となります。
ここを変更したいのであれば、a:visited のcolor:#BB0000を別の色に指定してください。



a:active {color:#BB0000;text-decoration:none;}


マウスでクリックしている場合にa要素で{} で記載されている内容が指定されています。
color:#BB0000 ⇒ リンクの色は #BB0000 ( #B00 でもOK )
text-decoration:none ⇒ 文字の装飾は none ( 文字装飾ナシ )

これにより、マウスでクリックした瞬間に下線のあった文字から下線がなくなります。



a:hover {color:#BB0000;text-decoration:none;}


マウスをリンクにあわせた場合にa要素で{} で記載されている内容が指定されています。
color:#BB0000 ⇒ リンクの色は #BB0000 ( #B00 でもOK )
text-decoration:none ⇒ 文字の装飾は none ( 文字装飾ナシ )

これにより、マウスをリンクにあわせた場合に下線のあった文字から下線がなくなります。



リンクに対しての各種の指定ができますので、訪問者に分かりやすいように文字色にてナビゲーションをしてあげる事でも見易いページ作りのテクニックの一つとなります。


本日はここまで・・・