あなたのお役に立ちたいわんど。

これだけは覚えておきたい！【後編：CSS（プロパティ）の読み方】

こんばんよう、ばななです。
前回のこれだけは覚えておきたい！【前編：HTML（タグ）の読み方】に続き、今回は
これだけは覚えておきたい！【後編：CSS（プロパティ）の読み方】を紹介したいと思います。

【 cursor 】


「カーソル」と読みます。
カーソルの形を指定するプロパティです。
一瞬何て読むのだろうと戸惑ってしまいました。

《 使用例 》
〈 ブラウザ上の表示 〉※カーソル当ててみてください。

  • 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以上の独自拡張）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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>

【 height 】


「ハイト」と読みます。
高さを指定するプロパティです。こちらもwidthと同じくよく使うのに、意外と間違いやすいです。
私は以前、ヘイトと読んでいました。恥ずかしい！

null
1
2
3
4
table.sample {
width: 50%;
height: 100px;
}
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
 
<table class="sample">
好きな食べ物は、パパイヤです。
</table>
</body>
</html>

【 hidden 】


「ヒドゥン」と読みます。
inputタグのtype属性に指定すると、閲覧者には表示されずに送信されます。

《 使用例 》

〈 ブラウザ上の表示 〉
null

1
2
.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
 
<h3>左の画像にvisibility:hidden、右の画像にvisibility:visibleを適用</h3>
<p>
<img src="images/andplus.jpg" class="sample1">
<img src="images/andplus.jpg" class="sample2">
</p>
</body>
</html>

【 text-align 】


「テキストアライン」と読みます。
行揃えの位置などを指定するプロパティです。
” align “をアリグン、アーリンと読まれることも多いです。

《 使用例 》
〈 ブラウザ上の表示 〉

1
2
3
p.sample1 {text-align: left; }
p.sample2 {text-align: center; }
p.sample3 {text-align: right; }
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">左寄せ</p>
<p class="sample2">中央揃え</p>
<p class="sample3">右寄せ</p>
</body>
</html>

【 visibility 】


「ビジビリティ」と読みます。
なんだかビリビリしてるな〜。って思いながらたまに書くのですが、スペルを間違えそうになります。

《 使用例はこちら 》

【 width 】


「ウィドゥス・ウィズ」と読みます。
横幅を指定するプロパティです。読み間違いが多いダントツ１位ではないでしょうか。
ウィズとも読むということは、記事を書いていて初めて知りました。

《 使用例はこちら 》

まとめ

前回から同じテーマで記事を書かせていただきましたが、自分の知らなかった読み方や
さらに、初めて知ったタグやプロパティもあったのでとても勉強になりました。
PC内で使えたとしても読み方を知ることは、この先WEB制作に関わっていく方や今現在関わっている方、これからHTMLを勉強する方にとっても重要だと思います。
少しでもお役に立てれば嬉しいです！

こちらもおすすめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

＜ すべての記事を見る ＞

Web制作の株式会社あんどぷらす
ECサイト構築サービス「ウルトコ」
イベントスペース「fuigo」
CS-Cartの情報ポータル「STOCK」
MENU