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

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

ただいまの
回答率

90.86%

  • CSS

    5140questions

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

  • CSS3

    1851questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

またまたCSS(flexについて)

解決済

回答 5

投稿 編集

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

pipi

score 145

皆様お疲れ様です。毎回毎回貴重なアドバイス有難うございます。

あれから、色々とCSSプロパティを学習し、要素(ブロック)の右寄せや左寄せ、揃え方など、
なんとなくわかってきました。

<footer>内にあるメニュー(#fNav)を横並びにした途端に、その下にある(#copyright)が
そのまま上に上がってきてしまい、footer内の一番下に寄せる(揃える)ことができません。
無理やりですが、以下の様にTOPをpaddingしてやれば出来ますが、ちょっと無理矢理感があり
かっこ悪いですね。。。

なにか他の方法はありますでしょうか?

#copyright{
  display: block;
  padding-top: 80px;
}


<CSS適用前>
イメージ説明

<CSS適用後>
イメージ説明

<footer>
        <div id="footer-left">
          <div id="footer-logo">
            <img src="img/footer_logo.png" alt="画像">
          </div>

          <address id="address">
            〒111-111<br>
            東京都新宿区●●●1-1-1 タワー60F<br>
            TEL:0120-00-0000<br>
            FAX:0120-00-0001<br>
            MAIL:test@local.co.jp
          </address>
        </div>

        <div id="footer-right">
          <nav id="fNav">
            <ul>
              <li><a href="index1.html">ホーム</a></li>
              <li><a href="business1.html">事業内容</a></li>
              <li><a href="About1.html">会社概要</a></li>
              <li><a href="contact.html">お問い合わせ</a></li>
            </ul>
          </nav>

          <small id="copyright">
            Copyright (C) sample株式会社
            ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■ ■■■
          </small>
        </div>
      </footer>
footer{
  border: solid 0.5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex; /* 横並びに */
}

#footer-left{
  width: 300px;
}

footer-right{
  width: 600px;
  /*flex:1 1 auto;*/
}

#fNav{
  border: solid 0.5px;
}

#fNav ul{
  display: flex;
 justify-content: flex-end;
}

#fNav li{
  list-style-type: none;
  padding-left: 10px;
}

#copyright{
  display: block;
}

アドバイスいただきました通り、上記CSSのfooter-right内を修正してみましたが、
右に余計なスペースができてしまいました。。。

イメージ説明

とにかく、何をやっても上手く行かないです。。。
今日も1日これだけで終わるのかと思うと・・・もう、ノイローゼになりそうです。。。
アドバイス宜しくお願い致します。

宜しくお願い致します。


皆様アドバイス有難うございます。アドバイスを基に自分なりに色々調べてみましたが、
取り敢えず、強引な状態ですが、以下の様にしたら目的を達成できました。

イメージ説明

footer{
    border: solid 0.5px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    width: 900px;
}

#footer-left{
    width: 300px;
}

#footer-right{
    border: solid 0.5px;
    width: 600px;
    display: flex;
flex-direction: column;


}

#fNav{

}

#fNav ul{
    display: flex;
    justify-content: flex-end;
}


#fNav li{
    list-style-type: none;
    padding-left: 10px;
}


#copyright{
    display: block;
    text-align: right;
    padding-top: 60px; /*無理やり下へ*/
}


まだまだ、要素の配置方法についてはアドバイスを頂きたいことが多々ありますが、
一旦、解決とさせていただきます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

+1

サンプル

#footer-right{ // #が抜けていた
  width: 600px;
  display: flex; // 右側全体をFlexボックスにする
  flex-direction: column; // 上下にする
  justify-content: space-between; //両端に配置
}


これで問題ないはずです。


footerの子要素をこんなふうにすると、左が広がります。

