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

突然ですが、コーディングをしている時に
「あれ?このCSSの単語かっこよくね?」
って思ったことはありませんか?
もちろん、あると思います!
そこで、今回は僕が思う「かっこいいCSSのプロパティ(CSS2.1版)」をランキング付けしてご紹介したいと思います。
- 1. 1位:vertical-align(ばーてぃかるあらいん)
- 2. 2位:text-justify(てきすと-じゃすてぃふぁい)
- 3. 3位:letter-spacing(れたーすぺーしんぐ)
- 4. 4位:word-break(わーどぶれいく)
- 5. 5位:visibility(びじぶりてぃ)
- 6. 6位:writing-mode(らいてぃんぐ-もーど)
- 7. 7位:text-shadow(てきすとしゃどう)
- 8. 8位:overflow(おーばーふろー)
- 9. 9位:z-index(ぜっと-いんでっくす)
- 10. 同列10位:background-position-x(ばっくぐらうんど-ぽじしょん-えっくす)
- 11. 同列10位:background-position-y(ばっくぐらうんど-ぽじしょん-わい)
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版でお届けします!
-
前の記事
シノアリスで魔晶石2000個もらえるRT&カムバックキャンペーン開催! 2017.09.06
-
次の記事
あなたのドン勝をサポートする「PUBG Spotter MAP」を使って快適なPUBGライフを! 2017.09.09