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

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

ただいまの
回答率

90.61%

  • HTML

    8708questions

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

  • CSS

    5605questions

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

html css 中央揃えの方法

受付中

回答 3

投稿

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

0404

score 2

![イメージ説明](ecb630dfc640d62b774e618a29b35f07.png)

イメージ説明

イメージ説明

プログラミングを初めて数日です。

htmlとcssで簡単なホームページを作成しています。
以下の2つのことが調べてもわからず、質問させて頂きました。


AboutからContactを中央揃えにしたいです。


About   Work         Blog
Twitter Instagram Contact
のように、twitterから行を変えて、2行にしたいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2018/05/20 02:28

    コードはスクリーンショットでなくコードブロックにテキストでお書きください。

    キャンセル

回答 3

+4

先の回答者には申し訳ないが、私は回答を元に勉強した方が良いと思ってる派なのでコードを直接記載します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>


<header>
  <h1 class="heading">INFORMATION</h1>
</header>


<main>
  <article class="porofile">
    <div class="porofile-img"><img src="https://placehold.jp/150x150.png" alt=""></div>
    <h2 class="porofile-name">名前</h2><!-- cssであった.nameを入れてみた  -->
    <div class="porofile-body">
      <p>ダミーテキスト</p>
    </div>
  </article>
</main>


<nav class="nav">
  <ul class="nav-list">
    <li class="nav-item"><a href="#" class="nav-link">About</a></li>
    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
    <li class="nav-item"><a href="#" class="nav-link">...</a></li>
  </ul>
</nav>


</body>
</html>
/* 見出し */
.heading {
  text-align: center;
  color: #000;
}

/* プロフィール */
.porofile {
  text-align: center;
}
.porofile-name {
  font-size: 130px;
}
.porofile-img {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}
.porofile-img img {
  width: 100%; /* height: auto;はデフォルト値なので書きません */
}
.porofile-body {
  font-size: 24px;
}

/* ナビゲーション */
.nav {
}
.nav-list {
  overflow: hidden; /* 子のfloatの回り込み対策として(clearfixと呼ばれるもの) */
  list-style: none; /* <ul>の装飾を削除 */
  width: 600px; /* .nav-item * 3 なので600px */
  margin-left: auto;
  margin-right: auto;
  padding-left: 0; /* <ul>の装飾を削除 */
}
.nav-item {
  float: left;
  text-align: center;
  width: 200px;
}
.nav-link {
  display: block;
  font-size: 30px;
  color: #000; /* blackなど名称ではなく数値で記述するのが一般的 */
  padding: 10px;
}

間違っている点。

  • コンテンツが<body>から出てしまっている。
  • HTML5で廃止されている<center>を使用している。(cssのtext-align: center;で対応しましょう)
  • imgの画像名が日本語である。(「illust/icon.jpg」などにフォルダ名とファイル名を修正しましょう。そのままだと自分のPCで見れてもサーバーにアップロードすると見れなくなります。)
  • imgのsrcが自身のPCから見た絶対パスになっている。(「相対パス」について勉強しましょう)

私が書いたコードの変更点

  • 間違っている点の修正(画像はダミーを利用しているので用修正)
  • セクショニングを行っている(「HTML5セクショニング」などで検索)
  • floatで横並びにしていたので、それをもとにセンタリング

センタリングの仕方については沢山方法があり、デザインによっては対応出来ない方法もあります。
センタリングの種類は、数をこなし適宜覚えるしか無いと思います。

以上。お役に立てれば幸いです。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

思ったようにCSSが効かない場合は、誤記述や間違った設定、または無意味な設定を掛けていないかの確認が必要となります。

状況に寄りますが、通常の要素ではCSSが効くのに、floatposition:absolute;等の場合、通常とは違う設定等もあります。

どの要素を真ん中に寄せるのか?・・・を考えて、別の要素で1つにマトメて、その要素に必要なCSSを設定する・・・等の、HTML要素での配置を見直されると良いと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

-1

人によって色々な考え方や方法があるんですが、安直に答えを教えても為にならないと思ったので、基本的な考え方から。

まず、単純に段組みしたい場合には、blockもしくは、inline-blockの要素をもつタグを使います。
代表的な物だと、divとか、h1~h6とかpとかですかね。他にもたくさんありますけど。

このブロックとは何かというと幅100%の箱のようなもんです。
イメージとして100センチの幅の箱がるとします。
その中に、この箱を収めると、許される限りの幅をフルに使って収まろうとします。
横幅を指定しても、1段丸々使います。

では、インラインブロックは何かと言うと、後述するインライン要素とブロック要素、両方の特徴をもつ要素です。
例えば、100センチの箱があるとします。
で、中に収めるインラインブロック要素を50センチと指定した場合、横並びに2つまで収まることができます。
でも、1センチでもサイズが大きければ、親箱に2つは収まりきれないので次の段を使います。
テトリスみたいなもんですね。

もちろん、この二つは、横幅だけじゃなく、縦幅も指定できます。

また、インライン要素とは、幅を取らない要素です。

今回ABOUTとかを囲っているAタグはインライン要素になります。
この要素は、テキストや、画像などの中身の実態以上には大きくなりません。
可能な限り、本体に、ピッチリくっつこうとするパンストのような存在です。

また、通常のレイアウトなどでは、ブロック要素、もしくはインライン要素の中に納めて使いますが、CSSプロパティで、display: block,もしくは、display: inline-block;として、ジョブチェンも可能です。

このCSSプロパティは、ブロック要素→インライン要素にしたい時などにも、同じように使えます。もちろん、インライン要素にも。

このサイトとか、かなり参考になるんではないでしょうか。

今回の場合、2段組みということなので、2段に分けたい物をブロック要素で囲む。
もしくは、画面のサイズを計算して、6つの要素が2段になるようにする。

とりあえず、これで2段にはなりますね。

また、中身を真ん中にということであれば、段組に使ったグループの親のCSSプロパティをtext-align: center;と指定すれば中心に揃えることもできます。
ただ、このプロパティはtext-alignと書かれているように、基本的には文字の位置を操作するプロパティです。

レイアウトとして、ブロック単位で位置を揃えたい場合は、マージンを使います。

これは、指定した要素の周りに見えないバリアを張るような機能です。
例えば、divに対して、margin: 100px;とした場合、上下左右に見えない壁を作ります。
このバリアを使って真ん中に寄せることも可能です。
代表的なものが、block要素のCSSプロパティをmargin: 0 auto;とすることでしょうか。
もう少し細かく説明すると、これは、margin: {上下} {左右};というように、上下と左右のマージンを別々に指定しています。
で、AUTOにすることで、自動的に親要素の中心に揃おうとする。
こんな感じです。

他にも、色々手法はありますが、何れにしても人の好み次第です。
「いいな〜」っと思ったサイトのソースを見たりするのが一番参考になるんじゃないでしょうかね。

あと、こういったレイアウトに使うタグは全て<body></body>の中に書いてください。
<body>の外に書くタグっていうのは、<title>とかは別として、サイトに訪れた人が見ない情報を記述する箇所です。

長々と失礼しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML

    8708questions

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

  • CSS

    5605questions

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