見出しタグについて

見出しタグはページの見出しに指定します。文字サイズを大きくしたり小さくしたりするのに使うべきではありません。

見出しは構造化

本を思い浮かべてください。一冊の本にはタイトル、章、大見出し、小見出しとあります。枝分かれした木のような構造です。ホームページでの見出しもこれにならうように作られました。<h1>にはそのページの内容をまとめた見出しが付きます。<h2>にはページをいくつかに分解した内容をまとめた大見出しのような見出しが付きます。<h3>はさらに細かくした内容です。サイトによっては使い方は違うのですが内容のまとめという意味では共通している場合が多いでしょう。

SEOにも重要

検索エンジンはボットを使い世界中のサイトを見に行き情報を集めます。ページの内容を理解することは機械なのでまだ限界があります。タイトルや見出しは内容をまとめているとみなし重要視します。検索する人が打ち込むキーワードに沿った内容のページを作ったら見出しにも反映させた方がよりヒットしやすくなると言われています。

見出しを設定する方法

Dreamweaverのデザインビューで見出しにしたい文字列を選択し、プロパティインスペクタのフォーマットで見出しをドロップダウンリストから選択します。選択した文字列以外も見出しとして扱われたときはコードビューで編集します。

広告

改行タグについて

改行タグは<br>です。厳密にXHTMLで記述するときは<br />ということです。

テキストで改行してもブラウザでは改行されない。

私もホームページをはじめて作ったときは不思議だと思いました。仕様なので仕方がないということで片付けました。最近は、CMSを使っているので<br>タグを打たなくても、システムが自動的に改段あるいは改行を行ってくれるようになりました。

<br><br>は良くないらしい。

<p></p>で改段した方がいいということです。

Dreamweaverで改段と改行を使い分ける方法

行を変えるときにEnterキーを押すと改段</p><p>タグが挿入されます。Shiftキーを押しながらEnterキーを押すと改行となり<br />タグが挿入されます。

改行タグは覚えられるけど

改行タグは知らないとCMSのテンプレートをいじるときに困ることがあるかもしれないので覚えるべきです。ただ、このサイトでもいろいろなことを扱っていますが、ITの業界は次から次へと新しい技術が出てきます。覚えるべきもの覚えなくてもどの本に書いてあったかぐらいのうろ覚えの知識でよいものとかいろいろあります。パソコンは道具でしかないのであまり無理をせず、個人個人でここまででいいだろうというところでやめといてパソコン以外のもっと肝心な所を伸ばすのに時間を使った方がほとんどの人にはいいのだと思います。HTML5、CSS3、SNS等気になることはいっぱいありますが、皆さんもあまり深みにはまらずほどほどにしましょう。本当はもっと世の中の変化が緩やかになってくれないだろうかと願う日々です。現状では定年を迎えるときの世の中が全く想像できません。

HTMLで文字色の変更

HTMLで文字色を変更するタグはfont colorです。色名か16進数の色のコードで指定できます。コードヒントや、カラーピッカーを使えば難しくはありません。

文字色を変えるHTMLタグ

使用例

<font color="#0000ff">青色の文字列</font>

コードヒントで<font colorと入力していくと途中で入力候補が表示されるのでそのまま入力を続けるか上下のカーソルキーで選択してEnterで確定します。

カラーピッカーを表示する方法

コードヒントで入力していくと自然とカラーピッカーが表示されるのですが、どこかをクリックして消えるときもあるでしょう。そんなときは””の間にカーソルを持っていってCtrlキーを押しながらスペースキーを押しましょう。表示されます。

ページ全体の文字色を指定するタグ

標準の文字色指定

<body text="色コード"></body>

リンクの文字色指定

<body link="色コード"></body>

リンククリックした瞬間の文字色指定

<body alink="色コード"></body>

既に見たリンクの文字色指定

<body vlink="色コード"></body>

一度にすべて指定するときは

<body text="色コード" link="色コード" alink="色コード" vlink="色コード"></body>

色コードの所には色名を記述するか#に続く16進数のrgbの値を記述します。

今はCSSで指定するのが主流

ページが多くなってくる場合は、CSSで指定した方が色について記述する部分を減らせるのでメンテナンスが容易になりますし、検索エンジン対策上も有利です。

HTMLで文字サイズの変更

HTMLで文字サイズを指定するにはfontタグに size属性を指定します。サイズは1(最小)から7(最大)まで指定できます。HTMLより細かく指定するにはCSSで設定する方法があります。

文字サイズを指定するHTMLタグ

使用例

<font size="3">フォントサイズを指定する文字列</font>

size属性の数字は1から7まで整数で指定できます。数字が大きいほどサイズが大きくなります。

CSSならもっと細かく指定できる

使用例

body { font-size: 16px;}

単位の例
相対単位
px(ディスプレイの1ピクセルを1とした単位)
絶対単位
pt(一インチ(2.54cm)の72分の1を1ポイントとした単位)

DreamweaverでCSSにより文字サイズを設定する方法

・CSSの設定
①画面右中段CSSスタイルパネルで「新規CSSルール」をクリック
②「新規CSSルールダイアログ」で「セレクタータイプ」をクラス、「セレクター名」をmoji1などのクラス名、ルール定義を新規スタイルシートファイルにし(既存のスタイルシートファイルに追加したいときは既存のファイルを指定)、「OK」ボタンを押す
③「スタイルシートファイルの別名で保存」ダイアログでCSSファイルに新しく名前を付けて作成・保存する。
④カテゴリ「タイプ」で「Font-size」を指定
⑤文字サイズと単位を指定したらOKを押す。
・HTMLの設定
⑥デザインビューでフォントを変えたい文字列を範囲選択
⑦プロパティインスペクタのクラスでmoji1のようなCSSで設定したクラス名を選択
⑧フォントが反映される。

HTMLでフォントの変更

HTMLタグでフォントを指定する時はfont faceタグを使います。閲覧者の環境で指定したフォントが見つからないときはデフォルトのフォントが使われます。

フォントを変えるHTMLタグ

font faceタグの使用例です。

<font face="MS ゴシック">フォントを指定する文字列</font>

face属性にフォント名を指定します。
実際に試すときはこのタグを<body></body>で囲むこととフォント名の全角・半角でフォントが切り替わらないケースもあるのでチェックする必要があります。

コンマで区切って優先順位を指定

使用例です。

<font face="MS ゴシック,Osaka">フォントを指定する文字列</font>

フォント名をコンマで区切って複数並べた場合は最初に書いたものが優先されます。ユーザーの環境に指定したフォントが見つからない場合はブラウザのデフォルトのフォントが使用されます。

コードヒントで入力すると簡単

コードビューで<font faceと入力していくとコードヒントが表示されると思います。faceまで入力するとフォントの入力候補がいろいろ表示されます。表示したいフォントを含んでいる候補を選ぶことでWindowsでもMacOSでも近い感じで表示されるフォント候補を選べます。

特殊フォントについて

<>など表示するのに通常の文字と違う扱いをする文字があります。
<の場合は&lt;、>は&gt;です。
特殊フォントの入力方法 – 楽天パソコンのすすめ – 楽天ブログ(Blog)
http://plaza.rakuten.co.jp/pcnosusume/3009
に一覧表があります。