スタイルシート http://xn--eckvbey1c0nme.biz/ スタイルシートについて書いていきます。seesaaやFC2のテンプレートで使えるように。 ja Copyright 2009 Thu, 12 Feb 2009 14:03:29 +0900 fontとtextに関するプロパティ
フォントに関するプロパティ
プロパティ名 説明
font フォント関連をまとめて指定。
font-size フォントのサイズを指定
font-weight フォントの太さを指定
font-style フォントのスタイルの指定。イタリック体と斜体を指定するときに使う。
font-family フォントの種類を指定。ゴシック体などのフォント名で指定します。
font-variant スモールキャピタルを指定。値をsmall-capsにすることでアルファベットの小文字の部分が「大文字」を縮小したようなテキストで表示されます。
テキストに関するプロパティ
プロパティ名 説明
text-align 水平方向の表示位置を指定。ブロックごとに指定する。
vertical-align 垂直方向の表示位置を指定。
line-height 行の高さを指定。
text-decoration 文字の装飾の指定。
text-indent ブロックレベルで1行目の字下げの幅を指定。
text-transform 大文字と小文字の変換の指定。全てを大文字・小文字にしたりアルファベットの頭文字だけを大文字にしたりする。
letter-spacing 文字と文字の間隔を指定。
word-spacing 単語と単語の間隔を指定。
white-space 改行・スペース・タブの空白部分の指定。入力どおりに空白を表示したり、スペースを連続で入力した場合は１つの半角にしたりする。改行は右端の折り返しをするかしないか。
]]> http://xn--eckvbey1c0nme.biz/2009/02/fonttext.html http://xn--eckvbey1c0nme.biz/2009/02/fonttext.html Thu, 12 Feb 2009 14:03:29 +0900 background-color;（背景色） seesaaのCSSより

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
text-align:center;
background-image:url(画像URL);
background-repeat:repeat-x;
background-color:#FFF;
このような記述があります。これがブログ全体の背景の設定になります。 壁紙を使用しなければ
background-image:url(画像URL);
background-repeat:repeat-x;
この部分を消して下にあるカラー指定のところ「＃FFF」って書いてあるところを変更します。 この数字はカラーコード（Color Tableと呼ぶこともある）と言ってRGBの16進数で色指定を行います。 英語表記で「red」や「black」など半角英数字で書いても指定できますが、このColorコードを使うのが一般的なのだと思います。 カラーコード表は検索すればたくさん出てくるので見やすいサイトを使ってください。 このコードは文字の色の変更などカラー指定する時に必ず必要ですから良く使うものは覚えておくと便利です。

black　#000000　黒 white　#ffffff　白 blue　 #0000ff 青 red　　#ff0000　赤

辞書登録しておくともっと便利です。 辞書登録についてはまた改めて書いておきます。

では、好きな色のコードに変更してプレビューしてみてください。 イメージ通りか確認できます。 いかがですか？背景の色が変わってよければ「更新」しておいてください。 テンプレートの変更したい部分を全て変更してから適用します。]]> http://xn--eckvbey1c0nme.biz/2009/01/backgroundcolor.html http://xn--eckvbey1c0nme.biz/2009/01/backgroundcolor.html Sun, 18 Jan 2009 15:12:11 +0900 seesaaのテンプレートから テンプレートはお好みで3カラムを選んでおきます。 まずはその元のテンプレートをバックアップしてください。 テンプレートをダウンロードしなおせば簡単に元に戻りますが、バックアップの癖はあるほうがいいと思います。 次に［デザイン一覧］から使用するテンプレート（適用済み）のスタイルシートを開きます。 変更するところは2箇所。 ┣ #content ┣ #links-left この2つの部分に「width:数字%;」が指定されています。 それを入れ替えてあげてください。 fontやmarginの指定はデフォルトのままで大丈夫です。 テンプレートによって数字の部分が「％」ではなく「px」になっているものもあると思いますが widthの数字部分だけを入れ替えてあげれば同じです。 つまり、通常の真ん中にある記事の部分の幅と左側のサイドバーの幅を入れ替えただけです。 あとはデザインの中の［コンテンツ］に入って左から『記事』『サイドバー1』『サイドバー2』になるように入れ替えてあげてください。 ［コンテンツ］のレイアウトの画面での幅は変わっていませんが設定を反映してブログを確認すると ちゃんと一番左から『記事』『サイドバー1』『サイドバー2』になっていると思います。
背景の画像によっては移動させると見づらくなる物もあるのでその場合は背景画像も変更したほうがいいと思います。
この変形タイプがいいのかはわかりませんが最近よく見かけるので なんとなく「いいなぁ?」と思っただけですが、試しにやってみてください。 左寄せがよければこれと反対になる部分を変更すればできるということです。 追記 「class」属性の指定も変更しておくといい。 その場合は、HTMLのほうの記述も変更する必要がある。]]> http://xn--eckvbey1c0nme.biz/2008/10/seesaa.html http://xn--eckvbey1c0nme.biz/2008/10/seesaa.html Tue, 21 Oct 2008 11:23:16 +0900 background-image:（背景画像） 俗に言う「壁紙」というものを用意します。

