- ベストアンサー
HTMLマークアップの正しい使用方法とフォントスタイルの指定方法
shokodeiの回答
一番、最初の例で、全然オッケーだと思います。誤りではありません。 または、「あ…、雪だ」までをひとつの段落と見なす場合は、 <p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。<br> <span class="blue">「あ…、雪だ」</span></p> で、まったく問題ないでしょう。 ここで、"彼はそう言って笑った。"の後に、「間」の意味合いで空行を入れたいのなら、 <p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。<br> <br> <span class="blue">「あ…、雪だ」</span></p> としても、なんら問題はありません。 むしろ、 <div> 彼はそう言って笑った。<div> <br> <div class="blue">「そうだね」<div> というような<br>の使い方は、僕は推奨しません。 この場合は、divのmarginで余白を調整した方がスマートですね。 段落（P）の中の改行（br）は、連続しようが何個出現しようが、 それは作者の意図であり、言語構造によるものなので、仕様的には問題無しです。
関連するQ&A
- HTML5に移行を見据えた上で
ビルダー使いの初心者でWeb作家です。 fontタグが廃止になるということを知り、サイトのタグを(全２００ファイルほど)をspanに全置き換え完了したはばかりです。 今度は「<br>タグの連続はいけない」と言うことを知り全て<p>～</p>で括る作業が完了したばかりです。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ↑上記サイトでチェックしたところ構文エラーはないですけれど 例文です。 <p><span class="red">「今日は寒いね」</span><br> 彼はそう言って笑った。</p> <p><span class="blue">「あ…、雪だ」</span></p> ↑ここは<div class="blue">などに置き換えるべきである。 それは分かっているのですけれど、修正個所が多すぎるため直しようがないんです(これ以上執筆を停滞させるわけにもいきませんし)。 ある意味、文法違反ですよね。ブラウザ上でも問題なく表示されています。 １．直さない場合、将来的に何かマズいことはありますか？ ２．例えば…、文法違反をすると何か起こるのでしょうか？ 私小説のため、認証をかけてありますけれど(持病の話し等が出てくるため極親しい人にのみ公開しています)、そのためSEO対策は重視しておりません。 どなたか教えて下さい。
- ベストアンサー
- HTML
- css classとidの使い方
あの、<p></p>内の文をclassを使ってitalicに、<span>内をidを使ってbold,色は赤にしたいのですが。変わりません。どこを直したら良いでしょうか？よろしくお願いします。 <HTML> <HEAD> <LINK href="global.css" rel="stylesheet" type="text/css"> <TITLE>About Me</TITLE> </HEAD> <BODY> <H1>About Me</H1> <IMG src="MyPic.png" alt="MyPic" height="150" width="100"> <DIV class="profile"> <p>My name is blahblah.<br> I am a <SPAN id="attention">Good</SPAN> Student.<br> </p> </DIV> </BODY> </html> global.cssの内容 .profile{font-style: italic} #attention { font-weight: bold; font-style: italic; color: red }
- ベストアンサー
- HTML
- HTMLとＣＳＳ
ＣＳＳで、文字に影をつけようと思っても、プログラムを組んでもうまくいきません。他（ＣＳＳで文字に色をつける）のを組むと、上手くいきますが、影だけが失敗します。 他のＣＳＳが動いたって事は、ＣＳＳの基本は合っているので、多分、 影のＣＳＳタグが間違っていると思います。 使ったタグは下記で。 省略 <STYLE TYPE="text/css"> <!-- .ts1 {text-shadow:3px 3px} .ts2 {text-shadow:red 3px 3px;} .ts3 {text-shadow:red 3px 3px 2px;} --> </STYLE> </HEAD> <BODY> <SPAN CLASS="ts1">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts2">text-shadow</SPAN><BR><BR> <SPAN CLASS="ts3">text-shadow</SPAN><BR><BR> </BODY> </HTML> 上記で失敗したので、このタグもつかいました td { filter:dropshadow (color=red ,offx=3 ,offy=3 ,positive=true) ; } 何処が原因でしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- <p>の使用について教えて下さい。
現在小説を執筆＆HTMLを勉強中です。 今まで台詞と台詞の間(１行空ける場合) <span class="black">「今日は暖かいね」</span><br> <br> <span class="gray">「そうだね」</span><br> 本当に春みたいな陽気だった。<br> という使い方をしていましたがCSSにて行間を調節出来るよう <p><span class="black">「今日は暖かいね」</span></p> <p><span class="gray">「そうだね」</span><br> 本当に春みたいな陽気だった。</p> ↑実際問題、段落ではないのですけれど、このような<p>の使用法は誤りでしょうか？
- ベストアンサー
- HTML
- HTML,CSS：文章内の文字を強調する方法
例えば、 HTML部分 <div class="a">私は、～～<? class="b">「●●」</?>～～である。</div> CSS部分 div.a {font-style: normal; font-size: 11pt; font-family: "ＭＳ 明朝"; line-height: 125% } のとき、<?>の部分を強調したいのですがどのタグを使えばいいでしょうか？レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。 ちなみに、<?>は改行しない場合です。 回答よろしくお願いします。
- ベストアンサー
- HTML
- ビルダー 不要なタグの生成を止めたい
Dreamweaverを使用してWEBサイトを作っています。 依頼人が更新作業をしているのですが 相手はホームページビルダーを使用しています。 CSSでいろいろ指示をしているテンプレートを作り、 テキスト部分を打ち変えるだけで更新できるようにしているのですが ビルダーでテキストを打つと不必要なタグがやたらと入ります。 たまにフォント指定がバラバラだったりして、明朝とゴシックが混じったような文章になってたりします。 これは相手の操作に問題があると思うのですが(^-^; ソース画面にして、テキスト部分に直接打ち込んで下さいとお願いしているのですが どうしても見やすさから、通常の作業場面（？）でテキストを打ってしまうようです。 「表示がおかしくなったから見てくれ」と頼まれ見ると すごい指定タグの量でびっくりします。 HTMLソースの自動整形やエラー修正のチェックを外したり、 その他いろいろ困る設定は外す事ができたのですが、 このフォントタグの細かな生成には参っています。 こんな感じです↓ <span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分○○<span lang=EN-US style='font-size:11.0pt;color:red'></span><BR> <span lang=EN-US style='font-size:11.0pt;color:red'></span>○○テキスト部分2○○<span lang=EN-US style='font-size:11.0pt;color:red'></span><BR> …不要な指示がなぜ入っているのでしょう？？ また、文章が終わって何もない所に↓ <span lang=EN-US style='font-size:10.0pt'></span></p> <p class=MsoNormal><span style='font-size:10.0pt;font-family:"ＭＳ 明朝","serif"; mso-ascii-font-family:Century;mso-hansi-font-family:Century'></span></p> <span lang=EN-US style='font-size:10.0pt'></span><span lang=EN-US style='font-size:10.0pt'></span> …と、これがたくさん残っています。（なぜでしょう？？） 改行タグの前の<SPAN lang=EN-US><o:p></o:p></SPAN>も困ります。 いろいろ書いてしまいましたが、設定でこれらのタグが入らないようにする方法はないでしょうか？ また、相手の操作次第(ソース画面で直接打ち込む以外）でなおる方法はあるでしょうか？ よろしくお願い致します。
- ベストアンサー
- ホームページ作成ソフト
- クリックした際にCSSが変更できない jQuery
jQueryについて詳しい方教えていただけませんでしょうか？ クリックをした際、スライドさせるように作っているのですが、同時にspanのCSS変更（arrowFD→arrowFR）もやりたいのですがなぜかうごきません・・・ ＜jQuery＞ $(window).load(function(){ $('#faq .answer').not(':first').hide(); $('#faq .question').click(function() { if($(this).next('.answer').is(':visible')) { $(this).next('.answer').slideUp(300); $("span.arrowFD").html('<span class="arrowFR"></span>'); //★ホントは、CSSだけ変更したい } else { $(this).next('.answer').slideDown(300).siblings('.answer').slideUp(300); } }); });//]]> ＜CSS＞ .question { padding:5px; font-weight:500; font-family: メイリオ; font-size:14px; border:1px solid #ddd; background:#eee; cursor: pointer; } .answer { padding:25px; font-family:MS UI Gothic; font-weight:500; font-size:13px; border:1px solid #ddd; } /* 三角矢印を前（Front）に（右向き：Right）でつける */ .arrowFR { position:relative; top:0; left:0; padding-left:18px; } .arrowFR:before { content: ""; position: absolute; top: 3px; left: 2px; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid #000000; } /* 三角矢印を前（Front）に（下向き：Down）でつける */ .arrowFD { position:relative; top:0; left:0; padding-left:18px; } .arrowFD:before { content: ""; position: absolute; top: 3px; left: 2px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 12px solid #000000; } ＜HTML＞ <div id="faq"> <div class="question" id="tenmetsu"> <span class="arrowFD"></span> <span style="font-weight:bold">｜</span> 香川真司 </div> <div class="answer">Answer 01<br />Answer 01<br />Answer 01<br />Answer 01<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 長友佑都 </div> <div class="answer">Answer 02<br />Answer 02<br />Answer 02<br />Answer 02<br /></div> <div class="question"> <span class="arrowFR"></span> <span style="font-weight:bold">｜</span> 本田圭佑 </div> <div class="answer">Answer 03<br />Answer 03<br />Answer 03<br />Answer 03<br /></div> </div>
- ベストアンサー
- JavaScript
- 正規表現で最短マッチは2回使えないのでしょうか？
＜やりたいこと＞ <span class="blue">データ</span> <br> の<br>タグを削除したいです。 ＜試したけどううまくいかなかった内容＞ $match = "/(<span class=\"blue;\">(.*?)<\/span>)(.*?)<br>/ism"; $replace = "<span class=\"blue;\">$1</span>"; $code = preg_replace($match, $replace, $code);
- ベストアンサー
- PHP
- onmouseoverはCSS参照に含められるか？
<div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか？ a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。
- ベストアンサー
- CSS
- cssのタグについて
cssで使えるタグにはどのようなものがあるのでしょうか? p、div、h1(文字サイズと兼用でしょうか?)などがあることが分かったのですが、たとえばfontcolorを縮めてfc.red { color: red;} などとすれば自分的に分かりやすいと思ったのですが無効でした。 また、百歩譲って限られたタグしかないとしても、p.fc.red { color: red;}などのようにclassを複数にするようなことは可能ではないのでしょうか? こういったことも含めてcssとhtmlでは思想的にというか包括的に違うものなのでしょうか? スタイルシート部分 p.red { color: red; } これを→ fc.red { color: red; } HTML部分 <p class="red"> タイトル </p> これを→ <fc class="red"> タイトル </fc>
- ベストアンサー
- その他(ソフトウェア)
お礼
ありがとうございます！ ２冊持っているテキストの内１冊に「詩や小説など表現上で使用が必要な場合は<br>も<p>も使用して構わない」このような記述がありました。事実、作中に登場する私の詩は…空白行がなかったら見栄えが良くない(というより描写部分と分けるためにも必要)。 貴重な御意見をありがとうございます。あまり他の人の意見に左右されずに『自分の考え』と言うものをしっかり持つようにします。 タグの置き換え作業はもう少し考えてみます。