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

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

ただいまの
回答率

90.34%

  • HTML

    9553questions

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

  • CSS

    6190questions

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

  • HTML5

    4297questions

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

中央寄せ、縦並びに配置出来ない【画像あり】

解決済

回答 5

投稿 編集

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

やりたいことと現状

中央寄せ、縦並びにならなくて困っています。
ただし、listの画像は横並びにしたいです。
教えていただけると幸いです。
※他のCSSが効いてしまっているのかもしれないですがさっぱりわからず、、、

<div id="menuPage">
  <ul id="menuList">
      <li><img src="images/20.png" /></li>
      <li><img src="images/22.png" /></li>
      <li><img src="images/23.png" /></li>
  </ul>
  <img id="menuName" src="images/08.png" />
  <img id="clickMenu" src="images/menu1.jpg" />
</div>
#menuPage {
  width: 960ox;    
  margin-left: auto;
  margin-right: auto;
}

#menuList li{
  float: left;
}

#menuName {
 clear: both;
}

#clickMenu {
  clear:both;
  width: 500px;
  height: 453px;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2018/07/12 15:32

    アルゴリズムがどうとか書かれている文言はHTMLに画像かテキストで書かれていて、後続の要素に影響を与えていますよ。

    キャンセル

  • harebareyukai

    2018/07/12 19:07

    >kei344さん 「アルゴリズム〜」は別アプリの不具合で画面上に残ってしまっているものです。混同させてしまい申し訳ありません。

    キャンセル

  • harebareyukai

    2018/07/12 19:07

    >dit.さん 指摘有難うございます!

    キャンセル

回答 5

checkベストアンサー

+2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      #menuPage{
        border: 1px solid blue;/*確認用ボーダー*/
        margin: 0 auto;
        width: 80%;
        display: flex;
        flex-direction: column;
      }
      #menuList{
        border: 1px solid red;/*確認用ボーダー*/
        display: flex;
        justify-content: center;
        list-style: none;
      }
      #menuList li{
        margin: 0 3px;
      }
      #menuName{
        border: 1px solid red;/*確認用ボーダー*/
        margin: 0 auto;
        width: 100%;/*画像の元の大きさにしたい場合は消す*/
      }
      #clickMenu{
        border: 1px solid red;/*確認用ボーダー*/
        margin: 0 auto;
        width: 100%;/*画像の元の大きさにしたい場合は消す*/
      }
    </style>
  </head>
  <body>
    <div id="menuPage">
      <ul id="menuList">
        <li><img src="images/20.png" /></li>
        <li><img src="images/22.png" /></li>
        <li><img src="images/23.png" /></li>
      </ul>
      <img id="menuName" src="images/08.png" />
      <img id="clickMenu" src="images/menu1.jpg" />
    </div>
  </body>
</html>


dit.さんの言われているフレックスボックスでの一例置いていきます。
レイアウト中はボーダーを仮で書き込むと便利ですよ|ー゚)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/13 12:29 編集

    flexの使用方法を具体的に教えてくださったharu_himeさんをベストアンサーとしたいと思います。
    また、確認用ボーダーを使うことも覚えておきます。
    ありがとうございました。

    キャンセル

+2

ざっくり

#menuPage {
  width: 960px;
  text-align: center;
}
#menuList li{
  display: inline;
}
#menuName {
}
#clickMenu {
  width: 500px;
  height: 453px;
}
<img id="menuName" src="images/08.png" /><br />
<img id="clickMenu" src="images/menu1.jpg" />


floatはブロック要素を横に並べる為だけに使わない方が良いです。
他の方も言ってますが、imgはインライン要素(文字と同義)なので、普通に置いただけだと横に並んでしまうので<br>を入れました。imgふたつをdiv要素で囲ってあげると取り回し易くなるかもしれません。
この方法はいささか強引な方法なので、要素間に隙間ができたりします。ぴったりさせたい場合はflexboxの使用を検討すると良いかもしれません。

手書き画像でもアウトラインを示して貰うと結果が分かりやすくていいですね。がんばってください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/13 12:26 編集

    ありがとうございます。初心者なので分からないことも多いのですが、できるだけ分かりやすい質問するように心がけたいです。
    <br>を入れるのも手だと覚えておきます。

    キャンセル

+1

<img>タグはちゃんとしたブロック要素ではないので、ブロック要素で囲ってあげるのが一般的かと思います。フロートクリアもブロック要素につけちゃいましょう。

 <p id="menuName"> <img src="images/08.png" /></p>
 <p> <img id="clickMenu" src="images/menu1.jpg" /></p>


上記だとid、clickMenuのクリアはいらなくなります。

