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

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

ただいまの
回答率

90.47%

  • HTML

    11846questions

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

  • CSS

    7761questions

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

  • Brackets

    72questions

    Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

  • float(CSS)

    25questions

    これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

cssのfloatの箇所が分かりません。

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,617

yoshoo219

score 23

初めて投稿させて頂きます。

cssで、一段組みのサイト全体の中央揃えと画像、
テキストの左揃えの箇所が分かりません。

サイト全体を中央揃えにし、全体の幅960px、
logo.pngを幅の一番左に、
「CHEESE DEVELOPMENT</br>
GROWTH CEESE</br>
CHEESE PERSPECTIVE<br>
CHEESE GENERATOR」

という文言を幅の一番右(logo.pngと同じ高さで)に配置したいと考えておりますが、
現状は文字の部分が右側に配置されません。

htmlは以下のように記載しております。

<body>
    <div id="wrap">
    <div><img src="logo.png"></div>
      <div class="header">CHEESE DEVELOPMENT</br>GROWTH CEESE</br>CHEESE PERSPECTIVE<br>CHEESE GENERATOR</div>
    <div><img src="bg-cheese.jpg"></div>
    <div><img src="catch.png"></div>```  

#cssは以下のように記載しております。

body {   line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   display: block; }

header{     text-align: right;     float: right; }

nav ul, ul {   list-style: none; }

blockquote, q {   quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {   content: '';   content: none; }

a {   margin: 0;   padding: 0;   color:#000;   text-decoration: none;   vertical-align: baseline;   background: transparent; }

/* change colours to suit your needs */ ins {   background-color: #ff9;   color: #000;   text-decoration: none; }

merit{     float }

/* change colours to suit your needs */ mark {   background-color: #ff9;   color: #000;   font-style: italic;   font-weight: bold; }

del {   text-decoration: line-through; }

abbr[title], dfn[title] {   border-bottom: 1px dotted;   cursor: help; }

dl {     background-color:; }

dl {  width: 230px;  height: 150px;  margin: 0auto; } body{   width:100%; /*ページ全体の幅は100%と指定する*/  
  text-align:center;/*ページ全体を中央揃えにする*/ }

wrap{ 

  width: 960px;       /*全体の幅を指定する*/
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/   text-align:left; /*全体を左揃えにする。*/ } 
.aa {    float:left;  } header{     float:right; } table {   border-collapse: collapse;   border-spacing: 0; }

/* change border colour to suit your needs */ hr {   display: block;   height: 1px;   border: 0;   border-top: 1px solid #cccccc;   margin: 1em 0;   padding: 0; }

input, select {   vertical-align: middle; }

*:first-child + html body {   overflow: hidden; }

  • html body {   overflow: hidden; }

input, select, textarea {   margin: 0px;   color: #727172;   border: solid 1px #bababa;   font-weight: normal;   padding: 0px 2px; }

table {   border-collapse: collapse;   border-spacing: 0; }

img {   border: 0px;   display: inline; }

*:first-child + html img {   display: inline !important; }

  • html img {   display: inline !important; }

a:focus {   outline: none; }

sup {   vertical-align: top; }

sub {   font-size: x-small;   vertical-align: text-bottom;   padding-right: 3px; }

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0;     }

  • html .clearfix             { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ ``` 

お知恵をお貸し頂けますと幸いです。

