FC2ブログ

Blog Designing

XHTMLやCSSを1から学ぶのめんどくさい。 ひとまず、理屈はいいから、すぐに使えるテクニックを知りたい。 そんな人たちと一緒に成長していきたい。 そんな感じのデザインを考えるブログです。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告

文字のサイズ変更

今回のテーマでできるようになること

文字のサイズを変えることができるようになります。
「理屈はいいから、ソースコードだけ教えろ!」って人はソースをコピーして使ってください。

完成例とソースコード

<span style="font-size:xx-large;">文字をものすごく大きく</span>
文字をものすごく大きく

<span style="font-size:x-large;">文字をけっこう大きく</span>
文字をけっこう大きく

<span style="font-size:large;">文字をちょっぴり大きく</span>
文字をちょっぴり大きく

<span style="font-size:small;">文字をちょっぴり小さく</span>
文字をちょっぴり小さく

<span style="font-size:x-small;">文字をけっこう小さく</span>
文字をけっこう小さく

<span style="font-size:xx-small;">文字をものすごく小さく</span>
文字をものすごく小さく

<span style="font-size:1.5em;">文字を通常の1.5倍のサイズに</span>
文字を通常の1.5倍のサイズに

<span style="font-size:2em;">文字を通常の2倍のサイズに</span>
文字を通常の2倍のサイズに

<span style="font-size:3em;">文字を通常の3倍のサイズに</span>
文字を通常の3倍のサイズに

<span style="font-size:8px;">文字を8ピクセルのサイズに</span>
文字を8ピクセルのサイズに

<span style="font-size:10px;">文字を10ピクセルのサイズに</span>
文字を10ピクセルのサイズに

<span style="font-size:15px;">文字を15ピクセルのサイズに</span>
文字を15ピクセルのサイズに

<span style="font-size:20px;">文字を20ピクセルのサイズに</span>
文字を20ピクセルのサイズに


[文字のサイズ変更]の続きを読む
スポンサーサイト
  1. 2006/12/01(金) 15:01:30|
  2. 未分類
  3. | トラックバック:0
  4. | コメント:1

記事が消された…

久しぶりにブログを確認したら、がんばって書いた記事が2,3個消されている・・・
しかも変更したはずのテンプレートも元に戻っている…

FC2のフォーラムを覗いてみたら、どうやら16日頃にFC2に障害が起きて、サーバーのデータをバックアップしていたものに差し替えたらしく・・・おかげで、その後書いた記事がパーになってしまったわけです。

軽く凹みました。
今まで書いた記事はアップロードするのと同時に、PCからは元原稿を削除していたので・・・
こんなことって・・・

もう一度同じ記事を書くことになりそうですが、気力が回復するまでは、もう何もできそうもありません。。

くっそー、FC2め・・・
  1. 2006/11/29(水) 00:34:17|
  2. 未分類
  3. | トラックバック:0
  4. | コメント:0

<font>タグは、使用しない!

前回、文字の色を変えるためにカラーコードを変更する方法を紹介しました。

色コードの仕組みに関しては、後半で解説するとして、前回チラッと書きました
<font color="#0000cc">のタグは問題アリと書きました。

なぜ、問題があるのか?

ひとことで言ってしまえば、<font~>というタグは、将来的に廃止になってしまうタグだからです。

「廃止」に関して説明をするためには、HTMLやCSSの歴史に触れる必要があるので、それは、今後の回で少しずつ話していくとして、それじゃあ、どうすればいいのか?に焦点をしぼりたいと思います。

そもそも<font~>というタグは、CSSではなくて、HTMLのタグです。

前々回、ブログのデータは、HTMLとCSSから出来ていて、HTMLは、通常のテキスト内に「見出し」や「段落」という意味づけを行って、Webページとして完成させるためのもので、CSSが、それに対して装飾を行うもの、と書きました。

ただ、今回の場合、やっていることは「文字に色をつける」という装飾であるにもかかわらず、HTMLでそれを行ってしまっていることになります。

ですので、ここは本来はCSSで行う必要があります。

CSSで行った方が、いろいろと便利な部分があります。
便利な部分に関しては、次回説明をします。


それでは、どうすればCSSで文字の色をつけられるか?

結果は以下のとおりです。

【変更前】
<font color="#0000cc">色を変える</font>

【表示結果】
色を変える


【変更後】
<span style="color:#0000cc;">色を変える</span>

