目次:
ビデオ: Dreamweaver 使い方講座(ドリームウィーバーMX2004) 上巻 第5章 テキストの書式設定【動学.tv】6/10 2024
Dreamweaverのテキストパネルには、ページ内のテキストの表示を制御するオプションのコレクションがあります。 [テキスト]パネルオプションにアクセスするには、[プロパティ]パネルをスクロールして[レイアウト]オプションを表示するか、パネルの上部にある[T]アイコンをクリックします。
テキストパネルには、次の書式設定オプションがあります。
<! - 1 - >-
Color: テキストの色を設定します。カラーウェルをクリックして色を選択したり、スポイトで画面上の色をサンプリングしたり、カラーフィールドに16進数のカラーコードを入力することができます。 16進数のカラーコードを入力する場合は、最初のシャープ記号(#)を含めます。
-
フォントファミリ: フォントファミリまたは一連のファミリを定義します。ドロップダウンリストの下部にあるManage Fontsを選択し、Manage Fontsダイアログボックスを表示して、ローカルハードドライブまたはAdobe TypeKitからフォントを追加できます。
<! - 2 - > -
フォントスタイル: 通常、イタリック、または斜体を入力します。しかし、イタリックと斜体はWebブラウザではめったに異なりません。そうでない特定の理由がない限り、イタリック体で表示してください。
-
Font-Variant: テキストを小文字に変更します。この属性はすべてのブラウザでサポートされていないため、設計を慎重にテストしてください。
<! - 3 - > -
フォントの重さ: ドロップダウンリストから太字または太字を選択して、テキストを太字で表示します。 100〜900の数値を入力して、テキストの太さをより正確に制御することもできます。太字の書式を削除するには、標準または軽量を選択します。
-
Font-Size: テキストのサイズを定義します。特定の数値サイズまたは相対的なサイズを選択できます。サイズオプションは、ピクセル(px)、ポイント(pt)、ピカ(pc)、パーセント(%)、em、rem、ex、およびchです。ピクセル、em、およびパーセンテージは、テキストサイズで最も一般的に使用されるオプションです。
-
行の高さ: テキストが配置されている行の高さを指定します。テキストのサイズに似ていますが、ピクセル、em、パーセンテージなど、さまざまな方法で行の高さを指定できます。テキストの周りのスペースを増やすと、コンピュータ画面での読み上げが容易になるため、行の高さを追加することがWeb上では有効です。
-
テキストの整列: 対応するアイコンをクリックしてテキストを左揃え、右揃え、中央揃え、または正当化します。 Inheritの最初のアイコンがデフォルトです。たとえば、ページの下部にある タグに適用するスタイルの定義に[テキストに合わせる]を[中央に設定]を含めて、Webページのフッターにテキストを配置することができます。
-
テキスト装飾: テキストに下線を引くか、上書きするか、取り消し線で表示するか、まばたき効果で表示するかを指定します。リンクテキストからアンダーラインを削除するためによく使用される[なし]を選択することもできます。
-
テキストインデント: ピクセル、em、またはパーセンテージなどのサイズオプションのいずれかに数値を入力して、ページの左側からテキストをインデントする量を指定します。
なぜそんなに多くのフォントがありますか?
CSS3の最新バージョンのCascading Style Sheetsのおかげで、Webページで必要なフォントを使用できると聞いたことがあります。このステートメントは当てはまりますが、いくつかの制限があります。フォントを公開するための法的権利が必要で、フォントはWebサーバー上でホストされている必要があります。
Dreamweaverには、テキストが意図どおりに表示されるように、WindowsおよびMacintoshコンピュータで最も一般的なフォントのコレクションが含まれています。これらのフォントは、
-
Gotham、Helvetica Nue、Helvetica、Arial、Sans Serif
-
Cambria、Hoefler Text、解放セリフ、Times、Times New Roman、Times、およびSerif
などのファミリにグループ化されています。 [フォントの管理]ダイアログボックスを使用して独自のフォントコレクションを作成できます。このダイアログボックスは、CSSデザイナパネルの[テキスト]パネルの[フォントファミリ]ドロップダウンリストの下部にある[フォントの管理]オプションを選択すると表示できます。
テキストパネルのテキストシャドウセクション
テキストパネルのテキストシャドウセクションでは、CSS3定義に含まれる最新のCSSプロパティの1つであるテキストシャドーを追加するためのツールを提供しています。最も一般的なオプションは、次のとおりです。
-
H-shadow: 水平軸のテキストに影を追加します。最初にサイズオプションを選択し、フィールドに数値を入力します。たとえば、幅2ピクセルの水平シャドウを追加するには、2pxを入力します。
-
Vシャドウ: テキストに縦軸の影を追加します。最初にサイズオプションを選択し、フィールドに数値を入力します。
-
ぼかし: 影のぼかし量を制御します。数値が大きいほど、影が広がり、ぼやけます。
-
色: 16進数のカラーコードを入力してシャドウの色を指定するか、スポイトで画面上の色をサンプリングします。
テキストパネルの下部にある機能は、他のテキストパネルオプションと同じくらい一般的ではありません。
-
テキスト変換: テキストの大文字と小文字を変更します。オプションは大文字、大文字、小文字です。このプロパティを設定するには、対応するアイコンをクリックします。
-
文字間隔: 文字間に挿入される空白の量を定義します。サイズオプションは、ピクセル(px)、ポイント(pt)、ピカ(pc)、パーセント(%)、em、rem、ex、およびchです。
-
単語間隔: 単語間に挿入される空白の量を定義します。サイズオプションは、ピクセル(px)、ポイント(pt)、ピカ(pc)、パーセント(%)、em、rem、ex、およびchです。 (前のサイドバー「CSSサイズオプションの比較」を参照してください。)
-
空白: テキストブロック内の改行とスペースを処理する方法をブラウザに指示します。あなたのオプションはInherit、Normal、Nowrap、Pre、Pre-line、またはPre-wrapです。 Nowrapは、ブラウザウィンドウや別のコンテナに収まるようにラップする必要がある場合、要素が分離されないようにするために特に便利です。
-
縦方向の整列: テキストや画像などのインライン要素を、それらを囲む要素に合わせて整列させます。数値を設定するか、ベースライン、サブ、スーパー、トップ、テキストトップ、ミドル、ボトム、テキストボトムを選択できます。