AIと戦って、あなたの人生のリスク診断 >>

Dreamweaverを使用してWEBサイトを作っています。
依頼人が更新作業をしているのですが
相手はホームページビルダーを使用しています。

CSSでいろいろ指示をしているテンプレートを作り、
テキスト部分を打ち変えるだけで更新できるようにしているのですが
ビルダーでテキストを打つと不必要なタグがやたらと入ります。
たまにフォント指定がバラバラだったりして、明朝とゴシックが混じったような文章になってたりします。
これは相手の操作に問題があると思うのですが(^-^;

ソース画面にして、テキスト部分に直接打ち込んで下さいとお願いしているのですが
どうしても見やすさから、通常の作業場面(?)でテキストを打ってしまうようです。

「表示がおかしくなったから見てくれ」と頼まれ見ると
すごい指定タグの量でびっくりします。

HTMLソースの自動整形やエラー修正のチェックを外したり、
その他いろいろ困る設定は外す事ができたのですが、
このフォントタグの細かな生成には参っています。

こんな感じです↓
<span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分○○<span
lang=EN-US style='font-size:11.0pt;color:red'></span><BR>
<span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分2○○<span
lang=EN-US style='font-size:11.0pt;color:red'></span><BR>

…不要な指示がなぜ入っているのでしょう??

また、文章が終わって何もない所に↓
<span lang=EN-US style='font-size:10.0pt'></span></p>
<p class=MsoNormal><span style='font-size:10.0pt;font-family:"MS 明朝","serif";
mso-ascii-font-family:Century;mso-hansi-font-family:Century'></span></p>
<span lang=EN-US style='font-size:10.0pt'></span><span
lang=EN-US style='font-size:10.0pt'></span>
…と、これがたくさん残っています。(なぜでしょう??)

改行タグの前の<SPAN lang=EN-US><o:p></o:p></SPAN>も困ります。

いろいろ書いてしまいましたが、設定でこれらのタグが入らないようにする方法はないでしょうか?
また、相手の操作次第(ソース画面で直接打ち込む以外)でなおる方法はあるでしょうか?

よろしくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ホームページビルダーのバージョンはいくつでしょうか?


ホームページビルダーは、最新になればなるほど余計な機能が付いております。

私が使っているビルダー(古いバージョン)では、
ホームページビルダー以外で作成したページを編集することがよくあるのですが、
CSSテンプレートを使っているページを編集したりしても、
文字入力のない部分が<span lang=EN-US style='font-size:10.0pt'></span>のようになったりしません。
「ホームページNinja」シリーズや「ホームページZERO」のような
HTML自動生成するタイプのアプリケーションソフトだと上記のようになることはあります。
(それでも、「ホームページNinja」・「ホームページZERO」で作成したままのソースになり、
ホームページビルダーではそれをそのまま再現しているだけです。)

私がやっていることは、以下の通りです。
(※注意:新しいバージョンだと、このようにやっても上手くいかないかもしれません。)

「HTMLソースを自動整形する」をOFF
編集スタイルは、スタンダードかエディターズ(かんたんスタイルだと、設定に関わらず自動整形されるため)
「DOCTYPEを出力する」をOFF(ONにするなら、事前に宣言文を設定欄に入力しておく)
標準モードで作成する(どこでも配置モードは使わない)
スタイリッシュエフェクトは使わない
ページ編集画面で直接文字入力する(MSword形式で入力したり、wordなどを経由しない)
CSSテンプレートで細かく指定している場合は、入力する際のカーソルの位置に注意する
(ページ編集画面では、どこからどこまでが<p>~</p>とか<span>~</span>なのかわかりづらいため。
例えば、通常の文章を入力したいのに、前後のタグの要素の中にその文章が入ることがあります。)

位置がわかりづらい時は、HTMLソース画面で編集してもらうほうが本当は入力者にとっては楽なんです。
HTMLソース画面では、コメント部分・タグ部分・属性部分とテキスト部分で色分けすることができます。
いじってはいけない部分(タグや属性など)に色を付け、それ以外の部分で文字編集してもらうようにすると、
HTMLタグに不慣れな人でもわかりやすいです。


>改行タグの前の<SPAN lang=EN-US><o:p></o:p></SPAN>も困ります。

<o:p></o:p>を見て、MSwordでのホームページ作成・編集を思い出しました。
ホームページビルダーだと、MSwordで入力した文章をコピーして、ページ編集画面にて貼り付けると、
<span>~</span>やら<o:p></o:p>やら、余計なタグがぞろぞろ付いてきます。
ホームページビルダーだけで編集するのであれば、<o:p></o:p>が入るのは今まで見たことがありません。
一度、具体的にどのように編集しているのか確認してみてください。
    • good
    • 0
この回答へのお礼

丁寧な回答ありがとうございます!
返事が遅くなって申し訳ありませんでした。

どんなやり方をしているのか、実際見てきました。
ビルダーのバージョンはわかりませんが、新しいと思います。
依頼人のやり方は
ワードで作成した文章をコピーし、ページ編集画面でペースト。
その後、出てきた赤いエラーのマーク?を適当に消していたそうです(-_-;;

コピーしてペーストした時点で、質問時に記したようなタグが挿入されていました。
これを繰り返し、その後文章を消したりして、余白に変なタグが残ったのかもしれないと思いました。

ワードの文章をコピーし、ソース編集画面にペーストすると、変なタグは付かずにコピーでき、
コピー後の操作(改行したり追加したり削除したり)は、
ページ編集画面でしても不要なタグは生成されていないので
ワードからページ編集画面への直接コピペが原因だったようです。

依頼人も理解してくれて、これからはソース画面にペーストしてくれるそうです。

私の方でも、アドバイスいただいたように
HTMLタグに不慣れな人でもわかりやすいように、見せ方を考えたいと思います。

ありがとうございました!

お礼日時:2011/05/17 15:36

ソフトウェアには大して詳しくないので、根本的な解決方法は答えられないのですが……



自分はwebデザイナーなどでなく、むしろその依頼人さんのようなポジションで、サイトの更新などを行っていました。

Dreamweaverは、いじりながらある程度のプレビューが見れるので、使える環境のときはDreamweaverを使っていました(少し前のことなので、古いバージョンですが)。

そのときの経験から、デザインビューのウィンドウで更新をかけると、いわゆる不要タグが入りやすいと感じました。
例えば、テーブルの大きさを、デザインビュー側でドラッグして広げるなどの行為をするとです。
そこで、更新はコードビュー側で行うようにしたところ、不要タグは入らなくなりました。

これはおそらく、デザインビューでの変更は簡単に微調整できる半面、ソフトウェア内部でその行為に対するさまざまな処理を肩代わりできるようにするために必要なことだと思うので、それをなくすことはできないのではないでしょうか。

ですから、対処としては、依頼人さんが変にレイアウトを触らないよう、ソース自体を明確にしてあげるなどすると良いと思います。

<option value="1">1月</option>
<option value="2">2月</option>
<option value="3">3月</option>
こういう箇所があったとします。
この程度であればいいですが、もう少し複雑になると不慣れな人は何がどうなって、どこを変更すればいいかわからなくなります。
そうすると、デザインビュー側ではサイトで閲覧できる部分だけが表示されているので、そちらを触りたくなってしまいます。
すると、長文であれば続けて入力すれば範囲内で自動で折り返してくれるのに、自分でエンターを押して改行してしまったりして、<br>が入ればまだいいものの、<p>が入ってさらに まで……
なんてことになってしまいます。

なので、コードと触るテキスト部分を明確に分けてしまうのです。

<option value="1">

1月

</option>

わかる人には冗長で、ムズムズするかもしれませんが、このくらいハッキリと分かれていれば、「あ、1月のところを変えればテキストが変わるな」と気づくことができます。
また、前後に空行を入れることで、コードの変なところを触る危険を減らすこともできます。

小さなことですし、これで解決できるわけではありませんが、こうやって徐々に依頼人さんにコード側での更新を習慣づけていくことができれば、そのうちスムーズに更新作業が進むようになるかもしれません。
    • good
    • 0
この回答へのお礼

丁寧な回答ありがとうございます!
返事が遅くなり申し訳ありません。

依頼人の更新作業のやり方を見せてもらいました。
結果、原因はワードで作った文章をコピーし、ページ編集画面へペーストすることで
不要なタグがたくさん生まれていたようです。
ワードの文章が明朝だったら、明朝のフォント指定が入っていました。
その後、出てきた赤いエラーのマーク?を適当に消していたそうで(-_-;;
その繰り返しで、余白に変なタグが残ったのかもしれないと思いました。

ワードの文章をコピーし、ソース編集画面にペーストすると、変なタグは付かずにコピーでき、
コピー後の操作(改行したり追加したり削除したり)は、
ページ編集画面でしても不要なタグは生成されていないので
ワードからページ編集画面への直接コピペが原因だったようです。

依頼人も理解してくれて、これからはソース画面にペーストしてくれるそうです。
(前は面倒だと嫌がられていましたが^-^;)
依頼人が更新しやすいように作ったつもりではいましたが
アドバイスいただいたように、コード部分とペースト領域をはっきり分けて
依頼人がもっと作業しやすいように、私の方でも気をつけたいと思います。

ありがとうございました!

お礼日時:2011/05/17 15:46

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q  これの意味教えて下さい。

これの意味教えて下さい。
タグの
<tr>
<td></td>
</tr>
中に入っている
意味はなんですか?

Aベストアンサー

空白(半角スペース)として使用されることが多いですが、
を使用すると改行されません。

たとえばOK WaveのOKが行末あたりに来たときに、
(1)OKとWaveの間を半角スペースとする場合
~~~OK<改行>
Wave~~~

となりますが、
(2)OKとWaveの間をとする場合
~~~<改行>
OK Wave~~~

となります。

Qの意味を教えてください。

Javascriptを見ていると
<a href="#" onClick="new_open();return false">
なる記述がありますが、
この<a href="#"
の部分の意味を教えてください。
<a herf まではわかるのですが、この#はどのようないみなのでしょうか?

Aベストアンサー

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとページ最上部にジャンプしてしまいます。

このスクリプトを書いた人は onClick だけが必要だったのでしょうが、href がないとリンクの下線が出ないなどの不都合があるため、やむなく # を書いたのでしょう。

JavaScriptの内容を実行したいだけなら、
<a href="javascript:new_open()">
と書けば十分なのですが、一部のブラウザではこのタイプのリンクをクリックすると、アニメーションGIFが止まってしまうなどの弊害があるため、嫌う人もいるようです。

また、JavaScriptが有効でない環境の人は、質問に書かれたリンクをクリックしてもページ最上部に戻されるだけで、開くべきページの内容を見ることができません。
なので、
<a href="ページのURL" target="_blank" onClick="new_open(); return false">
とするなどして、非JavaScript環境にも対応した方が親切です。

長文失礼しました。

href="#" というのは「そのページの最上部へのリンク」という意味で、スクロールした場所から一番上に戻したい場合に使います。
ちなみに、同ページ内への # 指定でのリンクでは、ページは読み込まれずスクロールするだけです。

<a href="#" onClick="new_open();return false">
というのは、そのリンクがクリックされた時に new_open という関数を実行し、他の処理はするな、という意味です。
return false というのが、A タグ本来のジャンプ動作をキャンセルさせるためのもので、これを取ってしまうとペー...続きを読む

QCSVファイルの中で、「 , 」カンマを使いたい

「 , 」で区切られたCSVファイルの中で、「 , 」カンマを使いたいのですが、可能でしょうか?

具体的には「これは1,500円でした。」というように、CSVファイルに収められた文章内で出てくる半角の数字(お金)の区切りに使いたいのです。
全角では代用したくないのですが、CSVファイルでデータを受け渡しする際に、困っています。

例えば、特殊文字などで対応可能でしょうか?

Aベストアンサー

受け渡しに使うと言うことは相手方のアプリケーションのことも考えなければいけないのですが・・・とりあえず対応が簡単そうな方法を。

1.各セルを""で囲む。(もちろんデータにダブルクォートがある場合はカンマと同様に困ります。
2.カンマで区切らずにタブで区切る。(比較的使われない文字ですが、やはりデータ中にタブがあるとカンマと同様です)

難しいけれど完璧に対応するためには、データ中の区切り文字は特殊な文字列に変更し、受け取り側のアプリケーションではその特殊な文字列をデータ中の区切り文字として扱うという方法が使われます。
例えば、データ中のカンマは\,にするとか。

データ作成側、受け取り側でそれぞれどこまで対応できるのか分かるともっと簡単かつ具体的な方法を回答できるかも知れません。

QEXCELのVBAでのSelectとActivateの違い

VBAの初心者です。
ExcelのVBAでメッセージを表示してシートを切換えるというのを作りたいのです。
見真似で作成したのが↓です。


Dim rtn As String
rtn = MsgBox("シートを切換えますか", vbYesNo, "シートの切替")
If rtn = vbYes Then
Worksheets("送付先一覧").Activate
Range("a1").Select

Else
Exit Sub
End If

動作確認はできましたが、上記の「Activate」を「Select」に変更しても特に動作異常がありません。
そこで、疑問ですが、「Activate」と「Select」ってどうやって使い分けるのでしょうか?

Aベストアンサー

こんにちは。

通常は、シートもセルも Select でよいと思います。
選択して、扱えるようにするということだと思います。

#2さんも述べておりますが、Activate って、ひとつを選ぶことですね。でも、なぜか、Activate は、ほとんど使いません。

たぶん、Select は、選択した後に、その選択したものを、そのままオブジェクトとして確保して使えるので便利だから選ばれるのかもしれません。

Select → Selection
として使えます。

Q複数の同じフォーマットのファイルを新しいブックで一つのシートにまとめる方法

仕事で、各部署から送られてきた、同じフォーマットのファイル(シート1にのみデータ有)が50個近くあります。
それを新しいブックで一つのシートにまとめなくてはいけません。
地道にコピペするのは時間がかかるのでマクロで処理を行いたいと思います。
マクロでの処理方法ご存知の方、処理方法の載っているサイトをご存知の方、もしくはマクロより簡単な方法がありましたら教えてください。

あと、逆に一つのシートをいくつかのファイルに振り分けていく方法もご存知でしたら教えて下さい。
よろしくお願いします。

Aベストアンサー

すみません。質問を勘違いしていました。
>新しいブックで一つのシートにまとめなくてはいけません
でしたね。
Sub Sample1()
Dim buf As String, i As Long
Dim j
buf = Dir(Sheets("Sheet1").Range("A1").Value & "\*.xls")
Do While buf <> ""
Workbooks.Open Worksheets("Sheet1").Range("A1").Value & "\" & buf
Sheets("Sheet1").Range("A1:J1000").Copy
ThisWorkbook.Activate
Range("A65536").End(xlUp).Offset(1, 0).Select
ActiveSheet.Paste
Workbooks(buf).Activate
Application.CutCopyMode = False
Workbooks(buf).Close SaveChanges:=False
buf = Dir()
Loop
End Sub
で試してみてください。使い方などは
http://oshiete1.goo.ne.jp/qa4225063.html
を参照してみてください。同じ質問があったので気がつきました。

すみません。質問を勘違いしていました。
>新しいブックで一つのシートにまとめなくてはいけません
でしたね。
Sub Sample1()
Dim buf As String, i As Long
Dim j
buf = Dir(Sheets("Sheet1").Range("A1").Value & "\*.xls")
Do While buf <> ""
Workbooks.Open Worksheets("Sheet1").Range("A1").Value & "\" & buf
Sheets("Sheet1").Range("A1:J1000").Copy
ThisWorkbook.Activate
Range("A65536").End(xlUp).Offset(1, 0).Select
ActiveSheet.Paste
Workbooks(buf).Activate
Application.CutCop...続きを読む

Q指定のWORKBOOKを前面表示する方法(エクセル:VBA)

いつもお世話になっております。
エクセルにて処理が終了した時点で、VBAを使い自動的にメールを送るマクロを組みました。しかし、ユーザーからのリクエストにより、自動送信する前にメール内容を確認したいとのことで、一度このメール内容でOKかどうか聞いてから、送信するように書き換えました。そのMsgBoxは当然エクセル上に現れるのですが、特にシングルディスプレイユーザーの場合、送信用のメールが前面に出てしまい、エクセル上に表示されたMsgBoxに気が付かない人もいますので、送信用メールが作成されたら、エクセルを前面に出してMsgBoxの指示に従わせたいのですが、どう書けばいいのか分かりません。とりあえず、私がトライしてみた文字ールは下記のとおりですが、エクセルは前面には出ません(ただし、エクセルプログラム全体が点滅?しますが)。
~前略~

With myMail
.To = "abc@xxxxx.com"
.Cc = "123@xxxxx.com"
.Subject = Filename '指定済みです
.Body = strBody '指定済みです
.display '.sendの代わりにいったんここで表示させました
End With

Windows("XYZ.xls").Activate 'このワークブックで作業をしてます。全面にはでてきません。

mymsg = MsgBox("このメール内容で送信してもよろしいですか?"~中略~,vbYesNo + vbQuestion, "送信確認")
If mymsg = 6 Then
myMail.send

~後略~

いつもお世話になっております。
エクセルにて処理が終了した時点で、VBAを使い自動的にメールを送るマクロを組みました。しかし、ユーザーからのリクエストにより、自動送信する前にメール内容を確認したいとのことで、一度このメール内容でOKかどうか聞いてから、送信するように書き換えました。そのMsgBoxは当然エクセル上に現れるのですが、特にシングルディスプレイユーザーの場合、送信用のメールが前面に出てしまい、エクセル上に表示されたMsgBoxに気が付かない人もいますので、送信用メールが作成された...続きを読む

Aベストアンサー

Windows("XYZ.xls").Activate
のところに
VBA.AppActivate Excel.Application.Caption
を追加してみてください。

QEXCELにcsv形式の外部データを取り込む際にカンマ区切りで取り込も

EXCELにcsv形式の外部データを取り込む際にカンマ区切りで取り込もうとした場合、csvデータの同一セル内に改行データがあると、ずれて表示されてしまいます。
改行を取り除くのはclean関数があることは知っていますが、マクロを利用して、EXCELのデータ→外部データの取り込みの選択だけで取り込む方法はないでしょうか?ご教示ください。

Aベストアンサー

Sub try()
  Dim WRK As String '一時作業ファイル名。削除するので既存ファイル名と重複させないように。
  Dim buf As String
  Dim tmp As String
  Dim n  As Long
  Dim f

  '読込みファイルを選択
  f = Application.GetOpenFilename("csv,*.csv")
  If VarType(f) = vbBoolean Then Exit Sub
  '作業ファイル名設定
  WRK = Application.DefaultFilePath & "\temporary.csv"
  '読込みファイルOpen
  n = FreeFile
  Open f For Input As #n
  buf = StrConv(InputB(LOF(n), #n), vbUnicode)
  Close #n
  '置換(セル内改行を半角スペースに)
  With CreateObject("VBScript.RegExp")
    .Global = True
    .Pattern = "([^\r])(\n+)"
    buf = .Replace(buf, "$1 ")
  End With
  '作業ファイルOpen
  n = FreeFile
  Open WRK For Output As #n
  Print #n, buf
  Close #n
  '[外部データの取り込み]
  With Sheets.Add
    With .QueryTables.Add(Connection:="TEXT;" & WRK, _
               Destination:=.Range("A1"))
      .AdjustColumnWidth = False
      .TextFileParseType = xlDelimited
      .TextFileTextQualifier = xlTextQualifierDoubleQuote
      .TextFileCommaDelimiter = True
      .Refresh BackgroundQuery:=False
      .Delete
    End With
  End With
  '作業ファイル削除
  Kill WRK
End Sub

Excelで作成したcsvファイルで、セル内改行が含まれている場合は上記で読み込めるはずです。
そのcsvファイルをテキストエディタで編集してしまった場合は、うまくいかなくなるかもしれません。

'[外部データの取り込み]...以降、 Kill WRK までのコードは、無くても構いません。
取り込み前にセル内改行を置換してしまえば、
あとは手作業ででも[外部データの取り込み]ができます。

Sub try()
  Dim WRK As String '一時作業ファイル名。削除するので既存ファイル名と重複させないように。
  Dim buf As String
  Dim tmp As String
  Dim n  As Long
  Dim f

  '読込みファイルを選択
  f = Application.GetOpenFilename("csv,*.csv")
  If VarType(f) = vbBoolean Then Exit Sub
  '作業ファイル名設定
  WRK = Application.DefaultFilePath & "\temporary.csv"
  '読込みファイルOpen
  n = FreeFile
  Open f For Input As #n
  buf = StrConv(InputB(LOF(n),...続きを読む

Qスペースを使わず文字位置を揃える方法

素人な者で大変申し訳ありません
以下のように、複数行の文字位置を揃えるタグはどうなるのでしょうか?
(下の例は揃っていませんが・・・)

1.あ        :ABC
2.abc       :ABC
3.あいう      :ABC
4、えお       :ABC

のように、空白部にスペースを使わずに文字位置を揃える方法です
ワードなどの「tabキー」の役割をするタグなんてありますか?

ご教示の程、宜しくお願い致します

以上

Aベストアンサー

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(Li)、原子量6.941、リチウムイオン電池</dd>
</dl>

<h3>元素</h3>
<ol class="periodic table">
<li><span class="element">水素</span>元素記号(H)、原子量1.008、酸素と共に水をくつる。</li>
<li><span class="element">ヘリウム</span>元素記号(He)、原子量4.003、不活性ガス</li>
<li><span class="element">リチウム</span>元素記号(Li)、原子量6.941、リチウムイオン電池</li>
</ol>

これに対して、スタイルシートを次のように書いたりします。
dl.periodic.table{counter-reset: atomicNum 0;padding-left:2em;}
dl.periodic.table dt{float:left;font-weight:bold;}
dl.periodic.table dt:before{
content: counter(atomicNum) ". ";
counter-increment: atomicNum;
}
dl.periodic.table dd{margin-left:7em;}
dl.periodic.table dd:before{content:": ";}

ol.periodic.table span.element{float:left;width:7em;position:relative;font-weight:bold;}
ol.periodic.table span.element:before{content:": ";position:absolute;right:0.5em;}

★他にどのようにマークアップされていても、用語とその説明がが区別できるようにマークアップされていれば、デザインはできます。
★デザインのためにDIVやSAPNを追加しているわけではありません。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』ものです。デザインのために書いてしまうと、デザインのためにtableを使ったのと大差ありません。
 HTML5では、
※DIVやSPANは他に適した要素がないときのための最後の手段
※文書構造を示すため
 となります。

 これは、No.がある序列リストですか?あるいは、用語とその説明のようなものでしょうか?
 HTMLは、その文書構造を記述するだけですので、それにしたがってマークアップすれば良いです。
[例][用語とその説明のようなもの]のようですから定義リストでマークアップしてみましょう。
<h3>元素</h3>
<dl class="periodic table">
<dt>水素</dt>
<dd>元素記号(H)、原子量1.008、酸素と共に水をくつる。</dd>
<dt>ヘリウム</dt>
<dd>元素記号(He)、原子量4.003、不活性ガス</dd>
<dt>リチウム</dt>
<dd>元素記号(L...続きを読む


人気Q&Aランキング