【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

10Nov2011

マイナーなCSSプロパティをリストにしてみました

今日は仕事がお休みだったので、大好きな本屋で情報収集(ブラブラ)していました。
仕事柄やはり気になるPC書籍コーナーで普段は触らないCSSのリファレンスを手にとって見てみると、今まで一度も使ったことのないプロパティがいくつかある事に気づきます^^;

そんなに多くないCSSプロパティ。一度も使ったことがないのはイカン!という事で、自分の勉強もかねて「これはマイナー・・・」と思うプロパティをリストにしてみました。今後も使うかはわからないけど、お勉強お勉強。。。 笑

みなさんは全部使ったことがありますか?

font-variant:フォントをスモールキャップにする

一度も使ったことがないプロパティです。英語圏の住人なら使っていたかも。

<ul>
<li style="font-variant:normal;">マイナーなCSS。 ty's empty f'log</li>
<li style="font-variant:small-caps;">マイナーなCSS。 ty's empty f'log</li>
</ul>
  • マイナーなCSS。 ty’s empty f’log
  • マイナーなCSS。 ty’s empty f’log

アルファベットの小文字を、大文字を小さくしたもので表示できます。

text-indent:一行目のインデント幅を指定する

このプロパティを使い-9999pxなどと指定をすれば、表示されるべき文字を画面外に飛ばしてしまう事ができます。
背景画像を使ったボタンリストを作る際に使われる手法ですが、本来の目的とは違いますよね・・

本来の目的である、一行目のインデント幅をデザイン目的で調節しようとしたことは・・・・ありません。
文字のデザインを凝ろうとしたら、全部画像にしちゃいますし^^;

<ul>
<li>使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。</li>
<li style="text-indent:20px;">使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。</li>
<li style="text-indent:-30px;">使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。</li>
<li style="text-indent:70%;">使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。</li>
<li style="text-indent:-9999px;">使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。</li>
</ul>
  • 使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。
  • 使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。
  • 使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。
  • 使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。
  • 使わない理由:テキストレイアウトをこだわりたい場合は全部を画像にしちゃいます。

マイナスの値も指定できます。%指定をする場合は、自身が含まれるブロック要素の幅が基準になります。

text-transform:テキストの大文字表示・小文字表示を指定する

これ。。。必要な場面が思い浮かびません。。。

<ul>
<li style="text-transform:none;">What is THIS PROPERTY used for ??   初期値</li>
<li style="text-transform:capitalize;">What is THIS PROPERTY used for ??   頭文字を大文字</li>
<li style="text-transform:lowercase;">What is THIS PROPERTY used for ??   すべて小文字</li>
<li style="text-transform:uppercase;">What is THIS PROPERTY used for ??   すべて大文字</li>
</ul>
  • What is THIS PROPERTY used for ??   初期値
  • What is THIS PROPERTY used for ??   頭文字を大文字
  • What is THIS PROPERTY used for ??   すべて小文字
  • What is THIS PROPERTY used for ??   すべて大文字

white-space:ソース中のスペース・タブ・改行の表示の仕方を指定する

初期値以外では自動改行されないため、ボックスをはみ出してしまいます 笑
やはり使い所が・・・

例では理解を助けるためにli要素に背景色をつけて幅を小さくしています。

<ul>
<li style="white-space:none;" class="csmncr">
ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
初期値は、連続する    半角スペース    タブ    改行    を
1つの 半角スペース として表示します。</li>
<li style="white-space:nowrap;" class="csmncr">
ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
初期値は、連続する    半角スペース    タブ    改行    を
1つの 半角スペース として表示します。</li>
<li style="white-space:pre;" class="csmncr">
ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
初期値は、連続する    半角スペース    タブ    改行    を
1つの 半角スペース として表示します。</li>
</ul>
    初期値

  • ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
    初期値は、連続する 半角スペース タブ 改行 を
    1つの 半角スペース として表示します。
  • 自動改行はされない

  • ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
    初期値は、連続する 半角スペース タブ 改行 を
    1つの 半角スペース として表示します。
  • ソースのまま表示

  • ホワイトスペースプロパティはソース中のスペース・タブ・改行の表示方法を指定します。
    初期値は、連続する 半角スペース タブ 改行 を
    1つの 半角スペース として表示します。

letter-spacing:文字の間隔を指定する

このプロパティは使う人も多いと思います。僕も使っています。
何がマイナーなのか、というと、指定に使われる単位です。

px, em, % は多く使われていますが、pt, mm はweb制作ではあまり使いませんね。
他にも cm, in, ex, pc があります。

letter-spacingだけではなく、font-sizeやline-heightなど大きさを指定するCSSでは共通して使えます。

<ul>
<li style="letter-spacing:2px;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2em;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2%;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2pt;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2mm;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2cm;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2in;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2ex;">使ったことない単位もあります・・・</li>
<li style="letter-spacing:2pc;">使ったことない単位もあります・・・</li>
</ul>
    2px

  • 使ったことない単位もあります・・・
  • 2em

  • 使ったことない単位もあります・・・
  • 2%

  • 使ったことない単位もあります・・・
  • 2pt

  • 使ったことない単位もあります・・・
  • 2mm

  • 使ったことない単位もあります・・・
  • 2cm

  • 使ったことない単位もあります・・・
  • 2in

  • 使ったことない単位もあります・・・
  • 2ex

  • 使ったことない単位もあります・・・
  • 2pc

  • 使ったことない単位もあります・・・

word-spacing:単語の間隔を指定する

英語圏では重要なプロパティだと思いますが、残念ながら僕は使用した事がありません。
内容は表題の通りで、単語の間隔を前項で紹介した単位で指定します。

direction:文字表記の方向(左右)を指定する

うわぁ・・・アラビア語じゃないんだから。。日本語は右からは読みません。