壁紙はフリー素材で探しても良いし、自分で作ることも出来ます。
サイズは画像や表示のさせ方でも違ってきますが、seesaaブログの『天使の卵(両サイドバー)』のスタイルシートで説明してみます。

ブログの背景を指定している部分は下記のようになっています



ブログの土台部分になるbodyの部分で背景を設定します。
httpから始まるURLを見てみると縦に細長い画像「2x1300」のサイズになっています。
これを横に繰り返して表示させる指定です。

repeat-x

横方向に並べて表示というものです。
他の表示の仕方は表にまとめてみました。

background-repeat

repeat-y　（縦方向に並べて表示）

repeat-x　（横方向に並べて表示）

no-repeat （1つだけ表示）

repeat 　（敷き詰めて表示）デフォルト




ちなみに、

background-image: none;

url( )のところに「none」といれれば画像無しの表示になります。


スタイルシートを見ているとbackground-image:url( )
こういう記述は他にもあります。それぞれ好きな画像に変更してみてください。
]]> http://xn--eckvbey1c0nme.biz/2008/10/post_4.html http://xn--eckvbey1c0nme.biz/2008/10/post_4.html Tue, 14 Oct 2008 12:53:15 +0900 スタイルシートと私
もちろんまだまだですが、覚えたことを書き留めて自分の復習と これからブログを始める人、そろそろスタイルシートをいじりたくなってきた人に ほんのちょっとでもお役に立てるように更新していきたいと思います。]]> http://xn--eckvbey1c0nme.biz/2008/05/post_9.html http://xn--eckvbey1c0nme.biz/2008/05/post_9.html Wed, 14 May 2008 14:40:21 +0900 リンク色の指定
htmlで指定する場合

毎回このように指定しなくてもcssで指定してあれば指定された場所のテキストの色はあらかじめ決めておいた色で表示されるのでｈｔｍｌもすっきりする上に、サイトのイメージを保つことが出来ます。


cssで指定する

上から
text a 　テキストの色
text a:link　まだ表示されていないページ
text a:visited　すでに表示されたページ
text a:active　現在表示中のページ
text a:hover　マウスがリンク文字上に乗った時の色

と、擬似プロパティの指定がしてあります。
色は数字または英語表記で指定します。
（擬似プロパティについては別記します。） ]]> http://xn--eckvbey1c0nme.biz/2008/04/post_8.html http://xn--eckvbey1c0nme.biz/2008/04/post_8.html Mon, 28 Apr 2008 13:26:21 +0900 文字の大きさ（サイズ指定）

プロパティが「font-size 」になるのでこの部分で値を変える事によって
文字の大きさが変わります。
指定する値は１?７、または数値+単位の種類「%　px　pt　mm　cm　in　pc　em　ex　」
決められた単語で指定して行きます。


決められた単語と文字の大きさ

xx-small ・・・ font size="1"
x-small ･･･ font size="2"
small ･･･ font size="3"
medium ･･･ font size="4"
large ･･･ font size="5"
x-large ･･･ font size="6"
xx-large ･･･ font size="7"


まったく同じではないですが大体同じくらいの大きさになります。
スタイルシートで指定する場合、「font-size: 13px;」のように数値+単位のpxで
指定してあることが多いと思います。
通常の大きさは16px


文字の大きさの目安。

1 2 3 4 5 6 7

通常が4なので1?7の数字ではなく、-3?+3でも指定可能ですが
ややこしくなるのでどれで指定するか決めて指定の仕方は統一させてください。

