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

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

ただいまの
回答率

90.76%

  • HTML

    8310questions

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

  • CSS

    5331questions

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

ローカル環境とPC上で、HTMLが同じように反映されません

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 212

andrew57

score 108

前提・実現したいこと

検索ボックス高さを大きくしようと高さを大きくしたのですが、
ローカル環境とPC上で、HTMLが同じように反映されません。

これはいったいなぜでしょうか?

●ローカル環境
イメージ説明

●PC上(mac)
イメージ説明

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">
<title>My Web Site</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">

 </script>

</head>
<body>


<header>
<div class="header-right">
  <li><a href="index2.html" class="login" target="_blank"><p class="login1">新規登録</p></a></li>

</div>


</header>


<div class="main">

    <h1>行ってみたい<span></span>一覧</h1>



</div>


<div class="wrapper">

  <form class="research" action="search.php" method="post">
      <input  class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
      <input class="research" type="submit" name="research" value="検索"><br>

  </form>


  <table border="1">

    <tr>
      <th class="head">順位</th>
      <th class="head">国名</th>
      <th class="head">食べたい食べ物</th>
      <th class="head">理由</th>
      <th class="head"></th>
    </tr>


  <tr>
    <td>1位</td>
    <td>スペイン</td>
    <td>パエリア</td>
    <td>サッカーを見たいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>2位</td>
    <td>アメリカ</td>
    <td>グリルロブスター</td>
    <td>ダンスの文化を知りたいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>3位</td>
    <td>インド</td>
    <td>カレーライス</td>
    <td>発展途上の国を間近で見てみたいから</td>
   <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>4位</td>
    <td>タイ</td>
    <td>ガパオ</td>
    <td>バンコクの発展具合を見てみたいから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>

  <tr>
    <td>5位</td>
    <td>フィリピン</td>
    <td>アドボ </td>
    <td>友達が楽しそうに働いているから</td>
    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
  </tr>



  </table>

</div>






<footer>


<div class="footer-left">
<img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
<p>&copy travel enjoy.</p>
</div>

<div class="footer-list">
    <ul>
      <li><a  href="https://www.airbnb.jp/">利用規約</a></li>
      <li><a  href="https://www.uber.com/ja-JP/">プライバシー</a></li>
      <li><a  href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
    </ul>
</div>



</footer>

 <script src="script.js">

  </script>


</body>
</html>

●style.css

@charset "UTF-8";
/*全体のCSS*/

body {
    font-family: "MS ゴシック",sans-serif;
}

