dポイントプレゼントキャンペーン実施中！

ホームページビルダー　空白の入れ方

解決済

  • 質問者：okinawaboy
  • 質問日時：
  • 回答数：4件

こんばんわ、ホームページビルダー１４の体験版でホームページの作成中なのですが文字の後ろに空白が入らず困ってます。


　　　　　　　　　　ＡＢＣ
　　　　　　　□□□□□□ＡＢＣ
　　　　　　　ＡＢＣ□□□□□□

↑のようにしたいのですが、すべて中央揃えで□は空白です。２段目は出来たのですが３段目のように文字の後ろに空白を入れることが出来ません。
作成中はちゃんと形になっているのですがプレビューで見ると空白が無視されています。

中央揃えにした理由はブラウザで表示させる左に寄ってしまって右側に無駄なスペースが出来てしまったからです。

作成はスタンダードの標準モードです。
ホームページ作成初心者でして分かりやすく教えて頂けないでしょうか？
他に良い方法があればお願いします><

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： naokita
  • 回答日時：

NO.1で回答した者です。

お礼拝見済み。
------------------------
そうですか、それは失礼。　CSSを理解すれば自由に配置できます。
例を挙げておきますので、各種試してお好きな方法で表示しましょう。
その他にも半無限に各組み合わせや微調整も可能だと言う事です。
------------------------
質問者さんの詳しい寸法・幅がわかりませんので、
やりたい事を予想して下記を書いてみましたが・・・

<div style="width: 200px; text-align: center; margin: 0 auto;">
<!-- 　ここの幅　↑↑↑↑を調整すれば良い　 -->
<p style="margin-bottom: 0;">ABC</p>
<p style="text-align: right; margin: 0;">ABC　右</p>
<p style="text-align: left; margin-top: 0;">ABC　左</p>
</div>

<!-- 　もしくは、スペースをパディングで代用　 -->
<p style="margin-bottom: 0;">ABC</p>
<p style="padding-left: 6em; margin: 0;">ABC　右</p>
<p style="padding-right: 100px; margin-top: 0;">ABC　左</p>

------------------------------
テーブルを使うのも美しくない方法です。
どこでもほにゃららモードはやめた方が良いでしょう・・・。
今回答では、直接記述できるようにstyle属性を利用していますが、慣れたらNO.2さんのようにstyle要素か外部ファイルにCSSを記述しましょう。
そうすれば、内部的に美しいいテキストとなります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

こちらの説明ミスで再び回答して頂きありがとうございますm--m

私の試し方が悪いのかと思いますが上の３行は左に寄ってしまいましたが下の３行はブラウザで確認しても中央を基準に左寄り右寄りと私のやりたかった配置になっておりました！！
しかもあんなに苦労していたのに数行の文で出来るんですね。

覚えることがいっぱいありそうですが美しく作る為にがんばります^^
どうもありがとうございました！

通報する
お礼日時：2010/03/17 23:42

No.3

  • 回答者： champ40
  • 回答日時：

表を作るのです。

ツールバーに碁盤の目みたいのがあります。
縦を３行、横は１列で、表の中でどれでもいいですから右クリックして属性の変更（一番下）をクリックして【セル】でセルの幅を設定（とりあえず１００でいいかな）します。列全体に適用にチェックを入れます。【表】でセル内の余白を０にするとすっきりします。枠表示のチェックをはずすか０にすると表は消えます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

今現在、まさにこの方法でとりあえずは作っているところなんです！
見た目はバランスはうまくいっているのですが出来れば何だか納得がいかないんです。
どこでも配置モードで作った物がうまく表示されてくれれば簡単なんですが...

通報する
お礼日時：2010/03/17 22:35

No.2

  • 回答者： ORUKA1951
  • 回答日時：

間を空けるために、文章として意味のない空白をならべるのはよくありません。


いつも機械が読んだらどう読むかを考えながら作成しましょう。
「スペース、スペース、スペース、スペース、スペース、スペース、スペース、スペース、スペース、ＡＢＣ」
「ＡＢＣ、スペース、スペース、スペース、スペース、スペース、スペース、スペース、スペース、スペース、」
ちゃんと、HTMLで指定しましょう。もし一段落ずつ(行ではない)、左右に振り分けたいなら、
<p class="a">ABC</p>
<p class="b">ABC</p>
<p>ABC</p>
<p class="a">ABC</p>
<p class="b">ABC</p>
<p>ABC</p><p class="a">ABC</p>
<p class="b">ABC</p>
<p>ABC</p>
とすればよい。
最後にHTMLの全文をあげておきますから、参考にしてください。
とっても簡単です。それでいて、スタイルシート部分を書き変えたら全部変わる。

