質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

165閲覧

ナビゲーションとメイン画像を正常な位置に直したい。

princess_usagi

総合スコア13

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/03 13:33

編集2018/08/03 23:37
コード HTML index.htmlです。 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta charet="utf-8"> <title>映画の世界を旅する シネマツアーズ</title> <!--cssを影響させる--> <link href="css/reset.css" rel="stylesheet"> <!--リセットCSSでぺージ内の装飾がリセットされる--> <link href="style.css" rel="stylesheet"> <!--自分の指定した装飾が適用される--> <link href="css/flexslider.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script defer src="js/jquery.flexslider.js"></script> <script type="text/javascript"> $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", direction: "horizontal", reverse: false, slideshow: true, slideshowSpeed: 4000, animationSpeed: 1000, initDelay: 0, randomize: false, animationLoop: true, controlNav: true, directionNav: true, }); }); </script> </head> <body> <div id="container"> <!--ここからヘッダーエリア--> <header> <ul> <li><a href="#">サイトマップ</a></li> <li><a href="#">プライバシーポリシー</a></li> <li><a href="#">お問い合わせ</a></li> </ul> <!--シネマツアーズのロゴマーク--> <h1><img src="images/logo.png" alt="シネマツアーズ"></h1> </header> <!--ヘッダーこエリアここまで--> <!--ここからナビゲーションエリア--> <nav> <ul> <li id="nav1"><a href="fantasy.html">ファンタジー</a></li><!-- --><li id="nav2"><a href="mystery.html">ミステリー</a></li><!-- --><li id="nav3"><a href="lovestory.html">ラブストーリー</a></li><!-- --><li id="nav4"><a href="horrer.html">ホラー</a></li> </ul> </nav> <!--ナビゲーションエリアここまで--> <!--ここから各メイン画像--> <div class="flexslider"> <ul class="slides"> <li><img src="images/main.jpg"></li> <li><img src="images/main_f.jpg"></li> <li><img src="images/main_l.jpg"></li> <li><img src="images/main_h.jpg"></li> <li><img src="images/main_m.jpg"></li> </ul> </div> <!--各メイン画像ここまで--> <!--ここからメインエリア--> <main> <h2>映画の世界へご招待</h2> <p class="floating"><img src="images/index_intro.jpg" alt=""></p> <p>魔法の世界を飛び回るファンタジーアドベンチャー、張り巡らされた謎をひとうひとつ紐解いて行くミステリー、心温まるラブストーリーに、背筋も凍るようなホラー。</p> <p>映画を観ている時、私たちは世界を救う勇者であったり、壮大な謎に立ち向かう探偵になりきります。</p> <p>SEIKOトラベルサービスでは、そんな映画の主人公になりきれるツアーをご用意しました。</p> <p>ご家族で、恋人と、もちろんお一人でも楽しめるプランも充実。フィルムの世界を存分にご堪能ください。</p> <h2>プランのご紹介</h2> <p>ご用意しているプランの一覧です。</p> <section class="planList"> <h3><span class="copy">勇者が旅した世界を巡る</span><br> ファンタジーコース</h3> <p><img src="images/sub1.jpg" alt=""></p> <p>中世ヨーロッパの冒険譚に出てくるような街やお城をめぐったり、 かの魔法使いが通ったと言われる伝説の魔法学校を訪れてファンタジーの世界に浸ります。</p> <p class="readmore"><a href="fantasy.html">コース詳細を見る</a></p> </section> <section class="planList"> <h3><span class="copy">張り巡らされた謎解きに挑戦</span><br> ミステリーコース</h3> <p><img src="images/sub2.jpg" alt=""></p> <p>最初に用意されたわずかなヒントをもとに街中にちりばめられた謎を解いていくアドベンチャー式のコースです。クリアされた方には景品が贈呈されます。</p> <p class="readmore"><a href="mystery.html">コース詳細を見る</a></p> </section> <section class="planList"> <h3><span class="copy">恋人と甘いひと時を</span><br> ラブストーリーコース</h3> <p><img src="images/sub3.jpg" alt=""></p> <p>恋人でのご参加限定のコースです。映画やドラマの撮影で利用されたテーマパークで遊び、海辺で語り、レストランで素敵なディナーをお楽しみください。</p> <p class="readmore"><a href="lovestory.html">コース詳細を見る</a></p> </section> <section class="planList"> <h3><span class="copy">無人の廃墟で出会うのは・・・</span><br> ホラーコース</h3> <p><img src="images/sub4.jpg" alt=""></p> <p>かつては人が暮らしていた建物が放置されて、廃墟と化した建物。そんな不気味な雰囲気のスポットを巡るツアーです。スリリングな旅をお望みの方に。</p> <p class="readmore"><a href="horrer.html">コース詳細を見る</a></p> </section> <h2>各コース概要</h2> <table> <tr> <th>コース名</th> <th>旅行日数</th> <th>最低遂行人数</th> <th>価格(税込)</th> </tr> <tr> <td>ファンタジーコース</td> <td>6日間</td> <td class="numberOfPeople">15名</td> <td class="priceCell">188,000円〜</td> </td> <tr> <td>ミステリーコース</td> <td>1日</td> <td class="numberOfPeople" rowspan="2">10名</td> <td class="priceCell">19,800円〜</td> </tr> <tr> <td>ラブストーリーコース</td> <td>2日間</td> <td class="priceCell">55,000円〜</td> </tr> <tr> <td>ホラーコース</td> <td>6日間</td> <td class="numberOfPeople">15名</td> <td class="priceCell">179,000円〜</td> </tr> <tr> <td colspan="4">※より詳しい情報につきましては各コースのページをご覧ください。</td> </tr> </table> </main> <!--メインエリアここまで--> <!--ここからサイドバー--> <aside> <h2>お知らせ</h2> <dl> <dt>10月15日</dt> <dd>年末年始のスケジュールを追加</dd> <dt>9月6日</dt> <dd>ミステリーコースが新ストーリーに</dd> <dt>8月7日</dt> <dd>ホラーコース夏休みキャンペーン実施</dd> <dt>6月25日</dt> <dd>ファンタジーコースを新設</dd> </dl> </aside> <!--サイドバーここまで--> <!--ここからフッダーエリア--> <footer> <p id="copyright">&copy; 2016 Seiko Travel Service.</p> </footer> <!--フッダーエリアここまで--> </div> </body> </html> CSSです。 /*各タグへの指定*/ *{ box-sizing:border-box;/*ユニバーサルセレクタ・ページ内のすべての要素に対してという意味*/ } body { line-height:1.2; font-family:"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif; } img{ border:none; /*画像の囲み線、枠線をなくす、表示させない。ひな形に入れておく、大切*/ } h1 { color: red; } h2 { color:#ff0000; font-size:175%; font-weight: normal; border-left: 10px solid #ff0000; /*ソリッド=実線、一本線*/ padding:5px 10px 3px; /*内側の余白 上 左右 下*/ margin: 15px 0;/*外側の余白 上下 左右*/ clear: both; } h3 { color:#ff8800; font-size:150%;/*文字の上から下までの高さ*/ font-weight:normal; /*文字の太さは標準の太さ*/ margin-bottom:10px; /*外側の余白 下の余白*/ } p{ color:#333;/*?なんで3桁*/ line-height: 1.8; /*行間上下の窮屈さをなくすため調整する*/ } dl{ /*リスト全体*/ border-top: 1px solid #666666; /*上だけ残す表示にする dlの下にボーダーライン作る*/ margin:0 15px; /*外側の余白 上下 左右*/ } dt{ /*用語、日付*/ padding: 10px 0; /*内側の余白 上下 左右*/ font-weight: bold;/*文字の太さは太字*/ } dd{ /*説明、更新内容*/ border-bottom: 1px dashed #666666;/*下の線*/ padding-bottom: 10px;/*内側の余白 上下左右*/ } ul { list-style: none; } /*リンクの指定*/ a:link { /*未訪問*/ color:#88ffff;/*薄い水色*/ } a:visited { /*訪問済み*/ color: #33ffff;/*たまご色*/ } a:hover { /*マウスが乗った時*/ color: #ff88ff;/*薄いピンク*/ } a:active { /*クリックされた時*/ color: #ff00cc;/*濃いピンク*/ } /*クラス・IDの指定*/ /*見出しのキャッチコピー*/ .copy {/*全体中の一部のグループにつけるグループ名にクラス名をつける ドットをつける*/ font-size: 75%; /*見出し文字の大きさ*/ } /*コース詳細を見る 部分*/ .readmore { /*クラス名なのでドットをつける*/ text-align: right; /*クラス属性に名前をつけたものを右に揃える*/ } /*著作権表示部分*/ #copyright {/*全体の唯一のものにIDをつける ドットではなく#をつける*/ text-align: center; /*?真ん中に寄せる*/ color: #ffffff; } /*?画像に対する文字の回り込み*/ .floatImg { float: left; margin-right: 15px; } /*?テーブル関連の指定*/ table { border: 2px solid #778877;/*線の太さの数値 一本線*/ border-collapse: collapse; width:540px; margin: 0 auto;/*外側の余白 上下0 左右は自動*/ } th,td { border: 1px solid #000000; padding: 5px;/*内側の余白 上下左右5px*/ } th { /*見出しセル*/ background-color: #666666; color: #ffffff; text-align: center; } .numberOfPeople { /*?各コース概要の中*/ text-align: center; } .priceCell {/*?各コース概要の中*/ text-align: right; } /*?レイアウト関連指定*/ #container { width: 960px;/*横幅*/ margin: 0 auto;/*外側の余白 上下 左右自動*/ } /*ヘッダー*/ header h1 { margin-left: 20px; } header h2 { background-color: rgba(0,0,0,0.7); color: #ffffff; margin-top: 70px; margin-left: 300px; padding: 10px 15px 8px; font-size: 150%; } header ul{ /*ヘッダーの箇条書きリスト全体*/ text-align: right; /*右に寄せる*/ } header li{ display: inline;/*各項目*/ margin-right: 10px; /*その側の余白 右に*/ line-height: 2; /*行間上下の窮屈さをなくすため調整する*/ } header a:link{ /*未訪問*/ color: #6600ff; text-decoration: none; } header a:hover{ /*マウスが乗った時*/ color: #ff8800; text-decoration: underline;/*アンダーラインを消す*/ } /*ナビゲーション*/ nav { background-color: lightblue; -webkit-box-sizing:border-box; box-sizing:border-box; } nav ul{ display:flex; -webkit-box-sizing:border-box; box-sizing:border-box; } nav li{ display: inline-block; border-right: 1px solid #ffffff; width:25%; text-align: center; line-height: 2; } nav li:last-child { border-right:none; } nav a:link{ text-decoration: none; color: #ffffff; background-color: #333333; display: block; }/*未訪問*/ nav a:visited { color:#ffffff; }/*訪問済み*/ nav a:hover {/*マウスが乗った時*/ background-color: #ff8800; } /*メイン*/ main{ display:block; padding-bottom: 20px; width: 600px; float: left; } main p{ padding:0 10px; } /*フッダー*/ footer { background-color: #333333; padding:15px; clear: both; } /*プラン紹介部分*/ .planList { border: 3px double #333333; border-radius: 10px; margin-bottom: 10px; margin-left: 10px; width: 290px; float: left; } .planList img { width: 100%; } planList h3 { padding: 5px 15px; } planList p{ padding: 5px 15px; } /*サイドバー*/ aside { width: 300px; /*margin-left:660px;*/ float: right; border: 1px solid #666666; margin-top: 15px; } aside dd:last-child{ border-bottom: none; } aside h2 { border: none; font-size: 150%; color:#000; } /*index以外のページ指定*/ #fantasy #nav1 a, #mystery #nav2 a, #lovestory #nav3 a, #horrer #nav4 a { background: #ff8800 url(images/bg_nav.png)no-repeat 15px center; } #fantasy h3, #mystery h3, #lovestory h3, #horrer h3 { margin: 15px 0; padding: 5px 10px; border-bottom: 1px solid #ff8800; }

HTML,CSS勉強中のものです。
ナビゲーションがずれていて左に1,5センチくらい水色の空欄ができました。。
その下のメイン画像5枚が1,5センチ位右にずれています。
どうやったら直るでしょうか?
ググって調べるとき どのような文字で検索したらいいのでしょうか?
上手く質問ができてないので適切な回答が見つけられません。
正常の形に戻してからこの5枚をJavaScriptで動かす予定です。
http://cinema11.web.fc2.com/

直りました。ありがとうございます。
後、追加質問なのですが
ナビゲーションのミステリー等のボタンを押すとボタンの左位置に右向き▽マークが出るのですがこれを消すにはどうしたらいいでしょうか?
どのような文字で検索すればいいのでしょうか?
よく見たら左の水色は消えて正常に
なりましたが、5枚の画像は右に1、5センチずれたままです。
これはどこで直したらいいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ul要素にはデフォルトでpadding-leftに40pxが設定されています。
ブラウザにより違うかもしれません。
その水色の部分はデフォルトのpadding-left分です。

なので、nav ul のpaddingをいじってやればいいでしょう。

css

1nav ul{ 2 display:flex; 3 -webkit-box-sizing:border-box; 4 box-sizing:border-box; 5 padding-left: 0px; 6}

こういうのはF12押して開発者ツールを見るとか、調べたい要素を右クリックして「要素の検証」や「要素の調査」などを選択するとわかります。

8/4 追記分

  • 右向き三角形は、こちらでは再現しないので提示以外のリソースに含まれれている何かじゃないでしょうか。発生したら開発者ツール見て中身を確認しましょう。
  • 画像の余白については…あなた回答ちゃんと読んでないでしょ。私は冒頭にどう書きましたっけ?

投稿2018/08/03 14:47

編集2018/08/04 05:53
hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問