プロが教えるわが家の防犯対策術！

ホームページ作成のプログラム言語

解決済

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

ブログを作成中の初心者です。
言葉を表示するのに、例えば、
<span style="color: #993300;"><font size="3"><strong> 今 日 の エ ピ ソ ー ド
</strong></font></span>
となりますが、
「今日のエピソード」を文頭でなく、数文字右にずらして書く場合の何か簡単なコマンドはありませんか。中央にもってくるのはバランスが悪いので、<center>は使えません。

現在は、<span style="color: #993300;"><font size="3"><strong> 今 日 の エ ピ ソ ー ド</strong></font></span>
と野暮ったく文字位置をずらしています。

よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.2ベストアンサー

  • 回答者： neko-ten
  • 回答日時：

HTMLはプログラムじゃないっす　ってのはおいといて・・・



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

neko-tenさま

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

通報する
お礼日時：2011/07/12 11:10

No.4

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

一度、仕様書(

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )を通読されることを強くお勧めします。
　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. … )
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 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">
<!--
div.article{
position:relative;
border:solid gray 1px;
}
div.article h2{
margin:1ex 0;
width:auto;
float:left;
padding-left:3em;
padding-right:0.5em;
}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<div class="article">
<h2>今日のエピソード</h2><!-- 文字数に合わせる -->
<p>今日は河口湖に行きました。</p>
</div>
<div class="article">
<h2>昨日のエピソード</h2><!-- 文字数に合わせる -->
<p>昨日は家族と山中湖に行きました。</p>
</div>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： kok2
  • 回答日時：

見栄えはcssの使用を推奨(html5では知らないですが)



marginもしくはpadding
http://css.uka-p.com/reference/ref2/margin-left. …
http://css.uka-p.com/reference/ref2/padding-left …

直接記入の参考
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まで)
    • good
    • 0
    • 件
通報する
この回答へのお礼

kok2さま

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

通報する
お礼日時：2011/07/12 11:14

No.1

  • 回答者： t_ohta
  • 回答日時：

<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>
といった感じで、全てスタイルシートで指定するのがベターですね。
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報