FFJBLOGGER

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


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

昨日ブログに書きましたたまちゃんがスパモニから卒業しました。


最後にはやり鳥越さんがいきなりの登場でしたね！

これは想定の範囲内(古っ) でしたけどね・・・


みなさんも涙涙でたまちゃんを見送っていました！


あれだけ、皆に慕われていたんだと思うと、自分の見る目に狂いはない！？と


へんな自信をもってしまいました。。。  

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



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

毎日出社前に見ているスーパーモーニングで東京土産なる物をやっていた。


その中でも一番笑えたのが 『都庁限定販売、東京の水』です。


いくら水が売り物として認知されてたからといってこんな物を販売するなんて・・・・

売り文句がこちら

『東京の水道水『東京水』です。高度な浄水処理を施し、なおかつ水質基準を高レベルでクリアした東京の水をお土産にいかがですか。』


いやはや、都庁さんも色々考えているんですね・・・・


それよりも、明日で たまちゃん がスパモニを卒業となってしまうみたいです・・・・


何よりもこれが一番辛い！！


鳥越俊太郎さんは月・火・水のみの出演ですので、4月からの週末の朝が・・・・


仕方がないですね。


たまちゃんがんばれ～  

世界の車窓ってわけではないですが、先日出張中に、窓から見えた富士山があまりにもきれいでしたので、写メしてしまいました。

新幹線の中で写メすると、以外にそのシャッター音の大きさに自分でビックリしてしまいました。

なんとなくおのぼりさんの気分になり恥ずかしかったのですが、その後回りでカシャカシャという音が聞こえてくるので、見回してみると、他の人まで写メしてたんですよ！！

みんな、本当は写真取りたかったんじゃない！！

本当にきれいな富士山でした！！  

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


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


.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 の指定を変更する事で文字の色を変更する事が可能です。


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


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

高校時代の友人が結婚することになりました！！

昨日は、招待状を受け取り、そのまま外食→酒屋の流れで楽しんできました。

これで高校時代の主となる友人で、未婚は２名となりました。

残りの2名は、今年中には無理かな・・・

今年の年始に学生時代のメンバーで集まらなかったので、今回の2次会でミニ同窓会みたいな感じになるんだろうな~

そういえば受付を依頼されたので、お洒落しないといけないな・・・

昔はお洒落だって言われたのに、今の格好はシャレでもお洒落って言えないって言われてるからな。

5月中旬までに何とかしないと！！！！  

本日は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に貴方の好きな画像が表示する事が可能です。


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


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


それでは次回まで・・・  

FFJBLOGを始めて3日が立ちました、一応4日目の書き込みをしたので、三日坊主にはならなくてすみましたｗｗ

ランキングも現時点では10位以内と好位置をキープ中！！

まだまだ、内容がないよう・・・ではなくて内容が少ないのであまり見られる機会も少ないのかも・・・

記事さえ書けば、現時点ではランキングがあがるような気配・・・

さてどこまでいけるのか頑張ってみましょう！

目指せNO1！！  

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

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

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

＜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 ( 文字装飾ナシ )

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



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


本日はここまで・・・  

FFJBLOGERとなって第一回目の投稿です。

これから何を書いていこうか迷ってしまいますが、何でもいいから書いてみようと思います。

三日坊主にならないように・・・