li {
    list-style: none;
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing=0' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ここから下はそれぞれのCSS */
.header-left {
float: left;
}

.header-right {
    float: right;
    margin-bottom: 30px;
    background-color: white;
    margin-right: 20px;
    opacity: 0.8;
}

.header-right:hover {
      background-color:skyblue;
}

.header-right a {
    width: 80px;
    margin-top: 14px;
    display: block;
    padding: 22px 25px;
    color: blue;
    margin: auto 0;
    letter-spacing: 2.5px;
}


.logo {
    width: 130px;
    margin-left: 15px;
    height: 60px;
}


/* mainのCSS */

.main {
    padding: 200px 0 150px 0;
    background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
    background-size: cover;
    width: 100%;
}

form {
    text-align: center;
}

.main h1 {
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 100px;
}

span {
    color: #FA3932;
}

/* ボタンのCSS */

.research {
  margin-top: 30px;
}


input[type="submit"] {
  width: 5%;
  padding: 7px;
  border-radius: 4px;
  color: black;
  font-size: 14px;
  background-color: white;
}

input[type="search"] {
  padding: 1em .4em;
}



/* tableのCSS */



table , td, th {
    border: 1px solid #595959;
    border-collapse: collapse;
  margin: auto;
  margin-top: 100px;
  margin-bottom: 100px;
  font-size: 30px;
}

.warapper {
  height: 300px;
}

table a {
    text-decoration: none;
  color: #0000ff;
}



table a:hover {
    color: #6699ff;
    text-decoration: underline;
}


table a:active {
    color: #993366;
}

.head {
  background-color: #CCFFFF;
}

/* フッターのCSS */

footer {
    border-top: solid 1px black;
    height: 110px;
    width: 100%;
}

footer img {
    width: 130px;
    margin-left: 15px;
    height: 60px;
}

.footer-left {

    height: 110px;
    float: left;
}

.footer-list {
    color:#b3aeb5;
    bottom: 20px;
    vertical-align: middle;
    margin: auto 0;
    float: right;
    font-weight: normal;

    height: 110px;
}

.footer-list li {
    float: left;
    letter-spacing: 7px;
    padding: 47px 15px;
}

footer p {
    margin-top: 10px;
    padding-left: 10px;
}

どうかご教授いただけたら嬉しいです。
宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kjml

    2017/09/08 20:30

    ローカル環境とは?ソースが同じという確証があるなら、表示に違いがあれば環境に違いがあると思いますので、ローカル環境が何であるか、PCでの確認のブラウザやバージョンなども明記されると違いがどこかにつながりやすいと思います。

    キャンセル

  • x_x

    2017/09/08 21:24

    ローカルはPCではないのでしょうか?

    キャンセル

  • kjml

    2017/09/08 22:13

    おや?何か勘違いしてますでしょうか?尚更ローカル環境とPC上の違いがわからなくなるのですが・・・

    キャンセル

  • x_x

    2017/09/11 16:33

    ええと、わたしも質問者への質問です。

    キャンセル

回答 2

checkベストアンサー

+1

ブラウザにキャッシュが残っていたりはしませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 19:39

    キャッシュは取り除きました。

    それでもできません。

    キャンセル

  • 2017/09/08 19:45

    そうですか、、

    それだと、すみません、わからないです。。

    キャンセル

+1

そもそも表示に差異が発生する原因を確認してみてはいかがでしょうか?

検索ボックスにあたっている Style が同一であるか確認してみてください。
Style の当たり方に差異があるはずですが、それがどこか分かれば、原因が特定に近づきます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 20:21

    原案は探しましたが見つかりませんでした。

    スタイルは同じにしてあることも確認しました。

    もう一度、確認してみようとおもきます。

    キャンセル

  • 2017/09/08 20:25

    原案が何を指しているのか分かりませんが、「あたっている Style」が同じであるか確認してください。
    chrome であれば、F12 で開ける開発ツールで、要素を選択することで確認することができます。
    「あたっている Style」が同じであれば、表示は同じになるので、「あたっている Style」に差異は発生しているはずです。

    キャンセル

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

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    常にNavi要素の一部を表示させたい

    前提・実現したいこと navのタブのうちの1つを、ページを開いた瞬間から常に選択した状態にしたいのですが、どのようにコードを書いたらいいのでしょうか? 具体的には、"今日"というタ

  • 解決済

    navのタブメニューの要素が、ずっと表示されてしまいます。

    navのtab-changeクラスにおいて、#howtoseeを、タブがクリックした時だけ表示するようにしたいのですが、他の2つの#this-weekと#todayをクリックした時

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 解決済

    HTMLで作成している検索ボックスの入力欄の高さを広げたいです。

    前提・実現したいこと HTMLで作成している検索ボックスの入力欄の高さを広げたいですが 広げることができません。 cssで設定しているのですが上手くいかないのでご教授いただけた

  • 解決済

    paddingの見抜き方を教えて下さい

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv=

  • 解決済

    画像の下にテーブルが来てしまう

    前提・実現したいこと 画像の下にテーブルが来てしまう。 画像とテーブルの間に30px隙間を空けて配置したい。 発生している問題・エラーメッセージ エラーは特に発生していない。

同じタグがついた質問を見る

  • HTML

    8310questions

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

  • CSS

    5331questions

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