なお、ビルダーのようなWebオーサリングツールを使うときには、テキストで書く人よりもHTMLについては理解しておかなければ、便利さでとんでもないページを作ってしまいます。(特にホームページビルダーはその点では悪評が高い)。もちろん、タグ自体を覚える必要はありませんし、サイト管理や画像処理のための道具
としては便利です。
ホームページ・ビルダー - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC% … )

＞ホームページ作成初心者でして分かりやすく教えて頂けないでしょうか？
　ビルダーはむろん、どのオーサリングツールを使う場合でも、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
　のようなサイトで、基礎だけは身につけてください。結果的にそのほうが上達は格段に速いでしょう。
　そして、作成したページは常に
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )でチェックする癖を身につけましょう。表示されるエラーの説明を読むだけでとても勉強になります。★最後のサンプルもチェックしてあります。★
　CSSのチェックはW3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
＿＿＿＿＿＿＿＿＿＿＿＿＿＿ここからサンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
html,body{
margin:0px;padding:0px;background-color:rgb(200,200,200);
}
body>div{
width:60%;margin-left:auto;
margin-right:auto;background-color:white;padding:10px;
border:none;}
p{text-indent:1em;}
div{ margin:0.5em 1em; border:solid 2px blue;}
/* 配置は下記を参考に書き換えるだけでいかようにもなる。消せばすべて左寄せ */
p.a{text-align:center;}
p.b{text-align:right;}
-->
</style>

</head>
<body>
<div>
<h1>サンプル</h1>
<div>
<p class="a">a)一段落ごとに左・右・中央と表示される。</p>
<p class="b">b)一段落ごとに左・右・中央と表示される。</p>
<p>一段落ごとに左・右・中央と表示される。</p>
<p class="a">a)一段落ごとに左・右・中央と表示される。</p>
<p class="b">b)一段落ごとに左・右・中央と表示される。</p>
<p>一段落ごとに左・右・中央と表示される。</p>
<p class="a">a)一段落ごとに左・右・中央と表示される。</p>
<p class="b">b)一段落ごとに左・右・中央と表示される。</p>
<p>一段落ごとに左・右・中央と表示される。</p></div>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

ブラウザでの見た目だけでなく設計図の部分も綺麗になるようにしたいとは思っております。やはりＨＴＭＬの基礎くらいは必要なようですね^^;
教えて頂いたサイトもこれからじっくり噛み砕いて勉強していきたいと思います。
左に寄せるところは左端じゃなくて端から間隔を空けて左寄りにしたかったのですが私の説明が悪くてすみません...
長いＨＴＭＬの文まで打って頂いてありがとうございました！！

通報する
お礼日時：2010/03/17 22:28

No.1

  • 回答者： naokita
  • 回答日時：

ホームページビルダーの操作はわかりませんが、


HTMLで編集して下さい。出来ますか？
空白スペースを入れるのは、美しくない方法なので、CSSで表示を指定します。
---------------------------------
元々、センター配置になっているのなら以下でOKです。

<p style="margin-bottom: 0;">ABC</p>
<p style="text-align: right; margin: 0;">ABC　右</p>
<p style="text-align: left; margin-top: 0;">ABC　左</p>

行間の調整は、上記　0　の値を例： 12px や 0.5em などで指定すれば良い。

ブレビューでは細かい部分が正しく表示されないかもしれませんが、
正規ファイルをWクリックしてブラウザで表示するとは正しく表示されるはずです。
つまり、一般的にはソフトのプレビューは使わない方が良いと言う事です。
まあ、ブラウザでも違うケースがありますけどね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

教えて頂いた文を入れてみたら中央、右端、左端と並んで表示されました。ブラウザで確認すると確かに画面をフルに使って表示しています。
しかし、私がやりたい事は完全な左端に配置じゃなく左よりで端から間隔を取りたいのです。
私の説明が悪かったようですみません...

通報する
お礼日時：2010/03/17 21:56

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報