【表示結果】
色を変える

<span~></span>自体は、HTMLのタグです。
範囲を示すタグで、「ここからここまで」という意味しかありません。

問題はstyle=という部分。
HTMLのタグにこれを追記すると、この後にCSSの設定を書くことができます。

今回のcolor:#0000ccの部分がCSSの設定です。

難しい文法はともかくとして、なんとなく「色は#0000ccだよ」と言っているのがわかるかと思います。


本当は、ブログの新規エントリーを記述する画面にあるボタンが使えるのであれば、それがベストなのですが、そのボタンが<font color~>を書き出してしまう場合は、使用をオススメできません。

面倒でも、<span style~>に書き直すことをオススメします。

FC2も2006年11月6日の時点では、<font color~>を書き出していますが、将来的に<span style~>を書き出すことを切に願います。

書くことで便利なことも発生します。
便利になる理由は、今後ぼちぼちと説明していきますね。

今日の後半は、昨日書ききれなかった、カラーコードの見方についてのお勉強です。
頭が痛くなりそうな人は読み飛ばしてください。 [<font>タグは、使用しない!]の続きを読む
  1. 2006/11/06(月) 17:40:46|
  2. XHTMLのテクニック
  3. | トラックバック:0
  4. | コメント:0

文字の色

今回のテーマでできるようになること

文字の色が自由につけられるようになります。

「理屈はいいから、ソースコードだけ教えろ!」って人はソースをコピーして使ってください。

完成例とソースコード
<span style="color:#ff0000;">文字の色を変える</span>
文字の色を変える

<span style="color:#990000;">文字の色を変える</span>
文字の色を変える

<span style="color:#660000;">文字の色を変える</span>
文字の色を変える

<span style="color:#330000;">文字の色を変える</span>
文字の色を変える

<span style="color:#00ff00;">文字の色を変える</span>
文字の色を変える

<span style="color:#009900;">文字の色を変える</span>
文字の色を変える

<span style="color:#006600;">文字の色を変える</span>
文字の色を変える

<span style="color:#003300;">文字の色を変える</span>
文字の色を変える

<span style="color:#0000ff;">文字の色を変える</span>
文字の色を変える

<span style="color:#000099;">文字の色を変える</span>
文字の色を変える

<span style="color:#000066;">文字の色を変える</span>
文字の色を変える

<span style="color:#000033;">文字の色を変える</span>
文字の色を変える

<span style="color:#ff6600;">文字の色を変える</span>
文字の色を変える

<span style="color:#ff6633;">文字の色を変える</span>
文字の色を変える

<span style="color:#ff33cc;">文字の色を変える</span>
文字の色を変える

<span style="color:#ff33ff;">文字の色を変える</span>
文字の色を変える

<span style="color:#993399;">文字の色を変える</span>
文字の色を変える

<span style="color:#9933cc;">文字の色を変える</span>
文字の色を変える



[文字の色]の続きを読む

テーマ:テンプレート - ジャンル:ブログ

  1. 2006/11/04(土) 17:59:27|
  2. CSSのテクニック
  3. | トラックバック:0
  4. | コメント:0

ブログのデザインってどういう仕組み?

さて、デザインがシンプルすぎるのもつまらないので、FC2ですでに用意されていた既存のテンプレートをチョイスして、設定してみました。

2006年11月2日現在のデザインは、以下の画像の状態です。
既存テンプレートを適用



ところで、多くのブログが、「テンプレート」と呼ばれる、ブログのレイアウトデザインを用意し、多くのブロガーの人たちは、その中から自分の好きなデザインをちょいとクリックするだけで、自分のブログのデザインをパッと変えることができますが、このブログのデザインの仕組みってどうなっていると思いますか?

今日は、ちょっと面倒なお勉強チックな内容になります。

よって、「そんなんじゃ、このサイトでうたっている『理屈はいいから、すぐに使えるテクニック』じゃないじゃんか!と思われる方もいるかもしれません。

ですので、「面倒な勉強はイヤ!」という人は、今日の内容は読み飛ばしてください。
「ちょっと興味あるかもー」という人は読んでみてくださいね。
[ブログのデザインってどういう仕組み?]の続きを読む

テーマ:ブログパーツ - ジャンル:ブログ

  1. 2006/11/02(木) 23:24:57|
  2. デザイン一般
  3. | トラックバック:0
  4. | コメント:0
次のページ

無料カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。