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

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

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

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

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

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

  • ベストアンサー
  • neko-ten
  • ベストアンサー率55% (1287/2335)
回答No.2

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

wakakusa01
質問者

お礼

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

その他の回答 (3)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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"> <!-- 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>

  • kok2
  • ベストアンサー率10% (1/10)
回答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まで)

wakakusa01
質問者

お礼

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

  • t_ohta
  • ベストアンサー率38% (5078/13272)
回答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> といった感じで、全てスタイルシートで指定するのがベターですね。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • FC2ブログ文字色の変更時の不具合について

    かれこれ数か月悩んでいます。 わかる方、ご伝授頂けないでしょうか・・・？（；ー；） ＦＣ２ブログをやっています。 文章の色を変えると文字の大きさが一回り小さくなって表示されます。 スマートフォンで見ると大丈夫ですが他のパソコンで見てもやはり小さく表示されてしまいます。（気のせいかもしれませんがフォントの字体も変わる気がします） ちなみに文字の色だけでなく、同時に太字、文字サイズを大きくする作業を行うとプレビューでは上手く表示されているのに実際アップすると文字の大きさが反映されておらず、再び文字のサイズを大きくする作業をしなければ反映されません。 （計２回フォントサイズを大きくするという作業をしなければいけません。） もしかしたら３つの事を同時にする時決まった順序があり、その順序と異なるから反映されないのでしょうか・・・？ ちなみに他の方のＦＣ２ブログを拝見するときちんと表示されています。 この原因は一体何でしょうか？ 参考に文字の(1)色を変えた場合　　(2)文字の色・太さ・大きさを変えた際のスタイルシートはこのように表示されます。 (1)<strong><span style="color:#ff00ff">インタビュ～</span> (2)<span style="font-size:large;"><strong><span style="color:#ff00ff"><span style="font-size:large;">インタビュ～</span></span></strong></span> 昔アメブロをやっていましたが全く問題なくできていました。 何か情報がありましたらどうか教えて下さい！よろしくお願い致します。。。（；―；）

  • HPの電話番号表示について

    皆様よろしくお願いします。 HPに電話番号を記載し、その番号をタップすると電話がかかるようにする方法についてです。 文章部分のHTMLは・・・ <p><strong><span style="font-size: 18px;">青空市場&nbsp;</span></strong></p> <p>■住所：愛知県</p> <p><span style="font-size: 15px;">■TEL：000-0000-0000</span></p> となっています。 調べるとここに・・・ <a href="tel:000-0000-0000">TEL000-0000-0000</a> これをいれるみたいなのですが、どこにどんなふうに入れればいいのでしょうか？ よろしくお願いいたします。

  • リンクにカーソルを合わせてもカーソルが変化しません

    ＨＰを作成しているのですが、メニューを作成していて、メニューにカーソルを合わせてもpointer(手のマーク)にならず、テキストのときに出るIに似たアイコンのままになってしまいます。(リンクは問題なく飛べるのですが、分かりづらいです) メニューのボタンは素材屋さんのサイトにかいてあったソースをいただきましたので画像ではなく、全てソースから出来ています。 いろいろ調べて実践したのですがなかなかカーソルが変わりません＞＜ どうしたら変わりますか？ちなみにメニューのソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>メニュー</title> </head> <p align="center"> <button style="BORDER-LEFT-COLOR: #ff80c0; BACKGROUND: #ffffff; BORDER-BOTTOM-COLOR: #ff80c0; WIDTH: 97px; BORDER-TOP-STYLE: solid; BORDER-TOP-COLOR: #ff80c0; BORDER-RIGHT-STYLE: solid; BORDER-LEFT-STYLE: solid; HEIGHT: 52px; BORDER-RIGHT-COLOR: #ff80c0; BORDER-BOTTOM-STYLE: solid; type: " onclick="window.open('top_page.html','トップページ','')" button?><span style="FONT-SIZE: 23px; FILTER: dropshadow(color=#ffd5d5,offX =5,offY=5); WIDTH: 90px; COLOR: #74faf3; LINE-HEIGHT: 2; FONT-FAMILY: HGP創英角ポップ体; HEIGHT: 46px"> <p align="center">TOP</p> <p align="center">&nbsp;</p></span></button>&nbsp;&nbsp;&nbsp;</a>&nbsp;&nbsp;&nbsp;&nbsp; <font size="5"><strong><em><font size="5"><strong><em><u></u></em></strong></font></em></strong></font></p> </body> </html> です。途中にある「トップページ」というのはtarget先です。 どなたか分かる人お願いします！！

  • 訪問済みリンク色を設定したいが難易度高いです

    以下のHTMLのハイパーリンクになってる文字列に対し、「訪問済みリンク色（a:visited）」だけ新たに設定したいです。 現在はすべて文字色は赤で、訪問済みリンクであっても色は赤のままです。それを訪問済みリンクなら青になるようにしたいです。 ブラウザの設定で変更する方法ではなく、CSSで変更したいです。 <body>タグの中は「一切いじれない状態」なので、<body>の外部に新たにcssを書き、そこから色を変更したいですが、ハイパーリンクの文字列は、タグの挟まれ方の種類が以下のとおり(5)種類あります・・・ <a>タグは、<a href="http://*" class="title">と<a href="http://*"> の(2)種類、 他にも<span>や<strong>の位置が違ってたりしますが、<body>の中はいじらずに訪問済みリンク色だけ変更することは可能でしょうか？ <body> <div class="blogbody"> <div class="text"> ■文字列(1) <li><span style="color: red"><a href="http://*"><strong><span style="color: red">文字列(1)</span></strong></a><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(2) <li><a href="http://*" class="title"><strong><span style="color: red">文字列(2)</span></strong></a>DATE</li> ■文字列(3) <li><a href="http://*" class="title"><span style="color: red"><strong>文字列(3)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(4) <li><a href="http://*"><span style="color: red"><strong>文字列(4)</strong></span></a><span style="color: red"><strong>★</strong></span><span style="color: black">DATE</span></li> ■文字列(5) <li><a href="http://*"><strong><span style="color: red">文字列(5)</span></strong></a>DATE</li> </div> </div> </body>

    • ベストアンサー
    • HTML
  • ワードプレス

    ワードプレス初心者です。 記事内ジャンプタグが何か間違っているようで、リンクが４０４エラーになります。 使っているのはSImplicity2です。 例 <span style="font-size: 16px;"><a href="a#08">入院準備</a></span> リンク先 <h3 id="a08"><span style="color: #800080; font-size: 18px;"><strong><em>入院準備</em></strong></span></h3> 何が間違っているでしょうか？ ご教示くださいませ。

    • ベストアンサー
    • HTML
  • CSSでのフォントサイズ指定におけるジレンマ

    以下の例文では、 　　* {font-size: 10pt;} があるゆえに、赤太字で示された 　　.ddd {color: #ff0000;font-weight: bold;} のフォントサイズがばらばらになってしまいます。 各所の指定フォントサイズを遵守させ、かつ赤太字を有効化するにはどのようにればよいでしょうか。 　　* {font-size: 10pt;}は事情あってやめられません。 「.ddd」に、font-size: middleを入れたりしてもだめでした。 !importantとか、何か簡単な「おまじない」の追記で解決できるといいのですが。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> <!-- * { font-size: 10pt; } dd { font-size: x-small; } dt { margin-left: 30px; } .eee { border: 1px solid #000; font-size: small; } .ccc { font-size: xx-large; } .aaa { font-size: medium; } .bbb { font-size: small; } .ddd { color: #ff0000; font-weight: bold; } --> </style> </head> <body> <h2>&nbsp;&nbsp;<a href="./a.htm" style="font-size: large;">2014年の<span class="ddd">雪</span>景色</a></h2> <a href="./index.php" class="eee"><span class="ddd">雪</span>下くんの感想</a> &nbsp;&nbsp;1月には何度も降雪、周りは<span class="ddd">雪</span>、<span class="ddd">雪</span>、<span class="ddd">雪</span>… <dl> <dt class="Tab"><span class="ccc">首都圏では不慣れな<span class="ddd">雪</span>かきなどに追われた</span></dt> <dt><span class="aaa"><span class="ddd">雪</span>下大介</span>&nbsp;&nbsp;<span class="bbb">大阪府立降<span class="ddd">雪</span>下小学校3年</span></dt> <dd>大阪ではひさしぶりに<span class="ddd">雪</span>が降りました。この時期での降<span class="ddd">雪</span>は珍しい。</dd> </dl> </body> </html>

    • ベストアンサー
    • CSS
  • 隣のフレームの中のスタイルをいじる・・・なら指定はどこになる？

    <SPAN onclick="com1.style.display='block'"> <FONT SIZE="2">＋</font> </span> <SPAN onclick="com1.style.display='none'"> <FONT SIZE="2">－</font> </span> をクリックすることにより <FONT size="2" color="red" id="com1_1" style={display:none;}> 文字列 </font> を表示させたりさせなかったりするスクリプトを 「left」のフレームで動かしています。 （スクリプトというには短いですが） これを「right」フレームにある文字、もしくは画像から onclickでコントロールする場合、 どのようにかけばよいのでしょうか？ <SPAN onclick="com1.style.display='block'"> <FONT SIZE="2">＋</font> </span> に何かを追加するといいようには見えるのですが。 それともそもそもできないのでしょうか？

  • ホームページの作成について教えてください。

    ホームページの作成について教えてください。 現在、HPのインデックスページの上部のh1のところに画像とテキストを載せ、 テキストの表示はHP上では見えないように設定しています。（画像のみが見える状態） これを、画像を消して、テキストが表示されるように直したいのですが、 画像を消すことはできたのですが、テキストを表示させる方法がわかりません。 htmlタグは <h1><a href="index.html"><span>文字列</span></a></h1> となっており、 cssは body { background-color: #E8E4DF; margin: 0px; padding: 0px; } h1,h2,h3,h4,h5,p { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; color: #333333; font-weight: normal; font-size: 80%; margin: 0px; padding: 0px; } ul,li { list-style-type: none; margin: 0px; padding: 0px; } li { font-size: 80%; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; color: #333333; } a span { display: none; } .clear { margin: 0px; padding: 0px; clear: both; } a:link,a:visited { color: #CF5B01; text-decoration: underline; } a:hover { color: #663300; text-decoration: underline; } となっています。 初心者のため、どこをどう直したらよいのかわかりません。 どなたか御教授お願い致します。

  • jQueryで特定のcssプロパティの値を書き換えたい

    jQueryで特定のcssプロパティの値を書き換えたい html上にインラインで記述しているスタイルのうち、特定のプロパティの値のみをjQueryで書き換えることはできますでしょうか。 具体的には↓ <span style="font-size: 16px;font-weight: bold;">テキスト1</span> <span style="color: #f00; font-size: 16px;">テキスト2</span>を <span style="font-size: 18px;font-weight: bold;">テキスト1</span> <span style=""color: #f00; font-size: 18px;">テキスト2</span>に style属性のfont-size: 16px;をfont-size: 18px;にしたい。 他は変えずそのままにしたい。 $(function() { $('span').filter(function() { return ($(this).css("font-size","16px")); }).css("font-size","18px") }); http://okwave.jp/qa/q5310183.html 似たような質問が上記でされていて、真似て書いてみたのですが、これだとfont-sizeが16pxでないものも全て18pxに書き換わってしまいました。 不勉強でお恥ずかしい限りですが、詳しい方いらっしゃいましたらどうかご教授ください。 よろしくお願いいたします。

  • ホームページビルダー8を使ってTABLEを作りました。作成した頃はスタ

    ホームページビルダー8を使ってTABLEを作りました。作成した頃はスタイルシートという言葉も知らなかったくらいの初心者だったので全ての項目に<FONT size="-1" color="#000000">を使って文字サイズと文字色を指定していました。その後、スタイルシートという方法を知り、これらの<FONT>タグが不要になってしまったので<FONT>タグを全て削除したいと考えています。しかし既に入力した<FONT>タグの数が半端じゃないので、全ての<FONT size="-1" color="#000000">を手作業で一つ一つ削除していくには厳しい状況にあります。できれば既に入力されてしまった<FONT>タグを一括削除したいのですが、何かいいアイデアはないでしょうか？尚、添付画像のような状態から<FONT>タグを全て削除したいと考えています。何かいいアイデアがございましたらアドバイス下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する