ホームページビルダー13でホームページを作成しているのですが、ビルダー上では画面サイズを940×1200で作成していているまして、横に長い画像を使用できる画面いっぱいまで伸ばしているのですが、webブラウザーで確認すると右にかなりの余白ができてしまう状態になります。私の理想としては見る側がどんなサイズの画面でもきちんと中央を基本にしたいと思っています。
文章だと伝えづらいので、目標イメージのサイトを書きに載せました。
そのサイトを参考にいうと、トップページの家が写ってる画像が私の場合左に寄っていて、右側に四分の一程空白ができてしまうのです。
作成ページ右いっぱいに画像を広げても空いてしまいます。
どういう処理をしたら下記サイトのようにキレイにレイアウトできるのでしょうか?どなたかわかるかたいらっしゃいましたら教えてもらえると助かります。よろしくお願いします。
No.4ベストアンサー
- 回答日時:
どこでも配置モードで作ると、style属性として書き出されるから、ソースが汚いといわれるんじゃないでしょうか。
外部スタイルシートに作り直せば、HTMLタグや構造そのものは比較的綺麗だと思います。
で本題のセンタリング(中央寄せ)の方法ですが、
たぶん、標準の機能(ダイアログやボタン)では作れないかもしれませんが、
以下のようにすれば、どこでも配置モードのままでも可能です。
ホームページビルダーのデザインビューではセンタリングされないかも知れません。
・センタリングしたいレイヤーを選択して、スタイルシートの編集ダイアログを表示
・位置指定の左(left)を50%に指定する
・左マージン(margin-left)を、幅の半分の値をマイナスで指定する
(幅が400pxの場合は、左マージンが-200px)
これを保存して、ブラウザで見てみてください。
HTMLコードとスタイルシートはだいたいこうなると思います。
<div style="position:absolute; top: 100px; left: 50%;
margin-left: -200px; width: 400px; height: 300px;
border: 1px solid #999999">
<p>文章など</p>
</div>
お返事遅くなり失礼しました。
早速やってみましたができました。理解するのに時間がかかりましたが、なんとなく理解できたと思います。
本当にありがとうございます。×2
No.3
- 回答日時:
>でも難しいんですよね、標準モードでレイアウトを整えるのが。
HP全体を一つのテーブルと考えてにてはいかがですか?
その中を幾つものマスで仕切ってリンクを入れたりとか
テーブルの中にテーブルを入れるのもアリだと思います。
一度、白紙に大まかなデッサンを描いてみて
それをマスで仕切ってみてはいかがでしょうか?
No.2
- 回答日時:
「どこでも配置モード」の場合、それぞれのオブジェクトを
ブラウザ左上から何ピクセルの位置に置く様に指定してしまいますので
ブラウザのサイズに合わせて中央に置くのはできません。
「どこでも配置モード」はブラウザに依ってはオブジェクトが重なって
表示されてしまいますのでお勧めできませんよ。
そうなんですか。何となく噂には聞いていたのですが結構な頻度で、そういう現象が起こるもんなんでしょうかね?ソースも汚くなるというし。(ちなみに標準モードで作るとソースはきれいなのかな?)
でも難しいんですよね、標準モードでレイアウトを整えるのが。
例えば上記のサイトと同様のものなんかも標準モードで作れるものなんですかね?表を使った方がやりやすいのかなと思いやってみたのですが、なかなか思うようにいかなくて、どこでも配置モードを使ってました。何か参考になるサイトをご存知ですしたら教えてもらえたらと思います。夜遅くにありがとうございます。
No.1
- 回答日時:
ビルダーの編集画面の書式ツールバー(フォントのサイズや色などのアイコンがある所)の「中央揃え」をクリックしてみましたか?
(画像をクリックして赤い枠で囲まれた状態にしておいて下さい。)
この回答への補足
すみません、参考サイトを載せるのを忘れました。
http://www.atelier-m4.com/
やってみたのですが、画像が赤い枠で囲まれないんですよね。
「どこでも配置モード」でやってるからでしょうか?
確か標準モードだと赤い枠があったような。
そして画像の上でクリックすると画像サイズを変える隅にポッチのある状態になり、そこで書式でフォントを変更しようとしてもフォント変更ができません。中央揃えもできません。「どこでも配置モード」では限界があるのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- WordPress(ワードプレス) ワードプレスで記事を書くスペースの横幅を広げたいです。 1 2022/09/24 18:16
- Instagram Instagramの投稿を、16:9の画像サイズにして、その画像真ん中の、自分のページを見たときの各 0 2023/08/08 00:17
- その他(映画) 昔の映画の3Dリメイク版。どうやって作るのか? 4 2023/02/16 10:17
- HTML・CSS 依頼したWEBサイトの修正に追加料金がかかる 10 2022/10/24 09:31
- MySQL 「utf8mb4_general_ci」はMAMPでは何に当たりますか? 1 2022/06/02 07:45
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
HPビルダーで中央表示がしたいのですが・・。
ホームページ作成・プログラミング
-
ホームページビルダー21spでお問合せのフォームにある送信ボタン
LANケーブル・USBケーブル
-
ホームページビルダーで、画面を常に中央にもっていくには…
ホームページ作成・プログラミング
-
-
4
ホームページビルダーで画面が小さく全画面表示できない
ホームページ作成・プログラミング
-
5
ホームページビルダーで背景画像がうまくいかない
ホームページ作成・プログラミング
-
6
ホームページビルダーで表の列幅を調整するには
ホームページ作成・プログラミング
-
7
ホームページビルダーで横幅について
ホームページ作成・プログラミング
-
8
ホームページビルダーで画像を挿入した後,元の画像ファイル名を変更できますか?
ホームページ作成・プログラミング
-
9
ホームページビルダーで作成したサイト情報の保存場所は?
ホームページ作成・プログラミング
-
10
ビルダー20 お問合せフォーム フォームの設定について
ホームページ作成・プログラミング
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ワード ヘッダ下部とフッタ上...
-
HPビルダーで中央表示がしたい...
-
VM バーチャルBOXにWindows95を...
-
ユウロピウム
-
一太郎13でカーソルがタテか...
-
windows media player12 ジャケ...
-
ホームページビルダー 文字の...
-
Illustrator9でCMYKファイルが...
-
まいとーくFAXソフトでアドレス...
-
ホームページの画像が重なる場...
-
Google Earthをインストールし...
-
「秀丸」の上書きオン/オフ切り...
-
フォトショップ エレメンツ5.0...
-
Wordの文字削除ができない
-
【テプラの使い方で】複数行の...
-
エクセルのグラフ データテー...
-
PhotoShopで任意の色数に減色し...
-
EXCELのコンボボックス 配置の...
-
Excelのヘッダー表示を変数で指...
-
一太郎のレイアウト枠がずれて...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ワード ヘッダ下部とフッタ上...
-
一太郎13でカーソルがタテか...
-
HPビルダーで中央表示がしたい...
-
VM バーチャルBOXにWindows95を...
-
会計ソフトfreeeで農業モードを...
-
AdobeReader閲覧モードで開きたい
-
Blenderのプロポーショナル編集...
-
ホームページ ビルダー 文字...
-
windows media player12 ジャケ...
-
TeXでのイタリック表記+下付き...
-
ユウロピウム
-
Illustrator9でCMYKファイルが...
-
ホームページビルダー作成にて...
-
ホームページビルダー プレビ...
-
Google Earthをインストールし...
-
ホームページビルダー7で表を...
-
PhotoshopやIllustrator使用中...
-
EPS画像をイラストレーター...
-
CATIA(V5)による解析結果評価...
-
「秀丸」の上書きオン/オフ切り...
おすすめ情報