ホームページビルダー
HTML5で廃止された要素を使わない

HTML5で廃止された要素

• acronym〔頭字語〕
• applet〔Javaアプレットの埋め込み〕
• basefont〔ページの基準フォントサイズ〕
• big〔フォントを大きく表示〕
• center〔要素の左右中央揃え〕
• dir〔ディレクトリ型リスト〕
• font〔フォント装飾（色・サイズ・種類）〕
• frame〔フレームの定義〕
• frameset〔フレーム（frame要素）の構成〕
• isindex〔キーワード検索入力欄の埋め込み〕
• noframes〔フレーム未対応ユーザー向けの代替テキスト〕
• s〔テキストに取消線を引く〕
• strike〔テキストに取消線を引く〕
• tt〔テキストを等幅フォントにする〕
• u〔テキストに下線を引く〕

ホームページビルダー21で<span>を使った色指定の手順は

1. 「ページ編集」画面でカラー指定したい文字を選択反転した状態にします
   
2. 選択反転した文字上でマウスを右クリック
3. 表示されたメニュー内の「スタイルの設定」をクリック
4. 「スタイルの設定」画面が開きます
5. 「色と背景」のタブをクリック
6. 「前景色」でカラーを指定して「OK」を押せば選択反転した文字のカラー設定ができます
7. 当然カラー設定だけではなく、色々なスタイルの設定も出来ます

「フォントスタイルの設定(span)」を上部メニューに追加する方法

1. ホームページビルダー上部メニューの「表示」をクリック
2. 「表示」＞「ツールバー」 ＞「ユーザー定義の設定」
3. 「ユーザー定義の設定」をクリックして「設定画面」を開く
4. 「ユーザー定義ツールバー」のタグをクリック
5. 「新規作成」をクリックし好きな名前を入力して「ＯＫ」
6. フォーカスを画面上に移すために、ツールバー上をクリックします
7. ホームページビルダーの画面上を探すと小さな窓が出来ているので、クリックして上部のツールバーの配置したい場所にドロップすると自分用のメニュー領域が出来る
8. 次に「設定画面」の「コマンド追加」タブをクリック
9. 「分類」の選択窓で「書式」を選択
10. 「コマンド一覧」の選択窓で「フォントスタイルの設定(span)」を選択し、ドラッグしたまま、自分用のメニュー領域にドロップすれば追加されます
    表示させるアイコンや文字を選択指定できます
11. 時々表示位置が画面右端に移動するので、先頭の区切り部分をクリックして移動させます
12. 次回からは、メニューバー上の「フォントスタイルの設定(span)」をクリックするだけで使用出来るようになり非常に便利です

• 今までの color を使った色指定の部分
  <font COLOR="#0000ff">色々な説明文</font>
  これを
• インラインで style を使った色指定の
  <span style="color : #0000ff;">色々な説明文</span>
  に置換しました

アプリ MultiReplace の設定と使用方法

1. アプリ MultiReplace のオプションを変更
   オプション→置換後のファイル名→●サブフォルダに保存する
2. 画面下の設定を使いやすく変更する
   　区切り文字を「/」から「@」に変更
   　●正規表現を使用する
   　□大文字小文字を区別しない
   　●単一行モード
3. 画面右側の「A」「B」・・・の好きなタブを選択し、
   〇1、〇2・・・の中から記録したい場所を指定
4. 左側の窓枠の中に検索＠置換の設定を記入します
   設定方法は下記の検索と置換の設定の説明を確認して下さい
   行先頭に＠を2個並べ＠＠と記入するとコメントとなります
5. 検索・置換したい対象ファイルを画面左上の「ファイル名」の上にドロップします
   エクスプローラー等を使って、複数のファイルを選択しドロップすることもできます
   フォルダをドロップすることはできないようです
6. 右上の「置換」をクリックすると変換が実行されます

検索部分と置換部分の設定例

1. 基本的な書き方は、＠の両側に
   　検索部分の設定＠置換部分の設定
   のように記入します
2. 検索したい部分は下記のようになっています
   <font COLOR="#0000ff">色々な説明文</font>
   #0000ff　の部分はすべて7文字になります
   色々な説明文　の部分は色々な長さの文字列があります
3. 正規表現を使った検索部分の設定は
   <font COLOR=¥"(.......)¥">(.*?)<¥/font>@
   • #0000ffは7文字なので (.......)のように . を7個並べる
   • 色々な説明文 の部分は文字数が異なるので (.*?) とする
   • () の中はそのまま、左から順に $1、$2 に代入される
     $1=#0000ff、$2=色々な説明文 となります
   • $1、$2 は置換先で使用できる
   • " や / を検索したい時は ¥ を付けて ¥" や ¥/ とする
   • 行末の @ の左側は検索設定、右側は置換設定となります
   • その他 正規表現一覧のルールを確認して記入します
4. 正規表現を使った置換部分の設定は
   3. の行末の区切り @ に続けて記入します
   <span style="color : $1;">$2</span>
   $1 と $2 の部分は検索時に代入された文字列が使用されます
5. 置換を実行すると結果は
   <font COLOR="#0000ff">色々な説明文</font>
   が
   <span style="color : #0000ff;">色々な説明文</span>
   となります