ホームページ作成のプログラム言語について

2011/06/30 12:36

このQ&Aのポイント

ホームページ作成において、言葉を表示する際に特定の位置に配置する方法に関して質問があります。
現在は文字位置をずらすことで対応しているが、バランスが悪く野暮ったくなってしまっている。
よりスマートでバランスの取れた方法を教えてほしい。

wakakusa01
お礼率43% (280/642)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

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

ベストアンサー

neko-ten
ベストアンサー率55% (1287/2335)

2011/06/30 12:58 回答No.2

HTMLはプログラムじゃないっす　ってのはおいといて・・・基本的にそういったデザインにかかわることはスタイルシート使うわけです。 marginとかpaddingって要素ありますからぬ。 spanでstyle指定してるわけですから、そこに各スタイル入れていけばいいんでないかい？ fontもstrongも推奨されませんし。 <span style="color:#993300;margin-left:20px;font-size:1.3em;font-weight:bold">なにかのみだし</span> みたいな感じでできないスかね。

質問者

お礼 2011/07/12 11:10

neko-tenさま素人に分かりやすい解説有り難うございます。おかげでスッキリしました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/06/30 17:39 回答No.4

一度、仕様書( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/cover.html )を通読されることを強くお勧めします。　HTMLは、Hyper Text Markup Languageの略で、文書をその要素(Element)で組み立てられているかという構造にしたがって、それがその文書でどういう要素(Element)であるかをマークアップする方法です。　見出しはh1～h2、　その意味で、fontは非推奨(著者は使わないでほしい--ブラウザは対応しなければなせない)代表的な要素で、今は使いません。もちろん、spanも意味があってこそ使うのです。　今回は、今日のエピソードと言う「完結した記事」ですから、 <body> <h1>サンプル</h1> <div class="article"> <h2>今日のエピソード</h2> <p>今日は河口湖に行きました。</p> </div> <div class="article"> <h2>昨日のエピソード</h2> <p>昨日は家族と山中湖に行きました。</p> </div> </body> </html> -------以上HTML4.01 <article> 　<h2>今日のエピソード</h2> 　<p>今日は河口湖に行きました。</p> </article> ------以上HTML5---まだ時期尚早です!! と言うふうにマークアップします。　その上で、見出しと本文を期待したように表示させたいなら div.article{ position:relative; } div.article h2{ width:10em; float:left; padding:3em; } とします。 ★HTMLはどのように表示するかではなく、文書構造をマークアップする。 ★CSSはそれをどのように表示するかを決める。下記は、 The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) を合格します。 <!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 name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css">  </style> </head> <body> <h1>サンプル</h1> <div class="article"> <h2>今日のエピソード</h2> <p>今日は河口湖に行きました。</p> </div> <div class="article"> <h2>昨日のエピソード</h2> <p>昨日は家族と山中湖に行きました。</p> </div> </body> </html>

ログインすると、全ての回答が全文表示されます。

kok2
ベストアンサー率10% (1/10)

2011/06/30 13:30 回答No.3

見栄えはcssの使用を推奨(html5では知らないですが) marginもしくはpadding http://css.uka-p.com/reference/ref2/margin-left.html http://css.uka-p.com/reference/ref2/padding-left.html 直接記入の参考 http://css.uka-p.com/basic/tag.html デザインが大幅に崩れる場合はIEのバグなので最大の幅を変更しなくてはいけませんが全体のソースがないのでわからないので css　バグ　でググって下さい ccsバグ参考 http://css-bug.jp/win/ie/ 適当な解答 <p style="padding-left:100px; font-style:italic; font-size:30px; color: #993300;">今日のエピソード</p> これを改造してご利用ください文字カラー・サイズ、各種字体や文字強調等もstyleの中に入れられますが書くのが面倒なので調べて頑張ってくださいまたcssは複数箇所に使う場合は外部記述推奨ですまた<center>利用でもcssを使えばページ全体を左右に移動できます htmlはあくまで記述の言語、cssは装飾と認識してください(ただしXHTMLまで)

質問者

お礼 2011/07/12 11:14

kok2さま ukaさんのＣＳＳレイアウト実践講座はわかりやすいので、活用させてもらいます。有り難うございます。

ログインすると、全ての回答が全文表示されます。

t_ohta
ベストアンサー率38% (5320/13881)

2011/06/30 12:53 回答No.1

<span style="color: #993300; margin-left:10em;"><font size="3"><strong> 今日のエピソード </strong></font></span> という感じでどうでしょう。もっときれいに書くなら <span style="color: #993300; margin-left:10em; font-weight:bold; font-size:15px;">今日のエピソード</span> といった感じで、全てスタイルシートで指定するのがベターですね。

ログインすると、全ての回答が全文表示されます。