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

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

ただいまの
回答率

88.61%

CSSでレスポンシブのフッターデザインを中央揃えにしたい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,659

cherryz

score 17

 前提・実現したいこと

オンラインショップ(おちゃのこネット)のデザインで、ショップ案内のフッターを作っていますが、左よりになってしまいます。
文字は左揃えのまま、デザイン(タイトル含め)を中央揃えに修正したいです。

 発生している問題・エラーメッセージ

デザインが全体的に左よりになってしまいます。

 該当のソースコード

<h1>SHOP INFORMATION</h1>
 <br>
<div id="wrapper">

<div class="float2">
<h6>送料・配送について</h6>
<p>[送料]<br>
3500円以上で送料無料。<br>3500円未満で一律250円です。
</p>
<p>[配送業者]<br>
ヤマト運輸ネコポス
</p>
<p>[配送時間]<br>
ご注文、ご決済の翌日までに出荷いたします。<br>
ポスト投函のため、お届け日時はお選びいただけません。<br>
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/help#help_charge">詳しくはこちら</a></font></p>

</div>

<div class="float2">
<h6>お支払いについて</h6>
<p>お支払いはクレジットカード決済、楽天ペイ、振り込み(前払い)がご利用いただけます。<br>
<i class="fa fa-cc-visa fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-mastercard fa-2x" aria-hidden="true"></i> <i class="fa fa-cc-jcb fa-2x" aria-hidden="true"></i><br>
※銀行振り込みの振込手数料はお客様にてご負担いただきますようお願いします。
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/help#help_charge">詳しくはこちら</a></font></p>

<h6>返品・交換・キャンセルについて</h6>
<p>破損等で使用できない場合、お取替えいたしております。
イメージ違いなどの理由でのご返品はご遠慮ください。<br>
</p>

    <p style="text-align: right"><font size=2><a href="http://beadsclub.ocnk.net/info">詳しくはこちら</a></font></p>

</div>


 <div class="float2 end">
<h6>お問い合わせ</h6>
    <font size=4><b>株式会社@@@@@</b></font><br>
時間 / 11:00~17:00(月~金)<br>
休業日 / 土曜日 日曜日 ・祝日<br>
住所:〒@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@<br>
TEL:@@@@@@@@@@@@@<br>
MAIL:@@@@@@@@@@@@@<br>

</div>
/*フッターデザイン*/
@charset "utf-8";


#wrapper {
 width:100%;
 margin:0 auto;
 padding:30px 50px 20px;
 background-color:#888
}

.float2 {
 float:left;
 width:300px;
 margin-left:50px;
}

.float2_end {
 margin-right:0;
}

h5 {
 color:#fff;
 text-align:center;
 font-size:36px;
 line-height:100px;
}

h6 {
 border-bottom:2px solid #333;
 font-size:14px;
 font-weight:bold;
 line-height:28px;
}


table {
 font-size:9px;
 width:298px;
 border:1px solid #CCC;
}

 試したこと

元々は、サイトで見つけたテンプレートを使用してみましたが、利用サイトで実装すると三段組にならず幅が狭く二段になってしまうこととレスポンシブにならなかったため、色々いじってこの形になりました。

 補足情報(FW/ツールのバージョンなど)

参考にしたサイト(カレンダーつきの部分)
http://www.billionplan.com/blog/ec/rakuten-template-footer.html

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2018/11/19 15:35

    えっとspanかdivとcssでも代用できます。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/11/19 15:35

    すみません。非推奨ではなく廃止でした...

    キャンセル

  • cherryz

    2018/11/19 15:41

    ありがとうございます。初心者のため、具体的にどのように入れたらよいかを教えていただけると助かります。

    キャンセル

回答 4

checkベストアンサー

+1

@media screen and (max-device-width : 667px) {
  #wrapper {
    flex-direction: column;
    align-items: center;
  }
} 


このようにスマホビュー用にスタイルを当てるのはどうでしょうか

スマホビューで見た画像
イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/19 17:47

    ありがとうございます。いただいたFlexboxを使ったcssにこちらを追加してみましたが、上記画像のようにならず、やはり三段が細長くつぶれてしまいました…。

    キャンセル

  • 2018/11/20 08:44

    スマホビューで見られているでしょうか?
    横幅を狭めない(スマホサイズに合わせる)と変わらないです。

    キャンセル

  • 2018/11/20 12:54

    PCを使い、シミュレーターで各デバイス表示を試したときはつぶれてしまったのですが、実際にスマホで表示したら縦並びになりました!大変失礼いたしました。これで思い通りになりました。本当にありがとうございました。

    キャンセル

