なぜHTMLのソースにスペースを入れるのか？
- 他のページのソースを見ると、HTMLのソースコードにスペース（--）が入っていることがあります。
- このスペースは、ソースコードを見やすくするために入れられるものであり、意味はありません。
- HTMLのソースコードにおいて、スペースはタグや要素を区切るために利用されます。
- ベストアンサー
HTMLに詳しい方に質問です
他のページのソースみて思うことがあります。なぜソースを書く際にスペース(--)を入れるのでしょうか 参考、youtubeより ------<li class="guide-item-container "> ---<a class="guide-item " -----data-feed-name="music" ----data-feed-type="system"> --<span class="thumb"> ---<img class="system-icon system music" src="//s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif" alt=""> </span> --<span class="display-name"> 音楽 </span> --</a> --</li>
- takuya12421242
- お礼率96% (494/514)
- その他（インターネット・Webサービス）
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
階層構造を明らかにするためです。 後ろにずれているほど内部に含有される因子ということです。 後で見たときにメンテナンスのし易さが断然違います。 時として全然別の人が編集することがあるのですから。 プログラミング言語ではお約束です。
関連するQ&A
- 次のｈｔｍｌはどのような内容なのでしょうか？
あるサイトのソースなのですが、普通リンクを貼るときには、<a href="***.html"></a>という風にしますよね？でも下記のソースはそのようになっていません。下記のリンクの貼り方は、どのような仕組みなのでしょうか <li class="top"><span><a href="../" class="visible"></a><a href="../" class="hidden">TOP</a></span></li> <li class="news"><span><a href="../news/" class="visible"></a><a href="../news/" class="hidden">NEWS&INFORMATION</a></span></li> <li class="schedule"><span><a href="../schedule/" class="visible"></a><a href="../schedule/" class="hidden">SCHEDULE</a></span></li> <li class="discography"><span><a href="../discography/" class="visible"></a><a href="../discography/" class="hidden">DISCOGRAPHY</a></span></li> <li class="special"><span><a href="../special/" class="visible"></a><a href="../special/" class="hidden">SPECIAL</a></span></li> <li class="teamayu"><span><a href="../teamayu/" class="visible"></a><a href="../teamayu/" class="hidden">TeamAyu OFFICIAL FANCLUB</a></span></li> <li class="link"><span><a href="../link/" class="visible"></a><a href="../link/" class="hidden">LINK</a></span></li>
- ベストアンサー
- HTML
- addClassのやり方
教えてください。 <section class="section" id="AAA"> <h3><img src="" alt="あああ" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>あああ一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> <section class="section" id="BBB"> <h3><img src="" alt="いいい" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>いいい一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> <section class="section" id="CCC"> <h3><img src="" alt="ううう" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> <label>ううう一覧</label> <div class="row"> <ul class="list-item product-thumb-info-list"> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> <li class="item col-xs-6 col-sm-4 col-md-3 product"></li> </ul> </div> </div> </div> </section> 上記のようなページになっており、 <label>○○一覧</label> をクリックすると、 その下の画像がバラッと表示されるようになっております。 URLで、 「http:// ～/list/」のときは、このソースのままでいいのですが 「http:// ～/list/#AAA」のときは <section class="section" id="AAA"> <h3><img src="" alt="あああ" class="img-responsive"></h3> <div class="toggle" data-plugin-toggle> <div class="toggle"> ← この行のクラスに「active」を追加したいのです。 どのようにすれば実現できるのでしょうか？ .addClass('active') というものを見つけたのですが どのように書けば、ここの場所に追加というようにかけるのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- HTML5 File APIを利用したサムネイル
画像アップロード前に画像サムネイルのHTML5 File APIします。参考サイトでは理解できましたが、以下のソースにおいて、class=img**で指定した場所にサムネイル表示するにはどうしたらよいのでしょうか？ <img src="ここに画像１" class="img_01">あるいは<span class="img01">ここに画像１</span> <form enctype="multipart/form-data" method="post"> <p><img src="ここに画像１" class="img_01"><input type="file" name="userfile_01"></p> <p><img src="ここに画像２" class="img_02"><input type="file" name="userfile_02"></p> <p><img src="ここに画像３" class="img_03"><input type="file" name="userfile_03"></p> </form> 以下のfunction内の書き方がわかりません。 $(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); $('span').html(img_src); } reader.readAsDataURL(file); }); }); 参考URL http://php.o0o0.jp/article/jquery-preview_thumbnail
- ベストアンサー
- JavaScript
- javascriptの質問です。
<button type="button" class="btn" id="b_send" > <img class="ic2" width="25" height="25" src="../css/icon/paper44.png"><img class="ic2w" width="25" height="25" src="../css/icon/paper44.png">送信 <span> CTR + ENTER </span> </button> とあるのですがjavascriptで送信しようとしても送信できません。 普通のサイトでは押したら送信されるはずなのにできません。 これはどうすればできるでしょうか。 回答よろしくお願いします
- ベストアンサー
- JavaScript
- 【jqueryを設置】ブラウザによって崩れてしまう
いつもお世話になっています。 Firefoxとsafariでカラム崩れしてしまい、どこをなおせばいいかわかりません。 どうすれば崩れないでしょうか？ HTML↓ <div class="slider-wrap"> <div id="main-photo-slider" class="csw"> <div class="panelContainer"> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-1.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-2.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 3"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 4"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 5"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> <div class="panel" title="Panel 6"> <div class="wrapper"> <img src="images/tempphoto-5.jpg" alt="temp" /> <div class="photo-meta-data"> New Video on CSS-Tricks<br /> <span>Using Wufoo for Web Forms</span> </div> </div> </div> </div> </div> <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a> <div id="movers-row"> <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div> </div> </div> <br clear="all" /> <div style="margin-top:20px;"> <img src="images/tempphoto-2thumb.jpg" alt="temp-thumb" /> </div> CSS↓ .slider-wrap { width: 1050px; top: 87px; left: 40px; clear: both; border:solid #fff 0px;} .stripViewer .panelContainer .panel ul { text-align: left; margin: 0 15px 0 30px; } .stripViewer { position: relative; overflow: hidden; width: 1050px; height: 455px; } .stripViewer .panelContainer { position: relative; left: 0; top: 0; } .stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 1050px; } .stripNavL, .stripNavR, .stripNav { display: none; } .nav-thumb { border: 1px solid black; margin-right: 5px; } #movers-row { margin: -43px 0 0 62px; } #movers-row div { width: 10%; float: left; } #movers-row div a.cross-link { float: right; } .photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 45px; margin-top: -65px; position: relative; z-index: 9999; color: white; } .photo-meta-data span { font-size: 13px; } .cross-link { display: block; width: 62px; margin-top: -14px; position: relative; padding-top: 15px; z-index: 9999; }
- ベストアンサー
- CSS
- JQueryを使ってcssを書き換え
何となくコードを見てさわる程度の初心者です。 以下のようなソースを組みました。 <div id="slide"> <a href="01.htm"><img src="01.jpg" alt="01" id="alttxt" /></a> </div> <div id="slidenavi"> <ul> <li><a href="01.html"><img src="s_01.jpg" alt="01" class="b_01.jpg" /></a><span class="active"></span></li> <li><a href="02.htm"><img src="s_02.jpg" alt="02" class="b_02.jpg" /></a><span class="active"></span></li> <li><a href="03.html"><img src="s_03.jpg" alt="03" class="b_03.jpg" /></a><span class="active"></span></li> </ul> </div> #slideがメインエリアで、#slidenaviがメインエリアの画像とリンク先を切り替えるナビゲーションボタンになっています。 ナビに連動したメインエリア用の画像ファイル名は #slidenavi の img の classに入れておいて、それを読み込んで代入するというおかしなやり方で呼び出していますが、ここまではうまくいきました。 問題はここからです。 最初の状態では<span class="active"></span>はcssの設定でdisplay: noneとしてあります。 そして#slidenaviのボタンにマウスが乗ると、その部分の<span class="active"></span>をdisplay: blockとして表示したいのですが、これがどうしてもうまくいきません。 この部分も含めて、おかしな書き方になっている部分があれば教えてもらえないでしょうか。 jsファイルは以下の通りです。 $(function(){ $('#slidenavi ul li a').fadeTo(0,0.4); $('#slidenavi ul li a').hover(function(){ $(this).fadeTo(300,1.0); }, function(){ $(this).fadeTo(300,0.4); }) $('#slidenavi ul li img').mouseover(function(){ var bglink = $(this).attr("class"); var altTxt = $(this).attr("alt"); $("#slide img").attr("src","images/home/main/"+bglink); $("#slide img").attr("alt",altTxt); $("#slide span.active").css("display","block"); }); $('#slidenavi ul li a').mouseover(function(){ var Href = $(this).attr('href'); var Tget = $(this).attr('target'); $("#slide a").attr("href", Href); $("#slide a").attr("target", Tget); $("#slide a").click(function() { window.open(Href,'_self'); return false; }); }); });
- ベストアンサー
- JavaScript
- 同じjqueryを２つ並べて動かしたいけど動かない
いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、２つめは動きません。 どうすれば動きますか？？ 理想は■が１つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン＆レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>
- ベストアンサー
- JavaScript
- jQueryでXMLを操作
jQueryでXMLを操作 最近jQueryを勉強しはじめました。 jQueryでXMLを読み込んで、item val="new"を含んだデータのみ<ul></ul>内に表示したいのですが うまくいきません。 ご教授願います。 また、こういったjQueryの使い方に関する、お勧めの本やページ等ございましたら 教えてください。宜しくお願い致します。 -------------------------XML Data------------------------- <data> <item val="new"> <link>01.html</link> <name>ほげ田 ほげ太</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>02.html</link> <name>ほげ田 ほげ子</name > <photo>dummy.jpg</photo> </item> <item val="new"> <link>03.html</link> <name>ほげ山 ほげ太</name > <photo>dummy.jpg</photo> </item> <item> <link>04.html</link> <name>ほげ山 ほげ子</name > <photo>dummy.jpg</photo> </item> </data> -------------------------JavaScript------------------------- $(function(){ $.ajax({ url: 'doctors/data.xml', dataType: 'xml', timeout: 1000, error: function(){ alert("xmlファイルの読み込みに失敗しました"); }, success : function(data){ $("item",data).each(function(){ if($("item",this).attr("val") == "new"){ $(".column").append('<li><a href="'+$("link",this).text()+'"><img src="image/'+$("photo",this).text()+'" alt="'+$("name",this).text()+'" title="'+$("name",this).text()+'"></a></li>'); } }) } }) $("li.noJavaScript").remove(); }) -------------------------HTML------------------------- <div id="wrapper"> <ul class="column"> <li class="noJavaScript">javaScriptを有効にしてください。</li> </ul> </div>
- ベストアンサー
- JavaScript
- jQuery タブとスライダーの併用
jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>
- 締切済み
- JavaScript
- CSSを動的出力部分で対応させたい
以下のようなソースで、動的に出力されるコンテンツのレイアウトに対応したいと思っています。 "Cat_StyleP_img_1"、"name_"、"comment_"のクラス指定したDIVエリアは動的に出力される部分です。 --CSS-- div.mainframe_ { float: right; display: inline; overflow: hidden; } div.container_ div.contents_, div.container_ div.mainframe_ { width: 700px; } div.CategoryStyleP_ { width:100%; overflow: hidden; padding-bottom: 20px; } div.CategoryStyleP_Line_ { width: 102%; overflow: hidden; padding: 10px 0 10px 10px; margin-bottom: 10px; } div.CategoryStyleP_Item_ { float: left; display: inline; width: 340px; margin-right: 10px; padding: 10px 0; overflow: hidden; background: #fff; } div.CategoryStyleP_Item_ .Cat_StyleP_img_ { float: left; display: inline; width: 140px; } div.CategoryStyleP_Item_ .Cat_StyleP_main_ { float: left; display: inline; width: 180px; padding-right: 10px; } div.CategoryStyleP_Item_ h3.name_ { padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #cfcfcf; font-size: 14px; font-weight: bold; } div.CategoryStyleP_Item_ div.comment_ img { margin: 0 0 10px 0; } --html-- <body > <div class="container_"> <div class="contents_"> <div class="mainframe_"> <div class="CategoryStyleP_"> <div class="CategoryStyleP_Line_ heightLineParent"> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像1"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルA</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 </div> </div> </div> <div class="CategoryStyleP_Item_"> <div class="Cat_StyleP_img_"> <a href="#"><img src="img/usr/cat-sample.png" alt="動的出力画像2"></a> </div> <div class="Cat_StyleP_main_"> <h3 class="name_"> <a class="category_name_" href="#">タイトルB</a> </h3> <div class="comment_">コメントです。ここにはコメントが入ります。コメント、コメント。 コメント、コメント。</div> <span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span><span class="comment_">コメント、コメント。</span></div> </div> </div> </div> </div> </div> </div> </body> このレイアウトで出力する画像が無かった場合、"Cat_StyleP_img_1"のDIV自体が出力されない 仕様なのですが、画像の出力がない場合に、その他2つ（"name_"、"comment_"）の要素を横に広げて、 画像の出力が無かった場合の空きスペースが埋まるようにしたいのですが、何か良い方法はありませんでしょうか？ JavaScriptではなくCSSで何とか対応したいと考えています。 お助け下さい、何卒宜しくお願いします。
- 締切済み
- CSS
お礼
回答ありがとうございます! そんな理由があるとは知りませんでした