スタイルシートで指定した部分をHTMLに記述することで反映されます。
HTMLを探してみると

つまりは無料ブログサービスなどでテンプレートを少し触ってイメージを変えるなら
スタイルシートで指定していくのでHTMLを触ることは少なくなります。]]> http://xn--eckvbey1c0nme.biz/2008/03/post_7.html http://xn--eckvbey1c0nme.biz/2008/03/post_7.html Tue, 11 Mar 2008 12:04:06 +0900 文字の種類 （フォントの種類） パソコンにそのフォントがインストールされていないと
反映されないからです。


フォントの種類は「ＭＳ ゴシック」「ＭＳ 明朝」など
はじめからインストールされているものが無難です。
「フォント（FONT）」で検索すればフリーのフォントを利用することができますが
先ほども書いたようにすべての方がそのフォントに対応しているとは限らないので
注意してください。

さて、その設定の仕方です。
スタイルシートを見てみると、

こんな記述を見つけられると思います。
プロパティは「font-family」の部分で値の部分で文字の種類を指定しています。
FC2のユーザーテンプレートの一部分ですがこの場合は6つのフォントを指定しています。

HG丸ｺﾞｼｯｸM-PRO
Verdana
ＭＳ Ｐゴシック
Arial Black
Impact
Osaka

複数指定しておくと、前のフォントが対応してない場合次のフォントが反映されます。
できるだけ自分のイメージで表示させたい場合はこのように複数指定しておけば安心ですね。
もちろん1つのフォントだけでもいいです。
フォント名の間に空白がある場合半角二重引用符（始）「"」で囲む必要があります。
複数指定する場合は半角カンマ「,」で区切る。

ゴシック系、明朝系、筆記系などと大まかに種類を指定することもできます。

serif ･･･ 明朝系
sans-serif ･･･ ゴシック系
cursive ･･･ 筆記体系
fantasy ･･･ 飾り文字系
monospace ･･･ 等幅系


BlogNameのほか、introduction などテキストのエリアごとに指定して行きます。 ]]> http://xn--eckvbey1c0nme.biz/2008/03/_.html http://xn--eckvbey1c0nme.biz/2008/03/_.html Tue, 11 Mar 2008 11:32:46 +0900 文字の設定をする どんな指定があるかというと
文字の種類 文字の大きさ 文字の色 文字を太字 文字を斜体
などそれぞれ個別に指定することができます。 もちろんまとめて指定しまえばその部分はほかと区別することもできます。
それぞれの指定の仕方を説明します。 ]]> http://xn--eckvbey1c0nme.biz/2008/03/post_5.html http://xn--eckvbey1c0nme.biz/2008/03/post_5.html Tue, 11 Mar 2008 11:25:08 +0900 サイト全体のカラー 自分の好きな色、見やすい色にすることが多いと思います。
でも、インターネット上で公開すると自分以外のいろいろな人の目に留まります。


サイト（webページ）は5つの要素があります。(重要）


要素

タグ
見出し ｈ１　ｈ２　ｈ３
文章 p
背景 body
リンク a
・未訪問　　　 a:link
・訪問済 a:visited
・マウスをあわせた時 a:hover
・クリックしている時 a:active
強調 string　em


これらを見やすくまた同じタグには同じカラーで統一しておくことが必要です。
ただ、リンクの部分だけは「・」で状態に合わせて指定できるので違うように見えることがあります。
これは、どこまでクリックしたか訪問者に分かりやすくするためです。
全部でなくても最低訪問済みと未訪問はカラーを分けておく方が見やすいと思います。


見慣れていると言うかほぼ常識的な感覚で言えば、
背景は白
文章などのテキストは黒
リンクは青

そんなイメージですがいろいろな色で試したい方は実際どんな風に見えるかチェックする必要があります。
そんなときに便利なサイト

Color Slider
使い方やカラーリングの重要性も書いてあるので参考にしてみてください。 ]]> http://xn--eckvbey1c0nme.biz/2008/01/post_6.html http://xn--eckvbey1c0nme.biz/2008/01/post_6.html Sat, 12 Jan 2008 16:09:13 +0900 セレクタの複数指定

cssの定義のセレクタはHTMLのタグを指定するものです。
セレクタを「，（カンマ）」で区切って記述すると複数のセレクタを一度に指定することも出来ます。



