HTML文整形にお困りですか?タグソースを読みやすく配置する方法とは?

このQ&Aのポイント
  • タグソース文配置がバラバラになってしまい、読みにくくなっていませんか?HTML文を整形し、行分けや空白行を追加する方法をご紹介します。
  • ソースエディターEmEditorでもタグソース文を整形しても、タグの配置が一定ではなく、行が空いたりスペースがバラバラになることがあります。他の人の情報に恵まれず、普通なのか異常なのかわからない場合は、アドバイスを求めることをおすすめします。
  • タグソースの配置を整えるために、行位置や行頭マージンを追加すると、タグの関係がわかりやすくなります。ハッシュタグを使って、HTML文整形のアドバイスをもらいましょう。
回答を見る
  • ベストアンサー

タグソース、エディター配置整形した文章がバラバラに

いつもこんなもんだとテキトーにしてきましたが・・・、 一度HTML文として読みやすく 行分けや空白行など整形したタグソース文配置が、 開ける都度、(表示できる文としては間違ってはいませんが)とても読みにくく位置バラバラになります。 見映えデザイン変更時などに、つい簡便にmoziila composer系whsiwyg ソフトとか起こしちゃうので、(主にソースエディターEmEditor (pro版)で整形してますが)、完全に一本使いではなく併用なので・・・ whsiwyg系でいじっちゃうと当然ソースを勝手に成型するので、まーそういうもんだと割り切っていましたが・・・ ◆どうも、ソースエディターEmEditorでも、タグソース文を行位置や行頭マージンをとってタグ関係わかりみやすく整形しておいても、(一度もwhsiwyg系に渡したおぼえもないのに) タグ文配置が一定の位置固定性を保たず読みにくい配置でやたら行が空いたりスペースバラバラになってしまいます。 スタンドアローン環境なので他の人の様子、情報に恵まれないので、それが普通なのか異常なのかよくわかりません。 皆さんのアドバイスをぜひよろしくお願いいたします。 (なおCSSは別link relにしないで、まーいいやで、その場所限りでタグ加えている程度の編集で。。 ので<font>デザイン系タグはまだあちこち散在します^^;恥、)

  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

