2022-05-12
あなたのお役に立ちたいわんど。
これだけは覚えておきたい！【後編：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以上の独自拡張）
<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と同じくよく使うのに、意外と間違いやすいです。
私は以前、ヘイトと読んでいました。恥ずかしい！
table.sample {
width: 50%;
height: 100px;
}
<html> <head> <link rel="stylesheet" href="sample.css" type="text/css"> </head> <body> <table class="sample"> 好きな食べ物は、パパイヤです。 </table> </body> </html>
【 hidden 】
「ヒドゥン」と読みます。
inputタグのtype属性に指定すると、閲覧者には表示されずに送信されます。
《 使用例 》
〈 ブラウザ上の表示 〉
.sample1 {visibility:hidden;}
.sample2 {visibility:visible;}
<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 “をアリグン、アーリンと読まれることも多いです。
《 使用例 》
〈 ブラウザ上の表示 〉
p.sample1 {text-align: left; }
p.sample2 {text-align: center; }
p.sample3 {text-align: right; }
<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を勉強する方にとっても重要だと思います。
少しでもお役に立てれば嬉しいです！
投稿者プロフィール
-
学生アルバイトや学生インターンの共用アカウントだよ。
まだまだ勉強中！
最新の投稿
css2017.03.10CSSでパターン作ってできるだけ解りやすくまとめてみた（つもり）
Illustrator2016.10.24illustratorの意外と知られていない便利な機能。
Illustrator2016.08.17Illustratorで煙のようなアートブラシを作ってみた。
css2016.08.11これだけは覚えておきたい！【後編：CSS（プロパティ）の読み方】
シェア・購読で応援していただけると喜びます：）
こちらもおすすめ