#clickMenu {
  width: 500px;
  height: 453px;
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/12 23:57

    有難うございます。imgタグに対するidにはclear:both;が効かないのでしょうか。menuNameをpタグにつけかえるとうまくいきました。

    #menuName {
     clear: both;
    }

    キャンセル

  • 2018/07/13 00:19

    すみません、そんなこともありませんでした。

    キャンセル

  • 2018/07/13 08:57

    何が起こりました?教えていただけますと私も助かります

    キャンセル

  • 2018/07/13 12:25

    ソースを色々と書き直している中で勘違いしました。失礼しました!
    imgタグはpタグで囲むのが通常なのでしょうか?

    キャンセル

  • 2018/07/13 14:14

    HTMLタグには大きく2分類あって、画面上の構成要素となる「ブロック要素」とブロック要素を修飾するための「インライン要素」になります。ややこしいのですがimgタグで画像を表示する場合はインライン要素として表示されます。こうなると自動で次の行に送られません。
    これを回避する方法としては2つあって一つはプロック要素のpタグやdivタグなどで囲って「ブロック要素の中身」として表示する方法。もう一つはCSSで「display:block」をつけてあげて「ブロック要素として表示」する方法です。
    私自身はimgタグに「display:block」をつけるのはあまり見たことがないです。

    キャンセル

  • 2018/07/14 01:59 編集

    よく分かりました。
    imgタグをブロック要素としたいときはpタグやdivタグで囲むようにします。
    ご丁寧にありがとうございました。

    キャンセル

+1

自分ならどう書くかな?と遊んでみました。
画像はダミー、画像やタイトルの装飾もCSSでやっているので余計な記述もあります。
※タイトル下の装飾はこちらを参考にしました。

img{
  max-width:100%;
  height:auto;
}
#menuPage{
  background-color:#eee; /* 確認用背景 */
  width:960px;
  margin:0 auto;
  text-align:center;
}
ul , li {
  list-style: none;
  margin:0;
  padding:0;
}
ul#menuList{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
#menuList li{
  padding:10px;
}
#menuList li img{
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border:solid #74b026 4px;
}
#menuName h1{
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
}
#menuName h1:before {
  content: '';
  position: absolute;
  bottom: -5px;
  display: inline-block;
  width: 100px;
  height: 5px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #74b026;
}
#menuName p{
  text-align:left;
  width:500px;
  margin:0 auto;
}
<div id="menuPage">
  <ul id="menuList">
    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu1" alt="menu1"></li>
    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu2" alt="menu2"></li>
    <li><img src="http://placehold.jp/8c815b/ffffff/120x120.png?text=menu3" alt="menu3"></li>
  </ul>
  <div id="menuName">
    <h1>クロワッサン</h1>
    <p>
      生地にフレッシュバターを贅沢に使用。<br>
      バターの風味豊かなクロワッサン。
    </p>
  </div>
  <div id="clickMenu">
    <img src="http://placehold.jp/c4ae66/ffffff/500x453.png?text=croissant" alt="クロワッサン">
  </div>
</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/13 12:32 編集

    ありがとうございます。勉強になりました。
    画像容量も考えてCSSで出来る装飾はCSSでやるのが一般的なのでしょうか?

    キャンセル

  • 2018/07/13 13:03

    一般的かどうかはわかりませんが、ちょっとだけ文字が変わったり、ちょっとだけ画像が変わったりしたときにいちいち画像編集するのが面倒なので、私の場合できる部分はCSSでやってます。
    プロの方が見たら笑っちゃうような書き方をしてる可能性もありますが…。

    また、タイトルや説明を画像化してしまうとSEO的によろしくない…という情報もありますので、写真やロゴ以外の部分はできるだけ画像化したくない というのもあります。
    https://webnaut.jp/direction/647.html

    キャンセル

  • 2018/07/14 01:55 編集

    安易に画像化するのも良くないのですね‥‥。
    さくっとCSSで装飾出来るように頑張ります。
    参考記事も添付してくださり、ありがとうございました。

    キャンセル

+1

皆さまありがとうございました。
参考にさせていただき、最終的にこのような記述にしました。
flexboxはfloatよりも使いやすいですね。
これから積極的に使いこなせていければと思います。

      #menuPage{
        /*border: 1px solid blue;/*確認用ボーダー*/
        width: 960px;
    margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
      }
      #menuList{
        /*border: 1px solid red;/*確認用ボーダー*/
        display: flex;
        justify-content: center;
      }
      #menuList li{
        margin: 0 3px;
      }
      #menuName{
        /*border: 1px solid red;/*確認用ボーダー*/
        display: flex;
        justify-content: center;
      }
      #clickMenu{
        /*border: 1px solid red;/*確認用ボーダー*/
        display: flex;
        justify-content: center;
      }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • HTML

    9553questions

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

  • CSS

    6190questions

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

  • HTML5

    4297questions

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