#footer-left{
  width: 300px;
  flex: 1;
}

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/31 16:17

    回答有難うございます。
    #footer-right内でも、さらにdisplay:flex;をする必要があるんですね。。。

    キャンセル

  • 2017/12/31 16:24

    でも、#footer-right内の要素が右端に揃わない。。。。

    キャンセル

  • 2017/12/31 19:01

    flexコンテナの子要素にflex:1;を足すと、それ以外が端によってくれますよ。

    キャンセル

check解決した方法

0

上記質問内容の水平線以下をご確認下さい。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

footer に align-items: flex-end; を追加。 

動くサンプル:https://jsfiddle.net/oas7op5v/


【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/31 14:15

    ああ、#copyrightだけを下ですね。勘違いしていました。

    キャンセル

  • 2017/12/31 16:52

    > もう、ノイローゼになりそうです。。。
    楽しめないならやめればよいです。CSSはプログラマーによっては「とても難しい」といわれる方もおられます。入門書を何冊か買って読んで試してそれでも辛いなら外注するほうが良いです。楽しく生きましょう。

    https://jsfiddle.net/oas7op5v/2/

    キャンセル

0

flexに関しては使わないのでわからないのですがこれだけでいいのでは?
ボックス右下寄せ(widthはあってもいいのですが幅が足りてない?)

#footer-right{
  margin:auto 0 0 auto;
  /*width: 600px;
  flex:1 1 auto;*/
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

難しい。
<small id="copyright">があるところの親要素の
<div id="footer-right">に下寄せする「align-items: flex-end;」を加えるとメニューまで下がってしまう。
だから、別の方法で調べました。
まず、

#footer-right{}にある「width: 600px;」を#fNav{}の中に移して、
#footer-right{}に「height: 60px;」を追加します。

そうするとコピーライターがメニューの下に置き換わります。

それから、

#copyright{}の中にある「display: block;」を「display: flex;」に修正します。
更に「justify-content:flex-end;」と「flex-flow: column;で下寄せするようにしています。
左側のボックスの高さに合わせて「height:90px;」にしています。

それをまとめますと、下記のcssになります。

footer{
  border: solid 0.5px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex; /* 横並びに */
}

#footer-left{
  width: 300px;
}

#footer-right{ /* 先頭の「#」が抜けていますので、付け加えてください */
  height: 60px;
}

#fNav{
  width: 600px;
  border: solid 0.5px;
}

#fNav ul{
  display: flex;
  justify-content: flex-end;
}

#fNav li{
  list-style-type: none;
  padding-left: 10px;
}

#copyright{
  display: flex;
  justify-content:flex-end;
  flex-flow: column;
  height:90px;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/01/03 12:13

    解決済みになっていますが、質問者の希望通りのレイアウトにしてみたけど、参考なされましたでしょうか?

    https://thimbleprojects.org/yoyama1208/386281

    キャンセル

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

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

関連した質問

  • 解決済

    HTMLとCSSで文字を揃える方法が知りたいです

    前提・実現したいこと HTMLとCSSを使って以下のような配置のページを作りたいです。 発生している問題・エラーメッセージ 表示は全てできているのですが、配置の微調整ができず

  • 解決済

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

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

  • 受付中

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

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

  • 解決済

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

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

  • 解決済

    フォームの中の文字をクリックと同時に上に動かしたいのですが...

     やりたいこと inputのテキストボックスにプレースホルダーのような形で文字を置いて、クリックと同時にその文字が上に動くようにしたいです。 参考: http://material

  • 解決済

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

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

  • 解決済

    CSS右寄せについて

    CSSにてフッター内のcopyright、メニュー部分をフッターの一番右まで寄せたいのですが、 どうしてもうまくいきません。(これだけで、今日丸一日潰してしまいました。。。)

  • 解決済

    見出しと画像を横2列に並べたい。

    見出しと画像を横並びにしたいのに、改善されません。あまりにも時間がかかりすぎてるので、質問させていただきました。 <article> <div cl

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

  • CSS

    5140questions

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

  • CSS3

    1851questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。