- ベストアンサー
次のｈｔｍｌはどのような内容なのでしょうか？
あるサイトのソースなのですが、普通リンクを貼るときには、<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>
- based
- お礼率36% (4/11)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
リンク先がファイル名となっている<a href="***.html">の場合のほか、<a href="***/***/">のようにリンク先にフォルダ名を指定することができます。 この場合、そのフォルダの中にある「index.html」や「default.html」などが指定されたものとみなされて、そのファイルを表示することになります。省略時にどのファイルが指定されるかは、サーバーの種類や設定によって異なります。 また、省略時に表示されるファイルが存在しない場合は、「ファイルが存在しない」と表示されたり、フォルダ内のファイル一覧が表示されるなど、サーバーの種類や設定によって対応が異なります。
その他の回答 (3)
- tiltilmitil
- ベストアンサー率22% (1871/8251)
引用されている部分が多すぎてどこが疑問なのかわかりにくいのですが、「../」のような指定が疑問なのでしょうか。そうならば、これは「相対パス」です。 そのファイル自身があるフォルダにある別のファイルは「./〔ファイル名〕」、一つ上の階層にあるファイルは「../〔ファイル名〕」、一つ下の階層にあるファイルは「/〔ファイル名〕」という感じになります。 http://homepage2.nifty.com/tomoarai/html/pass.html
class="●●"というのと<span></span>というのを削れば普通のリンク とリストですね。classは<a>の属性のひとつで自分で定義した スタイルシートを呼び出すことができます。スタイルシートは文字の色 や大きさを指定したりするものです。<span></span>もスタイルシート を呼び出すのに使われます。
これはclass属性が使われていますので、スタイルシートの部分を見ないことには・・・ 基本的に、class属性によってこんな書き方をする場合がありますのでスタイルのことを理解すれば分かると思います。
関連するQ&A
- クリックファンクションがうまくいかない
class="link-block"のついたliつまりリストをクリックした時、.removeClass('active');でactiveというクラスを削除するようにしたかったのですが、 なぜかリストをクリックしても反応せずに削除されません。 id="maware"のliだけは、反応して削除されます。 CSSにとしてもだめでした。どうもclass="link-block"のついたリストをクリックできていないのかと思っているのですが、上下の順番でクリックできていないのでしょうか？ .link-block { display: block; z-index: 99999; } ・ソースコード <div class="kuruttosuru">aaa</div> <!-- drawermenu --> <!-- drawermenu-button --> <div class="modal-button-wrap"> <a class="animation-hover action-hover modal-button-wrap__button"> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> <span class="modal-button-wrap__border"></span><!-- border --> </a> </div> <!-- drawermenu --> <nav> <div id="nav__drawermenu-wrap"> <ul> <li id="maware"><a class="link-block" href="#js-about-me">ABOUTME</a></li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> <!-- /drawermenu --> ・JS <script> $(function(){ $('.kuruttosuru').on('click', function() { $(this).addClass('active'); return false; }); }); </script> <!-- drawermenu-button-three-whiteline-クリックした際にクルット回るアクション --> <script> $(function(){ $('.modal-button-wrap__button, .link-block').on('click', function() { $(this).removeClass('active'); return false; }); }); </script> ・下記のJSがあると、うまくいかず下記をコメントアウトするとうまくいきます。 下記に何かおかしくなる要素があるのでしょうか？ <!-- ページ内遷移 --> <script> $(function(){ // #で始まるアンカーすべてをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); </script> _____________
- ベストアンサー
- JavaScript
- CSSについて初歩的ですがわかりません
こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters & Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません
- 締切済み
- HTML
- トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- 締切済み
- CSS
- position fixed内でスクロールさせたい
css position fixed内でスクロールさせることは可能ですか？ 下記のサイトのドロワーメニューのようにしたいです。 //www.toei-eigamura.com/edosakaba/ 下記のようにしてもうまくいきませんでした。 ・html <nav> <div id="nav__drawermenu-wrap"> <ul> <li> <a class='top-header__social-btn symbol animation-hover action-hover' href="https://plus.google.com/share?url=http:///index.html" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title=''></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=http:///index.html" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title=''></a> <a class='top-header__social-btn symbol animation-hover action-hover' href="http://twitter.com/share?url=</a> </li> <li><a class="link-block" href="#js-about-me"><span class="gotootherpage"><img class="top-gnav__link-sixth__goto-other-page" src="img/common-img/goto-other-page.svg" alt="goto-other-page-image"></span>ABOUTME</a></li> <li><a class="link-block" href="#js-gallary">GALLARY</a></li> <li><a class="link-block" href="#js-gmap">MAP</a></li> <li><a class="link-block" href="#js-contact">CONTACT</a></li> <li><a class="link-block" href="http:///index.html">TOP</a></li> <li><a class="link-block" href="http:///index.html">BLOG</a></li> </ul> </div> </nav> ・ｃｓｓ nav { overflow: auto; } [id="drawermenu"] ul { z-index: 300; width: 100%; height: 100% position: fixed; top: 0; padding-top: 2.8rem; text-align: center; cursor: pointer; margin-left: -100%; transition-propety:all; transition-duration:1s; }
- ベストアンサー
- CSS
- wordpressの個別投稿ページのリンク
解説書を読みながらwordpressを使ってホームページの作成をしているのですが、 CSSフレームワークの種類などで躓いて、 ある部分は本のコード、ある部分は解説サイトのコードを貼り付けて進めていたのですが、 個別投稿ページの項でわからなくなってしまいました。 サイトのトップページから個別投稿ページにはどこをクリックすれば辿り着けるのでしょうか。 ↓header.phpの内容です <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; --> <title>たいとる</title> <nav class="navbar navbar-inverse navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="/news">お知らせ</a></li> <li><a href="#">記事一覧</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <?php wp_head(); ?> </head> ↓front-page.phpの一部です。 <header> <section id="news"> <?php $news = get_posts('posts_per_page=1'); ?> <?php foreach($news as $post): ?> <?php setup_postdata($post); ?> <a href="<?php the_permalink(); ?>"> <div class="alert_box"> <p><?php the_title(); ?> - <?php the_date(); ?></p> </div> </a> <?php endforeach; ?> <?php wp_reset_postdata(); ?> </section> </header> 直感的にはsingle.phpは「/var/www/html/wordpress/wp-content/themes/sample」内にあるので 「」内のリンクがコード内に有るような気がするのですが、どこにも見当たりません。 single.phpにアクセスするためにはトップページ内のまたはトップページコード内のどの記述からアクセスできるのでしょうか。 読みづらくてすみません。よろしくお願いします。
- ベストアンサー
- PHP
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- IEの崩れ
以下のようにリストタグの途中でbrを入れるとIEだけ崩れます 何かよい方法はないでしょうか？ <ul> <li class="first"><span>2011</span></li><!-- --><li><a href="#">2010</a></li><!-- --><li><a href="#">2009</a></li><br /> <li class="first"><span><a href="#">2001</a></span></li><!-- --><li><a href="#">2000</a></li><!-- --><li><a href="#">1999</a></li> </ul>
- ベストアンサー
- CSS
- 大至急！！ＨＰビルダー16の専門家の方教えて下さい
自分でやっていてどうしてもわからなくて そこさえわかればＵＰできるのですが 大至急で教えてほしいのです。 フルＣＳＳで作成しました。 左のサイドメニューのリストの画像を変更、位置も変えました。 そうしたら 元々、リストメニューのテキストがリンク先に飛ばせるようになっていたのですが それができなくなりました。 テキストの一行下の行でないと リンク先ページにいけないのです。 そこにはweb上にはなんの文字もないので そこにリンクが張ってあることが全くわからないのです。 何の変更もしていないページのタグをコピーして 貼り付けてもだめです。 どうすればよいのでしょう？ ちなみに ●変更前のページのタグ <div id="hpb-nav"> <h3 class="hpb-c-index">ナビゲーション</h3> <ul> <li id="nav-toppage"><a href="#"><span class="en">top page</span><span class="ja">トップページ</span></a> <li id="nav-item"><a href="#"><span class="en">item list</span><span class="ja">商品一覧</span></a> <li id="nav-order"><a href="#"><span class="en">order</span><span class="ja">ご注文方法</span></a> <li id="nav-shop"><a href="#"><span class="en">shop info</span><span class="ja">ショップ案内</span></a> <li id="nav-campaign"><a href="#"><span class="en">campaign</span><span class="ja">キャンペーン</span></a> </ul> </div> <!-- navi end --><!-- aside --> <div id="hpb-aside"> <div id="ranking"> <h3>メニュー</h3> <ol> <li class="r01"><a href="#">商品名商品名商品名</a> <li class="r02"><a href="#">商品名商品名商品名</a> <li class="r03"><a href="kounenki/html">商品名</a> <li class="r04"><a href="kounenki/html">商品名</a> <li class="r05"><a href="hiesyou.html">商品名</a> </ol> </div> <div id="banner"> <h3 class="hpb-c-index">バナースペース</h3> <ul> <li><a href="#" id="banner-sale">SALE</a> <li><a href="#" id="banner-present">プレゼント</a> <li><a href="#" class="banner-magazine">メルマガ登録</a> <li><a href="#" id="banner-rss">RSS</a> </ul> </div> ちなみに(li class)は最初は(li id])でしたが変更しました。 ●変更後(鍼灸院のＨＰ) <div id="ranking"> <h3>施術科目</h3> <ol> <li >肩こり腰痛<a href="file:///F:/builder/katakoriyoutuu.html">駅前で人気 オススメ 頭痛 肩こり 腰痛 </a> <li >頭痛<a>商品名商品名商品名</a> <li >アトピー<a href="file:///F:/builder/atopi-.html"> 駅前で人気 オススメ </a> <li>不妊症<a href="#">商品名商品名商品名</a> <li >自律神経失調症<a href="#">商品名商品名商品名</a> <li >不眠症<a href="#">商品名商品名商品名</a> <li >美顔はり<a href="#">商品名商品名商品名</a> <li >女性の気になる症状<a href="#">女性の気になる症状</a> <li >耳つぼダイエット<a href="#">商品名商品名商品名</a><br> </ol> </div> どうしても知りたいので もっとタグが必要ならおっしゃってください。 こちらもどこからいえばいいのかまったくわからないので。 よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- spanで指定する方法教えてほしいです。
<span class="top">Home</span> topで指定したのですが、うまく画像が表示されません。 どうすればうまくbackground-colorのimages/btn046_06.gifが表示されるでしょうか？ よろしくお願いします。 htmlの部分 <div id="left_navi"> <ul> <li><a href="#"><span class="top">Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> </ul></nav> </div> cssの部分 #left_navi{ width:230px; height:700px; background-color:#e6e6e6; float:left; } #left_navi ul{ list-style-type: none; padding-top: 20px; color:blue; } #left_navi li{ padding-top:20px; } #left_navi a{ text-align: center; display:block; width:100%; height:40px; padding-bottom:9px; padding-top: 11px; padding-left:-50px; padding-right:30px; background-image:url(images/btn046_05.gif); background-repeat:no-repeat; color:gray; } #left_navi a .top{ background-image:url(images/btn046_06.gif); } #left_navi a:hover{ background-image:url(images/btn046_10.gif); color: blue; }
- ベストアンサー
- CSS