私は基本EmEditorで・・  ⇒ブログテンプレート作り CSSで困ったことが・・・ - ホームページ作成ソフト - 教えて!goo( http://okwave.jp/qa/q8455241.html )  の回答のようにHTML書きます。ブロック要素こどにタブひとつ・・短い<p></p>のように一目で見渡せる物は一行    <p>ここは短い</p>    <p>     ここ長い・・<span>行内要素</span>・・・    </p> とか統一しています。  それが、書き変わる事はありません。

odasaga09
質問者

お礼

いつもアドバイスありがとうございます  EmEditor上で、ORUKA1951さま表示例の↓   <p>ここは短い</p>   <p>     ここ長い・・<span>行内要素</span>・・・   </p> が、例えば↓          <p>ここは   短い</p>       ここ長い・・<sp an>行内     要素</span>・・・ </p> ・・・というふうな一定性が理解できないバラケ・改行具合になってしまうのですが・・ 折り返し桁指定とかからんでいるようで、どうも副作用がわかりません。 折り返し指定しなければ当然 <span>行内要素</span>・・・ の1行が延々ウィンドウ最大サイズ表示幅1900pix以上つづいて、見渡すに横スクロールしなければいけなくなります。   どうもわからないのが、折り返しの位置が行やソースでアトランダムに発生してしまって、その折り返し部分で例えば【内容テキスト文】が改行されていると、そこがスペースになってweb表示上一文字空いて表示されるのです・・ その行末・改行マーク「↓」位置delすると後ろの行がせりあがってきますがかなりの空白部分を伴っていて、文字と文字を連続させるのにdelしつづけ整形が必要になります。 CSSの問題でなく、ソーズを書き込んでいる表示上での見た目の問題です。 一度コンポーザー系で自動生成された過程を踏むと、なにかEmEditorソース表示行間などに目に見えないブラックホール的なものが組み込まれて潜んでしまっているような感なのです・・・

関連するQ&A

  • 自動整形の優れたエディタ

    あるテキストエディタで文書を作成することが多いのですが: 自動整形を使うとき、段落の文字数によっては数文字だけ次の行に移ってしまう、 ということがよくありますよね。 これが見苦しく思えて仕方がありません。 次の行に残る文字数(当然文字数は設定可能)が少ない場合に、折り返し位置をはみ 出してでも前の行にくっつけてくれる整形機能が欲しいのです(できるだけ自動で)。 そんな機能をサポートしているテキストエディタはありませんでしょうか? シェアウェアでも結構です。どうか紹介して下さい。

  • mozilla系wysiwygのソース編集について

    また、使い勝手情報を教えてくださいマセm(__)m 一時期ソース整形にこだわりましたが、ここでいただいた情報・アドバイスも追試・加味して、 現在常用環境は、 ◆最終 EmEditorソース編集併用が主です。 が、先にwysiwyg (10年選手・ホムクリ6・過去の遺物?だけどwysiwygとソース画面が同時スプリット表示で、カーソル箇所相互変更が反映される使い勝手良さと、CSSとソース整形の良さですでに基本機能原型は完備している)で、おおまかデザインしています。 ・・とはいえ、不都合も多々あり、いつも最善ツールも模索中です。 ◆特に黎明期・前世紀からNetscape Composerを多用してた嗜好で SaeMonkey,Kompozer,Bluedoffin 等(一長一短)使い分け 試行しています。 ・・・が、どれも EmEditorほかのソース編集ソフト別立てでソース側は編集上書きしても、上記wysiwygでは反映リロード機能の操作がわかりません・・・ ◆SeaMokeyはブラウザ込みなので、view_source.editor.path; のオプションで即ソース編集EmEditorを組み込めていますが、wysiwyg 画面の即リロード反映には至りません。。 (ホムクリ6は、別立てEmEditorソース変更の都度、リロード変更上書きを求めてきて即反映されるので、これゆえ手放せないのですが・・) フリーComposer系とソース編集専用ソフト併用の、なにかうまい使いかって手法操作をされていたらぜひご教示くださいませm(__)m

  • テキストエディタとHTML

     こんにちは。テキストエディタのTeraPadを使っています。これでHTMLを編集するとき、pタグを使うときなのですが、ソースを見やすくするために文章の行頭を揃えるためにTABを挿入しているのですが、そうすると、ブラウザで表示したとき、TABを挟んだ文字間に半角スペースのようなスペースが入っているように表示されてしまいます。  このスペースが入っているように表示されるのを、表示されないように、つまり、文字間を詰めて表示するためにはどうしたらよいでしょうか。  よろしくお願い致します。

  • メルマガ作成用テキストエディタ

    メルマガ作成用テキストエディタを探してます。 フリーウェアがベストですが、シェアウェアでもかまいません。 求める必須機能は、 1.1行あたりの指定文字で禁則を考慮しながら自動的に改行コードを挿入(Becky!のエディタのような機能) 2.自動的に行頭に空文字を挿入した上での編集(秀丸の自動インデントのような機能、ただし、自動改行の際もインデントして欲しい) 以上2点。 10年近くテキストエディタは秀丸を愛用しており、上記1.の機能さえあれば文句はないのですが・・。 マクロを使用して、指定文字数で自動改行、行頭の空文字挿入はできますが、基本的には、できあがったテキストの整形としてしか使えませんので、例えば、整形をした後、再び文章を変更したいときなど手作業による編集か、もしくは、整形を元に戻した後、文章を変更し、その後、再び整形という作業になってしまいます。 エディタそのものの機能として上記の機能があればよいのですが・・。

  • 携帯サイト tableタグを使わないで配置

    携帯サイトでバランスよく下記のように(画像一枚に対して2,3行の説明文)配置したいです 画   説明文あああああああああああ。 像   あああああああああああああ。 画   説明文いいいいいいいいいいい。 像   いいいいいいいい。 tableタグを使うと崩れる機種もあるのでtableタグを使わず綺麗に配置する方法ございましたらご教授下さい。よろしくお願いします。

  • 条件を満たすテキストエディタを探しています

    多くの「文章の折り返し機能」を持つテキストエディタは、折り返された文が行の先頭から始まってしまうのが一般的ですよね。 そうではなくて、折り返された文の一部の左端を、文の先頭がインデントされた位置(文の先頭の位置)に補正して表示してくれるようなテキストエディタを探しています。 できれば様々なプログラミング言語の色分けに対応できるとうれしいです。 Microsoftのwordやpowerpointのようなインデント機能や箇条書きに似ている機能ですが、word等のように特殊な文章形式で保存するものを求めているわけではなく、表示する際にこのように表示してくれる純粋なテキストエディタを求めています。

  • xhtml+css box内の文字を縦で中央配置したい

    css初心者です。自分の知識がないのか、そもそも出来ないことなのか わかっていないですが、よろしくお願いします。 テキストをdivタグで囲んでdiv classで高さ60pxのboxにしました。 (↑的確な表現なのか自信がありません;) そのbox内で、 テキストを縦位置中央にしたかったのですが、方法が見つからず、 応急的に文字の余白の高さ(?)を60にして中央にもってきました。 しかしこの方法ではテキストが2行になったときに、 2行目がさらに60px下へきて、boxが変形してしまいます。 2行でも縦位置で中央に配置できるような方法はありますか?

    • ベストアンサー
    • HTML
  • テキスト(HTML)エディタを探しています

    軽快で直感的に使用できるテキスト(HTML)エディタを探しています。 Windows付属のメモ帳に以下の機能を追加したようなものを希望しています。 ・[必須]行番号を表示 ・[必須]スペースが判別できる(記号などがスペース部分に表示される) ・[必須]タグのみカラー表示される(タグとテキストが見分けやすければカラー表示にこだわらない) ・[必須]タグは小文字に統一されている(属性や値などもすべて小文字) ・[必須]タグを手動で編集できる ・ブラウザ(Internet Explorer)のソースを表示できる あまり多機能なものは必要としません。メモ帳を使う感覚で利用できることが重要です。 都合のいいだけの質問になってしまいましたが、よろしくお願いします。 使用環境:Windows XP Internet Explorer 6.0

  • ショートカットキーで文章をペーストできるソフト

    例えば、住所氏名電話番号の改行も含めた数行とか、いつもメールに挨拶みたいに書く定型文とか、よく使う文章のフォームとか、HTMLの整形済みのテーブルのかたまりとか、入力するソフトはいろいろだけど同じ条件で定型文をスピーディに入力できるソフトがあればなあと思っています。 つまり、テキストエディターでもイラストレータでもメーラーでもブラウザでもアプリケーションに関係なく、ctrl+shift+F1などのショートカットで数行の文章になった定型文がポンと出ると。その文章やショートカットは自由に設定できる、といったような常駐ソフトです。 そのようなソフトはありますでしょうか? できればフリーソフトだとありがたいです。 よろしくお願いします。

  • Accessでの文書整形について

    学校で、成績表など特殊なレポートを出力することが多いのですが、 (1)たとえばWordのように、テキストボックス中にインデントを設定したり、1行の字数を設定したりということは不可能なのでしょうか? 例えば、個人成績表をデータベースから抽出し印刷する際に、備考として複数行にまたがる箇条書きを埋め込みたいとします。その際、「ぶら下げインデント」のような設定をしたいということです。 (2)Excelのように、高さのある横書き枠内で「縦位置の調整」は可能でしょうか。枠内の上下に余白を持たせ、縦の中央配置をしたいのですが。 以上のような文書整形を考える場合、レポートではなくWordの差込印刷のほうがいいのでしょうか? なにぶん、状況自体が特殊なのか、なかなか参考になるものも見つからないので、、、よろしくお願いします。