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

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

ただいまの
回答率

90.34%

  • CSS

    6190questions

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

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1035questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

サイトのデザインについて

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 381
退会済みユーザー

退会済みユーザー

二点わからないことがあります
●右端のバーでに表示されているログアウトアイコンの位置をバーの真ん中におきたい
●商品の説明文と写真を枠線を用いて囲みたいが、これらを包括したdivを用いてもうまく反映されません
以下コードですよろしくお願いします。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8"/>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="Pd.css"/>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
        <span class="sr-only">メニュー</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">HOGETOWN</a>
    </div>
    <div id="gnavi" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="">Top</a></li>
        <li><a href="">Outer</a></li>
        <li><a href="">Inner</a></li>
        <li><a href="">Backpack</a></li>
        <li><a href="">Footwwear</a></li>
        <li><a href="">Tent</a></li>
        <li><a href="">Burner</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="">Cart</a></li>
        <li><a href="">User:Hayashi</a></li>
        <li><span class="glyphicon glyphicon-log-out" aria-hidden="true" aria-label="Right Align"></span></li>
      </ul>
    </div>
  </nav>
  <div class="ProductAll">
    <div class="Contents">
      <div class="ProductName">
        <p class= "lead">S/S DRY CREW</p>
        <p>THE NORTH FACE</p>
      </div>
      <div class="ProductDetails">
        <p>hogehogehogehoge</p>
      </div>
      <div class="ProductBuy">
        <p>在庫数:100</p>
        <p>価格:¥3856</p>
        <p>個数:<input type="text" name="productCount" value="1">(1~100までを)入力してください</p>
        <p>小計¥3856</p>
      </div>
    </div>
    <div class="ProductPicture">
      <img src="04.jpg"alt="Product">
    </div>
  </div>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
<html>
.ProductAll{
  bottom: 1px rgb(0, 0, 0) solid;
  margin: 50px;
}
.Contents{
  margin: 50px;
  float: left;
}
.ProductName{
  margin:50px;
}
.ProductPicture{
  float: left;
  margin:50px;
  border: 1px rgb(0, 0, 0) solid;
}
.glyphicon glyphicon-log-out{
  color: 
}

```

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

予想されるエラー
・htmlの閉じタグがないです。
・コード内のスタイルコードが<style>内にないです。
・floatが終わってないです。

予想される修正(抜粋)

  <div class="ProductAll clearfix">
</body>
    <style>
.ProductAll{
  bottom: 1px rgb(0, 0, 0) solid;
  border: 1px solid red;
  margin: 50px;
}

.clearfix:after {
content: ” “;
display: block;
clear: both;
height: 0;
visibility: hidden;
}

.Contents{
  margin: 50px;
  float: left;
}
.ProductName{
  margin:50px;
}
.ProductPicture{
  float: left;
  margin:50px;
  border: 1px rgb(0, 0, 0) solid;
}
.glyphicon glyphicon-log-out{
  color: #333;
}
</style>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/04/13 17:36

    解決しました!
    ありがとうございます。
    閉じタグがないようなミスをしないよう気を付けます。。。

    キャンセル

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

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

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

  • CSS

    6190questions

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

  • HTML5

    4297questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Bootstrap

    1035questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。