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

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

新規登録して質問してみよう
ただいま回答率
85.51%
float(CSS)

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

Brackets

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

HTML

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

CSS

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

Q&A

4回答

3084閲覧

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

yahret45

総合スコア41

float(CSS)

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

Brackets

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/03/06 04:40

編集2022/01/12 10:55

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

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

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

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

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

html

1<body> 2 <div id="wrap"> 3 <div><img src="logo.png"></div> 4 <div class="header">CHEESE DEVELOPMENT</br>GROWTH CEESE</br>CHEESE PERSPECTIVE<br>CHEESE GENERATOR</div> 5 <div><img src="bg-cheese.jpg"></div> 6 <div><img src="catch.png"></div>``` 7 8#cssは以下のように記載しております。 9```body { 10 line-height: 1; 11} 12article, aside, details, figcaption, figure, 13footer, header, hgroup, menu, nav, section { 14 display: block; 15} 16 17header{ 18 text-align: right; 19 float: right; 20} 21 22 23nav ul, 24ul { 25 list-style: none; 26} 27 28blockquote, q { 29 quotes: none; 30} 31 32blockquote:before, blockquote:after, 33q:before, q:after { 34 content: ''; 35 content: none; 36} 37 38a { 39 margin: 0; 40 padding: 0; 41 color:#000; 42 text-decoration: none; 43 vertical-align: baseline; 44 background: transparent; 45} 46 47/* change colours to suit your needs */ 48ins { 49 background-color: #ff9; 50 color: #000; 51 text-decoration: none; 52} 53 54merit{ 55 float 56} 57 58/* change colours to suit your needs */ 59mark { 60 background-color: #ff9; 61 color: #000; 62 font-style: italic; 63 font-weight: bold; 64} 65 66del { 67 text-decoration: line-through; 68} 69 70abbr[title], dfn[title] { 71 border-bottom: 1px dotted; 72 cursor: help; 73} 74 75dl { 76 background-color:; 77} 78 79dl { 80 width: 230px; 81 height: 150px; 82 margin: 0auto; 83} 84body{ 85 width:100%; /*ページ全体の幅は100%と指定する*/ 86 text-align:center;/*ページ全体を中央揃えにする*/ 87} 88#wrap{ 89 width: 960px; /*全体の幅を指定する*/ 90 margin: 0 auto; /*マージンの指定をする、ブラウザ対策*/ 91 text-align:left; /*全体を左揃えにする。*/ 92} 93.aa { 94 float:left; 95} 96header{ 97 float:right; 98} 99table { 100 border-collapse: collapse; 101 border-spacing: 0; 102} 103 104/* change border colour to suit your needs */ 105hr { 106 display: block; 107 height: 1px; 108 border: 0; 109 border-top: 1px solid #cccccc; 110 margin: 1em 0; 111 padding: 0; 112} 113 114input, select { 115 vertical-align: middle; 116} 117 118 119 120*:first-child + html body { 121 overflow: hidden; 122} 123 124* html body { 125 overflow: hidden; 126} 127 128input, select, textarea { 129 margin: 0px; 130 color: #727172; 131 border: solid 1px #bababa; 132 font-weight: normal; 133 padding: 0px 2px; 134} 135 136table { 137 border-collapse: collapse; 138 border-spacing: 0; 139} 140 141img { 142 border: 0px; 143 display: inline; 144} 145 146*:first-child + html img { 147 display: inline !important; 148} 149 150* html img { 151 display: inline !important; 152} 153 154a:focus { 155 outline: none; 156} 157 158sup { 159 vertical-align: top; 160} 161 162sub { 163 font-size: x-small; 164 vertical-align: text-bottom; 165 padding-right: 3px; 166} 167 168.clearfix:after { 169 visibility: hidden; 170 display: block; 171 font-size: 0; 172 content: " "; 173 clear: both; 174 height: 0; 175 } 176* html .clearfix { zoom: 1; } /* IE6 */ 177*:first-child+html .clearfix { zoom: 1; } /* IE7 */

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

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

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

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

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

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

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

yamato_hikawa

2016/03/06 07:40 編集

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

回答4

0

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

投稿2016/11/23 07:30

gasuko

総合スコア27

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

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

0

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

投稿2016/11/23 07:29

編集2016/11/23 07:30
gasuko

総合スコア27

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

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

0

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

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

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

投稿2016/11/22 13:53

KatsukiSugiura

総合スコア335

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

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

0

  1. HTMLを作りかえます。左右に振り分けたいロゴとテキスト部分をタグで囲います。

構造的にヘッダーだと思ったのでheaderタグで囲っていますが、divでも構いません。

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

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

html

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

css

1body { 2 line-height: 1; 3} 4 5article, aside, details, figcaption, figure, 6footer, header, hgroup, menu, nav, section { 7 display: block; 8} 9nav ul, 10ul { 11 list-style: none; 12} 13 14blockquote, q { 15 quotes: none; 16} 17 18blockquote:before, blockquote:after, 19q:before, q:after { 20 content: ''; 21 content: none; 22} 23 24a { 25 margin: 0; 26 padding: 0; 27 color:#000; 28 text-decoration: none; 29 vertical-align: baseline; 30 background: transparent; 31} 32 33/* change colours to suit your needs */ 34ins { 35 background-color: #ff9; 36 color: #000; 37 text-decoration: none; 38} 39 40/* change colours to suit your needs */ 41mark { 42 background-color: #ff9; 43 color: #000; 44 font-style: italic; 45 font-weight: bold; 46} 47 48del { 49 text-decoration: line-through; 50} 51 52abbr[title], dfn[title] { 53 border-bottom: 1px dotted; 54 cursor: help; 55} 56 57dl { 58 background-color:; 59} 60 61dl { 62 width: 230px; 63 height: 150px; 64 margin: 0auto; 65} 66body{ 67 width:100%; /*ページ全体の幅は100%と指定する*/ 68 text-align:center;/*ページ全体を中央揃えにする*/ 69} 70 71#wrap{ 72 width: 960px; /*全体の幅を指定する*/ 73 margin: 0 auto; /*マージンの指定をする、ブラウザ対策*/ 74 text-align:left; /*全体を左揃えにする。*/ 75} 76.aa { 77 float:left; 78} 79table { 80 border-collapse: collapse; 81 border-spacing: 0; 82} 83 84/* change border colour to suit your needs */ 85hr { 86 display: block; 87 height: 1px; 88 border: 0; 89 border-top: 1px solid #cccccc; 90 margin: 1em 0; 91 padding: 0; 92} 93 94input, select { 95 vertical-align: middle; 96} 97 98*:first-child + html body { 99 overflow: hidden; 100} 101 102html body { 103 overflow: hidden; 104} 105input, select, textarea { 106 margin: 0px; 107 color: #727172; 108 border: solid 1px #bababa; 109 font-weight: normal; 110 padding: 0px 2px; 111} 112 113table { 114 border-collapse: collapse; 115 border-spacing: 0; 116} 117 118img { 119 border: 0px; 120 display: inline; 121} 122 123*:first-child + html img { 124 display: inline !important; 125} 126 127html img { 128 display: inline !important; 129} 130a:focus { 131 outline: none; 132} 133 134sup { 135 vertical-align: top; 136} 137 138sub { 139 font-size: x-small; 140 vertical-align: text-bottom; 141 padding-right: 3px; 142} 143 144.clearfix:after { 145 visibility: hidden; 146 display: block; 147 font-size: 0; 148 content: " "; 149 clear: both; 150 height: 0; 151 } 152 153html .clearfix { zoom: 1; } /* IE6 */ 154*:first-child+html .clearfix { zoom: 1; } /* IE7 */ 155 156/* 新しく追加した設定 */ 157.logo { 158 float: left; 159} 160 161.text{ 162 text-align: right; 163 float: right; 164}

備考

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

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

css

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

無効な設定方法。

css

1merit{ float }

投稿2016/03/06 07:55

編集2016/03/06 07:59
yamato_hikawa

総合スコア2092

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問