何卒よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • yamato_hikawa

    2016/03/06 16:30 編集

    コードの部分は、``` で上下を囲うときれいに表示されます。
    HTMLを囲うときは「```html」と「```」、CSSを囲うときは「```css」と「```」で囲ってみてください。

    キャンセル

回答 4

0

  1. HTMLを作りかえます。左右に振り分けたいロゴとテキスト部分をタグで囲います。
    構造的にヘッダーだと思ったのでheaderタグで囲っていますが、divでも構いません。

  2. ヘッダーにclearfixクラスをつけます。

  3. 中のdivそれぞれにクラスをつけます。仮に「logo」と「text」とつけました。

<div id="wrap">
  <header class="clearfix">
    <div class="logo"><img src="logo.png" width="100" height="50"></div>
    <div class="text">CHEESE DEVELOPMENT</br>GROWTH CEESE</br>CHEESE PERSPECTIVE<br>CHEESE GENERATOR</div>
  </header>
  <div><img src="bg-cheese.jpg"></div>
  <div><img src="catch.png"></div>
</div>
  1. CSS上で、logoとtextクラスに左右振り分け用の設定をします。
body { 
  line-height: 1; 
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
  display: block; 
}
nav ul, 
ul { 
  list-style: none; 
}

blockquote, q { 
  quotes: none; 
}

blockquote:before, blockquote:after, 
q:before, q:after { 
  content: ''; 
  content: none; 
}

a { 
  margin: 0; 
  padding: 0; 
  color:#000; 
  text-decoration: none; 
  vertical-align: baseline; 
  background: transparent; 
}

/* change colours to suit your needs */ 
ins { 
  background-color: #ff9; 
  color: #000; 
  text-decoration: none; 
}

/* change colours to suit your needs */ 
mark { 
  background-color: #ff9; 
  color: #000; 
  font-style: italic; 
  font-weight: bold; 
}

del { 
  text-decoration: line-through; 
}

abbr[title], dfn[title] { 
  border-bottom: 1px dotted; 
  cursor: help; 
}

dl { 
    background-color:; 
}

dl { 
 width: 230px; 
 height: 150px; 
 margin: 0auto; 
} 
body{ 
  width:100%; /*ページ全体の幅は100%と指定する*/     
  text-align:center;/*ページ全体を中央揃えにする*/ 
}

#wrap{
  width: 960px;       /*全体の幅を指定する*/   
  margin: 0 auto;    /*マージンの指定をする、ブラウザ対策*/ 
  text-align:left; /*全体を左揃えにする。*/ 
}    
.aa { 
   float:left;  
}
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
}

/* change border colour to suit your needs */ 
hr { 
  display: block; 
  height: 1px; 
  border: 0; 
  border-top: 1px solid #cccccc; 
  margin: 1em 0; 
  padding: 0; 
}

input, select { 
  vertical-align: middle; 
}

*:first-child + html body { 
  overflow: hidden; 
}

html body { 
  overflow: hidden; 
}
input, select, textarea { 
  margin: 0px; 
  color: #727172; 
  border: solid 1px #bababa; 
  font-weight: normal; 
  padding: 0px 2px; 
}

table { 
  border-collapse: collapse; 
  border-spacing: 0; 
}

img { 
  border: 0px; 
  display: inline; 
}

*:first-child + html img { 
  display: inline !important; 
}

html img { 
  display: inline !important; 
}
a:focus { 
  outline: none; 
}

sup { 
  vertical-align: top; 
}

sub { 
  font-size: x-small; 
  vertical-align: text-bottom; 
  padding-right: 3px; 
}

.clearfix:after { 
    visibility: hidden; 
    display: block; 
    font-size: 0; 
    content: " "; 
    clear: both; 
    height: 0; 
    }

html .clearfix { zoom: 1; } /* IE6 */ 
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/* 新しく追加した設定 */
.logo {
  float: left;
}

.text{ 
    text-align: right; 
    float: right; 
}

 備考

以下の設定を消しました。

「header」クラスではなく、headerタグに対する指定になっている。

header { text-align: right; float: right; }

無効な設定方法。

merit{ float }

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

私ならロゴとテキストのディブをディブで囲って固定配置ですね。

囲ったディブにポジションでリラティブ。

ロゴとテキストのディブにポジションアブソルート。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

回答場所を間違えました。失礼しました。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

.headerの中に.logoを移動して.headerにclearfixをかける。
.logoをfloat:left; .textをfloat:rightだとだめですか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • HTML

    11846questions

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

  • CSS

    7761questions

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

  • Brackets

    72questions

    Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

  • float(CSS)

    25questions

    これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。