3つのセレクタに対して文字色を黒で指定しています。


セレクタにタグを指定するとそのタグ全てにスタイルを指定することになります。
全てではなく一つだけに指定したい場合などは「class」属性で指定します。


]]> http://xn--eckvbey1c0nme.biz/2008/01/post_1.html http://xn--eckvbey1c0nme.biz/2008/01/post_1.html Mon, 07 Jan 2008 15:59:21 +0900 HTMLとスタイルシート（基本） もっと細かく指定するためのものがスタイルシートと書きました。


たとえばHTMLで大きな文字で表題を表示したいと考えます。


タグを使って大きさとそのスタイルを指示します。
でもこれではどのくらいの大きさなのか？不明です。
フォントの大きさには「24ポイント」とか数字できちんと指示すれば誰から見てもその大きさで見てもらうことが出来ます。

そこでスタイルシートで指示を出しておきます。

すると、＜ｈ１＞と言うタグで表示される文字の大きさは24ポイントで表示されるようになります。

セレクタ　｛プロパティ ：値｝

これが基本になります。
＊セレクタについては別に書いておきます。

どのスタイルに対して何を（プロパティ）どれくらい（値）といった指定になります。


スタイルシートをHTMLの中に記述する方法は3つあります。
1　HTMLの＜head＞内に＜style＞を使って記述していく方法
2　CSSファイルを作ってリンクタグを使って指定する方法。
3　その2つを使って指定する方法。

１を使って指定していく場合のHTMLの書き方


＜！--　　--＞　この形はコメントで、styleタグに対応していないブラウザでstyleの定義が無視されても表示に影響が現れないようになります。]]> http://xn--eckvbey1c0nme.biz/2008/01/html.html http://xn--eckvbey1c0nme.biz/2008/01/html.html Mon, 07 Jan 2008 15:08:02 +0900 はじめの準備 fc2ブログで説明していきますが、大体どこのブログサービスでも基本は同じでできます。 いろいろ見比べてみるのも面白いと思いますよ。 では、まずスタイルシートを開いて見ます。 管理画面に入って左側にあるメニューを見てください。 環境設定の中に【テンプレートの設定】という項目があります。 テンプレートの管理画面が開きます。 現在使用中のテンプレートのHTMLとCSS（スタイルシート）の編集が出来るようになっています。 多分初めてCSS触る時は「失敗したらどうしよう？」と不安になると思います。 なので、はじめに【テンプレートの複製】をしておきます。 こうしておけば万が一失敗しても元に戻せます。 テンプレートの複製は、テンプレート名の横にある「複製｣とかかれたリンクで出来ます。 これは準備です。 共有テンプレートの中にはカスタマイズ不可のものもあるので確認してから始めてください。 新しいテンプレートに変えるのもここからです。 http://xn--eckvbey1c0nme.biz/2007/11/post_2.html http://xn--eckvbey1c0nme.biz/2007/11/post_2.html Fri, 16 Nov 2007 13:49:03 +0900 スタイルシートについて 一般的に「スタイルシート」と呼ばれていますが、 元は「CSS」Cascading style Sheet　の略です。 HTMLで作成したページにデザインを適用させるためのものです。 レイアウトを細かく指定できます。 もちろんHTMLでも細かく指定することが出来ますが、長いタグを使うことになります。 同じ指定をいくつも使う時にHTMLのみだと、毎回長い記述を入れていくのは面倒だし ちょっと変えただけでも全部を修正しなくてはなりません。 サイト全体のイメージを統一させるのにとても便利なものだと思います。 そのスタイルシートには3つの定義があります。 セレクタ　　プロパティ　　値 この3つを指定していきます。 【セ レ ク タ】　　スタイルを適用させる対象の要素を指定します。 　　　　　　　　　　例えば、タイトルやｈ1?6などです。 【プロパティ】　　スタイルの種類です。 　　　　　　　　　　例えば、カラーやフォントサイズなんかもそうですね。 【　　値　　 】　　プロパティで決められている数字や色を指定します。 　　　　　　　　　　例えば、red　カラーコードの数字もそうです。 http://xn--eckvbey1c0nme.biz/2007/09/post.html http://xn--eckvbey1c0nme.biz/2007/09/post.html Sun, 02 Sep 2007 20:05:11 +0900