俺的かっこいいCSSプロパティランキング!(CSS2.1版)

俺的かっこいいCSSプロパティランキング!(CSS2.1版)

突然ですが、コーディングをしている時に
「あれ?このCSSの単語かっこよくね?」
って思ったことはありませんか?

もちろん、あると思います!

そこで、今回は僕が思う「かっこいいCSSのプロパティ(CSS2.1版)」をランキング付けしてご紹介したいと思います。

1位:vertical-align(ばーてぃかるあらいん)

プロパティ 読み方 効果
vertical-align ばーてぃかるあらいん 縦方向の揃え位置を指定する

堂々の1位です。
これしかありえません!
もう本当、思わず必殺技みたいに叫びたくなりますよね。
「くらえ!バーティカルアライン!」って

2位:text-justify(てきすと-じゃすてぃふぁい)

プロパティ 読み方 効果
text-justify てきすと-じゃすてぃふぁい 均等割付の形式を指定する(IEの独自採用)

ジャスティファイです。(ジャスタウェイ?
その部分がとってもクール。
英語表記も読んだ時もどっちもかっこいい!

3位:letter-spacing(れたーすぺーしんぐ)

プロパティ 読み方 効果
letter-spacing れたーすぺーしんぐ 文字の間隔を指定する

レターからのスペーシングの流れがオサレ。
画像制作の時にも思わず使いたくなりますね。
「文字間の調整して」を「letter spacing…調整してくれない?」みたいな。

4位:word-break(わーどぶれいく)

プロパティ 読み方 効果
word-break わーどぶれいく 文の改行の仕方について指定する(IEの独自採用)

ワードをブレイクしちゃう。
ブレイクは問答無用でかっこいいからずるい!
食べ物で言うとカレーみたいな奴。

5位:visibility(びじぶりてぃ)

プロパティ 読み方 効果
visibility びじぶりてぃ ボックスの表示・非表示を指定する

「i」の読みが4連続で続く綺麗さ。
最後が「ty」で終わるまとまりの良さ。
文句なしの5位ランクインです。

6位:writing-mode(らいてぃんぐ-もーど)

プロパティ 読み方 効果
writing-mode らいてぃんぐ-もーど 文字表記の方向(縦横)を指定する(IEの独自仕様)

モードちゃんがとてもいいアクセント!
東京モード学園とかもモードなくしたら「東京学園」だし
一気におしゃれじゃなくなっちゃうよね?

7位:text-shadow(てきすとしゃどう)

プロパティ 読み方 効果
text-shadow てきすとしゃどう テキストに影をつける

シャドウがポイントですね。
シャドウは問答無用でかっこいいからずるい!
調味料で言うと醤油みたいな奴。

8位:overflow(おーばーふろー)

プロパティ 読み方 効果
overflow おーばーふろー はみ出た内容の表示方法を指定する

overとflow、どっちの単語もかっこいい欲張りな奴。

9位:z-index(ぜっと-いんでっくす)

プロパティ 読み方 効果
z-index ぜっと-いんでっくす 重なりの順序を指定する

こいつだけ異色な雰囲気を醸し出している色物ワード。
「z」が頭についている部分がクール。

同列10位:background-position-x(ばっくぐらうんど-ぽじしょん-えっくす)

プロパティ 読み方 効果
background-position-x ばっくぐらうんど-ぽじしょん-えっくす 背景画像の横位置を指定する(IEの独自仕様)

同列10位:background-position-y(ばっくぐらうんど-ぽじしょん-わい)

プロパティ 読み方 効果
background-position-y ばっくぐらうんど-ぽじしょん-えっくす 背景画像の縦位置を指定する(IEの独自仕様)

最後は同列10位のバックグラウンドポジションエックスとワイさんです。
語呂、テンポの良さ、バック「グラウンド」部分のかっこよさが決めてでした。

番外編:line-height(らいん-はいと)

プロパティ 読み方 効果
line-height らいん-はいと 行の高さを指定する

ラインハルトらいんはいと…はいと…ハルト…ラインハルト?

感想

IEの独自仕様のCSSプロパティが結構多くなってびっくり!
あとはテキスト系がかっこいいのが多い印象。
次回はCSS3版でお届けします!