Recent Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

vertical-alignで画像に並ぶ文字の縦位置を指定する

FC2ブログでは文字と絵文字の縦の位置が丁度いい感じになってくれます。
自然と文字と絵文字の縦位置が中央で揃うとでもいいましょうか。
自分で用意した小さな画像などを使うと気づくのですが、これ普通にしててもなりませんよ。

← FC2ブログの絵文字はこんな感じです。

← 普通だとこうなるはずなんですよ。

違いがわかりましたか?ズレてるでしょ?
普通は画像の横に文字を入力すると下の例のように画像の底に文字が並びます。
好みもありますがどちらかと言えば上の方がしっくりくると思います。

そこで今回はFC2ブログの絵文字がなぜちゃんと揃うのか説明します。
簡単な事なんですが、絵文字にはあらかじめ「emoji」というclassが設定されています。
そして、そのclassには「vertical-align:middle;」というスタイルが設定されています。

この「vertical-align:middle;」というのが答えです。
vertical-alignは、縦方向の表示位置を指定するプロパティです。
そして、middleという値は画像横の中央に文字列を表示するというものなんです。

ですから、簡単に文字と絵文字が揃うんです。
確認してみてください。
絵文字を使うと[emoji:v-16]というような変な文字が入力されます。
その状態で、一度記事を下書き保存してみましょう。
すると、

<img src="http://blog-imgs-1.fc2.com/image/v/16.gif"  class="emoji" style="border:none;" />

というhtmlタグに変わるのです。

よくタグを見てください。まず、URLはその絵文字のアドレスです。
その他に「class="emoji" style="border:none;"」が追加されているのがわかりますね。
(border:noneは枠線無しという意味です。)

「テンプレートの設定」からCSSファイルを見てみましょう。

.emoji{vertical-align:middle;}

このような記述がきっとあるはずです。(無いと絵文字がちゃんと並びません。)
FC2ブログのテンプレート作る時には必須かな!?

このようにして我々(FC2ブロガー)は、簡単に絵文字を使う事が出来るのでした。
まぁ、知ってても知らなくても普通に使う分には関係ありません。
CSSを弄った時には消さないようにしましょう。(絵文字使わなければ要らないけど・・・。)

「class="emoji"」の有効利用

せっかく元からCSSに設定してあるので、自分で用意した画像にも使ってみましょう。
どう使うかというと、任意のimgタグに「class="emoji"」を追加するだけです。

実は私も良く使ってます。
自分で用意した画像を文字の頭に付けて使う時なんかに重宝しますよ↓

vertical-alignサンプル

あまり大きな画像の時には逆に変な場合もあるので注意しながら使いましょう。

また、vertical-alignには他にも値がありますのでついでに軽く説明しておきます。
あまり使わないと思うけどね・・・。

vertical-alignの値

baseline
emoij.png ← baselineです。何も設定しない場合はこれになります。
top
emoij.png ←topです。
middle
emoij.png ← meddleです。
bottom
emoij.png ← bottomです。
数値(単位付き)
emoij.png ← 20pxを設定をしました。

基準はbaseline(底)です。
正の数だと画像が上へ、負の数だと画像が下へ移動します。
パーセント(%)
emoij.png ← 20%の設定をしました。

基準はbaseline(底)です。
行の高さを基に正の数なら上へ、負の数なら下へ移動します。

(text-top、text-bottom、super、subはなんじゃもんじゃで省略してます。)

わかりやすく大きめの画像を画像を用意しました。
まぁ、こんな感じです。
一見使い勝手が良さそうなプロパティですが、何にでも効くではないので注意しましょう!

尚、vertical-alignプロパティを適用できるのは、インライン要素とテーブルセルであり、ブロックレベル要素には適用できません。従って、 vertical-alignプロパティでボックス全体の縦方向の配置や、ブロックボックス内のテキストの縦方向の位置などを制御することはできません。

vertical-align-スタイルシートリファレンスより引用

<div>とか<p>などはブロックレベル要素です。
<span>や<img>はインライン要素になります。(だから絵文字で使えるのです。)
詳しく知りたい方はこちらのサイトがとてもわかりやすいですよ↓

The Web KANZAKI - ブロックレベル要素とインライン要素

詳しく知っちゃうとうちのブログが段落(<p>)使ってないのがバレちゃうけどね。シーッ! d( ゚ε゚;)
今度一気にマークアップ修正するかもー!(2009/4/14 修正完了!)