+1

Flexboxを使うと簡単にできるのでコード貼ってきます。

/*フッターデザイン*/
@charset "utf-8";


#wrapper {
 width:100%;
 margin:0 auto;
 padding:30px 50px 20px;
 background-color:#ffffff;
 display: flex;
 justify-content: center;
}

.float2 {
 width:300px;
 margin-right:50px;
}

.end {
 margin-right:0;
}

h5 {
 color:#fff;
 text-align:center;
 font-size:36px;
 line-height:100px;
}

h6 {
 border-bottom:2px solid #333;
 font-size:14px;
 font-weight:bold;
 line-height:28px;
}


table {
 font-size:9px;
 width:298px;
 border:1px solid #CCC;
}

イメージ

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/19 15:53

    それはよかったです!
    floatはあまり多用すると複雑になりますし、Flexboxが主流で簡単なのでオススメします。

    キャンセル

  • 2018/11/19 15:55

    勉強します。ありがとうございました。

    キャンセル

  • 2018/11/19 15:59

    ごめんなさい、スマホで見たところ、各段落が縦積みになるべきところが、三段のまま圧縮表示されてしまうようになりました。元のデザインでは、表示幅を狭めるとレスポンシブに段落が縦積みになっていくのですが・・・。その状態で中央揃えにできないでしょうか。

    キャンセル

+1

まずはHTMLの各タグの構成や閉じ忘れ等を見直す必要があります。他の回答で出ていますが、今は使うべきではないタグ等はレイアウト崩れの原因にもなります。

そして、フッターそのものが#wrapperに収まっていません。まずは必要な要素をキチンと収めてください。その上での位置を決める必要があります。

確認方法として、#wrapperの背景色を白から別の色に変更してみてください。子要素全てがfloatされているので親となる#wrapperの高さが無い事が分かるかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/20 13:46

    コメントありがとうございます。
    最後のdivはコピペ忘れでした。ご指摘ありがとうございます。
    子要素を全て#wrapperに収めました。
    参考にした元ネタでは、レスポンシブではなく#wrapperの幅を100pxにしていたため、中央にそろっていたのですが、こちらで幅100%にしてレスポンシブにしたため、左よりになってしまったようです。
    この状態で中央揃えにしたかったので、もし方法があればまだ教えていただきたいです。
    初心者ですみません・・・。

    キャンセル

  • 2018/11/20 14:36

    ご指摘の部分を修正し、floatの指定をmargin-leftに変更したところ、当初の想定の解決になりました。ありがとうございました。

    キャンセル

  • 2018/11/20 15:13

    方法はいくつかありますが、レスポンシブだとfloatは結構ややこしくなります。

    「レスポンシブしない」場合だと、floatの子要素を親要素で括り、その親要素をさらにfloatさせて左側に50%をとり、transformで-50%など、強引ですが「中央寄せも可能」です。

    あと、細かい所ですが、最初の提示だと、#wrapperにwidth値「100%」ですが、左右paddingもあるので、その分ははみ出しスクロールが出る原因になりますので、今後このあたりも気を付けると良いかと思います。

    キャンセル

  • 2018/11/20 15:51

    ありがとうございます。width値調整してみます。
    自分のサイトと知人のサイト用で、素人ながら試行錯誤で作りました。ネットショップはレスポンシブの需要が高まっているので、今あるサイトも今後のためにレスポンシブで再現していきたいと思い、勉強中です。

    キャンセル

0

.wrapper {
text-align: center;
}
.float2 {
display: inline-block;
text-align: left;
}


参考

追記

<center>
・文章や画像などのインライン要素はそれぞれにクラスかIDをつけて.クラス名 {text-align: center;}#ID名 {text-align: center;}
・divなどのブロック要素は上記と同様にクラスかIDをつけて.クラス名 {margin: 0 auto;}#ID名 {margin: 0 auto;}
<font>
・基本は<span>でかこってCSSに.クラス名 {font-size: ;color: ;}#ID名 {font-size: ;color: ;}
・中にブロック要素があるときは<div>などのブロック要素を使って上記のようなCSSを入れてください
他にも方法はありますので'centerタグ 代用'や'fontタグ 代用'などで検索してみてください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/19 23:16

    ただ、参考に書いていただいた .wrapperや .float2 の要素を入れると、配置が大幅に崩れてしまいます。

    キャンセル

  • 2018/11/20 13:57

    画像等あげられますか?

    キャンセル

  • 2018/11/20 14:38

    コメントありがとうございます。他の部分で自己解決しました。ご協力ありがとうございました。

    キャンセル

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

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

関連した質問

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