日本語のサイトでdirection:rtl(右から左)を使用する場合は、同時にunicode-bidiプロパティでユニコードの文字表記方向を上書きする必要があります。

unicode-bidi:bidi-override;
を同時に指定します。

<ul>
<li style="direction:ltr; unicode-bidi:bidi-override;">このサイトは ty's empty f'log です。</li>
<li style="direction:rtl; unicode-bidi:bidi-override;">このサイトは ty's empty f'log です。</li>
</ul>
  • このサイトは ty’s empty f’log です。
  • このサイトは ty’s empty f’log です。

clip:ボックスを切り抜き表示(クリッピング)する

このプロパティを単体で使うことは少ないでしょう。
a:hoverなどと組み合わせてcssだけで簡単に動的なボタンが作れる利点がありますが、僕は使用したことがありません。

empty-cells:空白セルのボーダーの表示・非表示を指定する

テーブルレイアウト全盛時代には重要なプロパティでしたが、めっきり使わなくなりました。
最近では、たまにテーブルを使う場合もセルのボーダーは常時noneです。

caption-side:テーブル(表)のキャプションの位置を指定する

テーブルレイアウト全盛時代にも使っていなかったような・・・

quotes:引用符を設定する

引用を<q>でタグ付する習慣がない上、文章内で「」や” ” を自分で打ってしまいます。
これも一度も使ったことがないプロパティの一つです。

cursor:カーソルの形状を指定する

これは面白いプロパティで使い所によってはユーザビリティーを向上させますね。

「処理中カーソル」をbody要素に使用したら・・・ちょっとしたドッキリです 笑

<ul>
<li style="cursor: auto">auto ブラウザが自動的に選択したカーソル</li>
<li style="cursor: default">default 矢印型など利用環境の標準カーソル</li>
<li style="cursor: pointer">pointer リンクカーソル</li>
<li style="cursor: crosshair">crosshair 十字カーソル</li>
<li style="cursor: move">move 移動カーソル</li>
<li style="cursor: text">text テキスト編集カーソル</li>
<li style="cursor: wait">wait 待機・処理中カーソル</li>
<li style="cursor: help">help ヘルプカーソル</li>
<li style="cursor: n-resize">n-resize 北方向のリサイズカーソル</li>
<li style="cursor: s-resize">s-resize 南方向のリサイズカーソル</li>
<li style="cursor: w-resize">w-resize 西方向のリサイズカーソル</li>
<li style="cursor: e-resize">e-resize 東方向のリサイズカーソル</li>
<li style="cursor: ne-resize;">ne-resize 北東方向のリサイズカーソル</li>
<li style="cursor: nw-resize;">nw-resize 北西方向のリサイズカーソル</li>
<li style="cursor: se-resize">se-resize 南東方向のリサイズカーソル</li>
<li style="cursor: sw-resize;">sw-resize 南西方向のリサイズカーソル</li>
<li style="cursor: progress">progress 進行中カーソル(CSS 2.1より仕様に追加)</li>
<li style="cursor: url('../images/htmq.cur')">url('ファイルのパス') オリジナルのカーソル</li>
<li style="cursor: hand">hand 指型カーソル(IE4以上の独自拡張)</li>
<li style="cursor: no-drop">no-drop ドロップ禁止カーソル(IE6以上の独自拡張)</li>
<li style="cursor: all-scroll">all-scroll 全スクロールカーソル(IE6以上の独自拡張)</li>
<li style="cursor: col-resize">col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style="cursor: row-resize">row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)</li>
<li style="cursor: not-allowed">not-allowed 禁止カーソル(IE6以上の独自拡張)</li>
<li style="cursor: vertical-text">vertical-text 縦書きカーソル(IE6以上の独自拡張)</li>
</ul>
  • auto ブラウザが自動的に選択したカーソル
  • default 矢印型など利用環境の標準カーソル
  • pointer リンクカーソル
  • crosshair 十字カーソル
  • move 移動カーソル
  • text テキスト編集カーソル
  • wait 待機・処理中カーソル
  • help ヘルプカーソル
  • n-resize 北方向のリサイズカーソル
  • s-resize 南方向のリサイズカーソル
  • w-resize 西方向のリサイズカーソル
  • e-resize 東方向のリサイズカーソル
  • ne-resize 北東方向のリサイズカーソル
  • nw-resize 北西方向のリサイズカーソル
  • se-resize 南東方向のリサイズカーソル
  • sw-resize 南西方向のリサイズカーソル
  • progress 進行中カーソル(CSS 2.1より仕様に追加)
  • url(‘ファイルのパス’) オリジナルのカーソル
  • hand 指型カーソル(IE4以上の独自拡張)
  • no-drop ドロップ禁止カーソル(IE6以上の独自拡張)
  • all-scroll 全スクロールカーソル(IE6以上の独自拡張)
  • col-resize 横方向のリサイズカーソル(IE6以上の独自拡張)
  • row-resize 縦方向のリサイズカーソル(IE6以上の独自拡張)
  • not-allowed 禁止カーソル(IE6以上の独自拡張)
  • vertical-text 縦書きカーソル(IE6以上の独自拡張)

※有名な「HTMLクイックリファレンス」の説明ページがとても素晴らしかった為、使用例をお借りしました。

HTMLクイックリファレンス
とても参考になるサイトですので、是非ご覧ください。

その他

今回恥ずかしながらご紹介した以外にも、使用したことのないプロパティには

印刷系のスタイル
page-break-before(after/inside)
widows など

連番に関するスタイル
counter-increment
counter-reset

アウトラインのスタイル
outline

などがありました。
 

正直、必要のないプロパティは使わなくてもいいと思いますが、存在も知らない事と知識として知っておく事は全然違いますね。

関連記事