要するに何でもかんでも揃うと思ったら大間違いよって事ですので。
使える機会がありましたら、お試しください。

CSSファイルを簡単に軽くする方法

CSSファイルとは、カスケーティング・スタイルシートのファイルの事でWebサイトの見た目を設定するのに必要なファイルの事です。
CSSファイルは外部ファイル化してヘッダー部で読み込ませるのが普通です。
CSSファイルの容量はページ表示速度の大事なファクウターになるわけですから、出来るだけ軽いファイルの方が良いです。

というわけで、今回は簡単にCSSファイルを軽くする事が出来るWebサービスをご紹介します。

Clean CSS - A Resource for Web Designers - Optmize and Format your CSS

名前の通り、CSSファイルをClean(掃除)してくれるWebサービスです。
実際に私のブログで試したところ数キロバイトほど容量が軽くなりましたので、ページの表示速度に興味のある方はお試しください。
CSSファイルの容量が大きければ大きいほど効果があるんじゃないかな。

※Clean CSSを使う前に必ずCSSファイルのバックアップを取ってください。
CSSファイルの圧縮レベルによっては表示が変わってしまう場合があります。

Clean CSSでCSSファイルを軽くする方法

  1. まずは、Clean CSSに行ってみましょう!
  2. Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
  3. CSS-Code:」と書かれたテキストエリアにご自分のCSSファイルの内容をペーストします。
    または、
    CSSファイルのアドレスがわかっているならば、「CSS from URL:」という所にCSSのアドレスをペーストします。
  4. 最後に[Process CSS]をクリックします。
    以上で、CSSファイルの圧縮が完了します。

圧縮されたCSSは、下の「Input:~欄」に表示されていますので、コピーして使ってください。

Input : 最初のCSSファイルサイズ。
Output : 圧縮後のファイルサイズ。
Compression Ratio : 圧縮率です。

Messages」には、どのような事をしたのかがラインナンバーとともに表示されます。
見てみるとわかりますが、少しでも文字数などが少なくなるようなCSSの書き方に替えているだけです。

例としては、

font-weight(文字の太さ) : normal  ⇒ 400

これは標準の太さを意味します。(数値400とnormalが同じ意味です)

font-weight(文字の太さ) : bold  ⇒ 700

これは、一般的な太字の太さです。(boldと700が同じ意味です。)

marginなどの場合もいくつか書き方があるので最適化されます。

margin(マージン) : 1em 1em  ⇒ 1em

マージンに2つ数字を書くと最初が上下、次が左右になります。ですので、どちらも同じ数値ならば1つにまとめられますね。まぁ最初からそう書くのが普通かもしれませんが、うっかりミスもあるもんです。

paddingなんかも同様です。
複数の数値をまとめる際は出来るだけ少なくなるように記述されます。

padding(パッディング) : 2px 10px 10px 10px  ⇒ 2px 10px 10px

4つ指定した場合は上、右、下、左となります。(左右の数値が同じところに注目)
3つの場合は、上、左右、下となるので、左右の数値をまとめて書けます。

colorの場合も省略が可能な場合があります。

color(文字色) : #ffffff  ⇒ #fff

どちらも文字色に白を指定しています。
同じ数字(a~f含む)が6つ並んだ時は、3つに省略できます。

margin-top(マージン上) : 0px ⇒ 0

CSSファイル内では、0pxを単なる0と書けます。
htmlタグにstyleで指定する場合は、pxなどの単位を付けなければいけません。

とこんな感じの事をClean CSSは一瞬でやってくれるようです。
でも、圧縮されたCSSファイルはちゃんとチェックしてから適用しましょうね。
font-family(文字の種類)に日本語で指定している時は文字化けするかもしれませんので、後で修正してください。
(メイリオ ⇒ ????、MS Pゴシック ⇒ ??? ?Х????a*?など)

私のCSSファイルで試したところ、オプションを弄らない状態で、

14.6KB ⇒ 9.98KB

まで、圧縮する事が出来ました。
最初から大した容量ではなかったのですが、コメントが消えたのが大きく影響しているのだとお思います。

/* 全体的な設定
------------------------------------------------------------ */

ってな感じでカスタマイズしやすいようにたくさんコメント書いてありますので・・・。
ちなみにコメントを残した場合だと11.8KBでした。

さて、どうやってコメントを残したのでしょう?
実はClean CSSのオプションを弄ると簡単にコメントを残したり出来ます。

続きを読む?»