マーベル映画シリーズの伝説の始まり『アイアンマン』を紐解く! >>

皆様、はじめまして。

現在、ある書籍を参考にWebデザインを勉強しております。

その書籍の中で、
class='tagline'
class="column side"
等のように、シングルクォーテーションと
ダブルクォーテーションと2通りの書き方が出て来ました。

何故、シングルとダブルと分けて書いているのかがわからなくて。。。

レスポンシブデザインに関しての書籍で、
HTMLやCSSなどの詳しい説明は書いてありません。


JavaScriptとかで関係してくるのですかね?

また、分けて書くことのメリットなど教えて頂けると助かります。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

属性値の囲みはどちらでも構いませんが、ご自身で使い方を統一した方がいいでしょう。



たとえば
<button onclick="location.href = 'abc.html';">ボタン</button>
といった形で、両方を使わなければいけないシーンが出てきます。
ごちゃ混ぜに使っているとコーディングミスの原因になりますので、自分自身でルールを決めておくとミスを減らせます。
    • good
    • 3

どちらでも構いません。


HTMLもSGML( http://ja.wikipedia.org/wiki/SGML )の派出品でマークアップ言語です。
   ↑読んでおきましょう。

HTMLの仕様では
【引用】____________ここから
 デフォルトでは、SGML規定はすべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて 囲うよう求めている。
 二重引用符で属性値が囲われる場合は単引用符がこの属性値の一部を成し得るし、逆の囲い方も可能である。
 ・・・【中略】・・・
 属性の値を引用符で囲わなくてよいケースもある。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(HTMLのみ、XML/XHTMKは囲わなければならない)

 属性値が、アルファベット(a-z and A-Z)、数字(0-9)、ハイフン(ASCII十進45)、ピリオド(ASCII十進46)、アンダースコア(ASCII十進95)、及びコロン(ASCII十進58)のみを含む場合である。
 本仕様は、引用符が省略可能な場合であっても省略しないことを推奨する。
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[On SGML and HTML (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より

 分からないときは、仕様書を読む。最低限、これだで随分と変わりますよ。

 なお、
class='tagline'
class="column side"
 のようなclass名は、本来は良くないことも書かれています。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』など
 文書構造を補完するものにしましょう。
注) 仕様書を理解できない人が多かったので、これらはHTML5では新しい要素になりました。
『HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )』

class='tagline' 絶対おかしい!

class="column side"
 だったら、<div class="aside">とかでしょうね。
>レスポンシブデザインに関しての書籍で、
 ????
 
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

仕様書が一番正しいですよね(^_^;)
ありがとうございました。

お礼日時:2013/04/20 13:07

書籍の間違いじゃないでしょうか?



ダブルクォーテーションが正しいと思います。

シングルクォーテーションでやると認識されないと思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

書籍的には、同じような書き方を数箇所でしているので、
間違いでは無さそうです。

ダブルクォーテーションが無難そうですね。

ありがとうございました。

お礼日時:2013/04/20 13:02

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLは、シングルクォートかダブルクォートか?

HTMLで、<img src="images/spr2002.gif" width=130 height=130 border=0 alt="写真">
などクォート文字列がよくでてきますが、文法的にはシングルクォートかダブルクォートのどちらでもOKなのでしょうか?
大抵のHTMLエディタではダブルクォートを採用している事が多いようですが、私的には、PerlやPHPのprint文などでクォート文字列をエスケープする必要がないので、シングルクォートが良いような気がするのですが、みなさん、どちらが望ましいと思われますか?

Aベストアンサー

HTML4.01の仕様書には属性値を引用符で囲むことについて以下のように記載されています。

「デフォルトでは、SGML規定はすべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて囲うよう求めている。」

ということで、文法上はどちらでもOKです。


HTMLからちょっと離れますが、引用符の扱いは処理系によって多少差異がありますので、単引用符でもエスケープしないとダメな場合もあるかも知れません。てなことを考えると、二重引用符で囲って必要な場合はエスケープ、というのは一番広く通用しそうな気がします。

参考URL:http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.2

Qシングルコーテーション(')とダブルコーテーション(")の入れ子について

HTMLにおける、シングルコーテーション(')とダブルコーテーション(")の入れ子について教えてください。

例)
document.write('<img src="http://xxxxx" onMouseOver="aaaaaa(#bbbb#)">');

上記の#の部分は何を使えば良いですか?
また、更に入れ子にする場合は、どのような感じになりますか?

Aベストアンサー

連投しつれいします。
なんか余計な文字がついてたので。

<script>
document.write('<img src="http://xxxxx" onMouseOver="alert(\'bb\\\'b\\\'b\')">');
</script>

更に入れ込む場合は \' の両方の文字に対して更に\をつけて \\\' としていれこめますね。
ダブルだと同じ場所に入れ込めませんでした。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

QHTMLファイル同士での値渡し

困っています。

HTMLファイルからHTMLファイルへ移動するときに、
HTMLファイル1でJavaScript で算出された値を
HTMLファイル2へ渡して使用したいのです。

showModalDialogだとダイアログにしか渡せないし・・・。
このように、値をそのまま次のページに渡すための方法を教えてください。
お願いします。

Aベストアンサー

すみません。うっかりしてました。

document.write(FORM[v1]);
では、v1を変数と認識してしまうので、エラーになってしまいますね。

document.write(FORM.v1);  // 「FORM.v1」です
あるいは
document.write(FORM["v1"]);
としてください。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

Qエンターキーを押したときに関数を呼び出す方法

エンターキーを押したときに関数を呼び出すにはどのようにプログラムを記述すればよいのですか?

Aベストアンサー

大抵の言語ではキーが押されたかというハンドラがありそのオブジェクトとして何のキーが押されたかの情報があります。
javascriptでもonKeyPressハンドラのオブジェクトwindow.event.keyCodeの内容を見てエンターキー(値は13)だけ処理をするという形にすれば云いと思います。
即席で作ったサンプルですが参考にして下さい。

<html>
<head>
<title>sample</title>
<script language="JavaScript">
<!--
function Key_on(key)
{
if(key == 13){
alert("ENTERが押されました");
}else{
alert("ENTER以外が押されました");
}
}
-->
</script>
</head>
<body onKeyPress="Key_on(window.event.keyCode)">
何かキーを押して下さい
</body>
</html>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

価格.com 格安SIM 料金比較