Dreamweaver-パネルでcssを作成しよう!-カテゴリ「タイプ」

以前の職場ではドリームウィーバーがはいっておらず、ずっとテキストエディターでコーディングをしていたドリームウィーバー初心者コーダーです。

当時、テキストエディターに慣れはじめていた私は「タグの意味もCSSの意味も覚えられるし、手入力でよかったかも~ドリームウィーバーなんていらなわ~」と思っていました。
ここしばらくはコーディングそのものから遠ざかっていたため、相変わらずめったにドリームウィーバーは使用していなかったのですが、この数ヶ月コーディングに携わる機会があり、ドリームウィーバーを見直していたところ、それまでの考え方が180度間違っていたことに気がつきました。

「ごめんなさい、ドリームウィーバーさん、あなたはスバラシイです…」

そんなわけで、ドリームウィーバーの機能を初心者目線で改めて見直していきたいと思います。
今回は、これまで全くもって無視し続けてきたパネルです。
パネルを使用しての新規CSS入力機能を使用することで、劇的に効率を上げていくことができます。
でもよくみると、「このプロパティってどういう意味?使ったことないけど…」なんてものがちらほら。
そこで、今回はカテゴリ「タイプ」に表示されるプロパティの意味を見直していきます。

ちなみにパネルを使用してのCSS入力は、以下の図の赤いまる枠「新規CSSのルール」をクリックするとダイアログボックスが表示され、クラスなどの名称を入力して進めます。
sample?

カテゴリのタイプに記載されているプロパティ

sample2

font-family
フォントの種類を指定する際に使用。 フォントの種類はカンマ( , )で区切って複数の種類を並べることが可能です。ダブルクオーテーションで囲むことも忘れずに!
font-size
pxやemなどの単位をつけて文字サイズを指定。
font-style
フォントのスタイルを指定する際に使用。
「normal」標準の表示形式。
「italic」イタリック体。
「oblique」斜体。
日本語フォントの場合、イタリック体と斜体の表示はほとんど同じ表示のようです。
line-height
行の高さを指定する際に使用。line-heightが30pxでfont-sizeが12pxの場合、30px(line-height)から12px(font-size)を引いた、残り18pxが行間として上下に9pxずつ割りあてられるというわけです。
font-weight
フォントの太さを指定する際に使用。
「normal」標準の表示形式。
「bold」太字にする。
「lighter」一段階細くする。
「bolder」一段階太くする。
font-variant
「normal」標準の表示形式。
「small-caps」英字の小文字の表示形式を、小文字サイズのまま、表示形式は大文字とする際に使用。
text-transform
「none」標準の表示形式。
「capitalize」単語の先頭文字を大文字で表示。
「lowercase」全てを小文字で表示。
「uppercase」全てを大文字で表示。
text-decoration
「underline」下線付テキスト。
「overline」上線付テキスト。
「line-through」打ち消し線テキスト。
「blink」テキストが点滅しますが、サポートしていないブラウザが多いようです。
「none」標準の表示形式。
Color
テキストの色を指定。
使用頻度が低いものもありますが、一通りの意味は押さえておきたいですね。
次回は背景プロパティーについて記載していきます~。

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>