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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

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

CSS

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

Q&A

解決済

3回答

468閲覧

html css 中央揃えの方法

hakutoiki

総合スコア8

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/05/19 16:45

イメージ説明

イメージ説明

イメージ説明

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

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


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


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

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

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

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

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

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

kei344

2018/05/19 17:28

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

回答3

0

ベストアンサー

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

html

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<link rel="stylesheet" href="stylesheet.css"> 7</head> 8<body> 9 10 11<header> 12 <h1 class="heading">INFORMATION</h1> 13</header> 14 15 16<main> 17 <article class="porofile"> 18 <div class="porofile-img"><img src="https://placehold.jp/150x150.png" alt=""></div> 19 <h2 class="porofile-name">名前</h2><!-- cssであった.nameを入れてみた --> 20 <div class="porofile-body"> 21 <p>ダミーテキスト</p> 22 </div> 23 </article> 24</main> 25 26 27<nav class="nav"> 28 <ul class="nav-list"> 29 <li class="nav-item"><a href="#" class="nav-link">About</a></li> 30 <li class="nav-item"><a href="#" class="nav-link">...</a></li> 31 <li class="nav-item"><a href="#" class="nav-link">...</a></li> 32 <li class="nav-item"><a href="#" class="nav-link">...</a></li> 33 <li class="nav-item"><a href="#" class="nav-link">...</a></li> 34 <li class="nav-item"><a href="#" class="nav-link">...</a></li> 35 </ul> 36</nav> 37 38 39</body> 40</html> 41

css

1/* 見出し */ 2.heading { 3 text-align: center; 4 color: #000; 5} 6 7/* プロフィール */ 8.porofile { 9 text-align: center; 10} 11.porofile-name { 12 font-size: 130px; 13} 14.porofile-img { 15 width: 100px; 16 margin-left: auto; 17 margin-right: auto; 18} 19.porofile-img img { 20 width: 100%; /* height: auto;はデフォルト値なので書きません */ 21} 22.porofile-body { 23 font-size: 24px; 24} 25 26/* ナビゲーション */ 27.nav { 28} 29.nav-list { 30 overflow: hidden; /* 子のfloatの回り込み対策として(clearfixと呼ばれるもの) */ 31 list-style: none; /* <ul>の装飾を削除 */ 32 width: 600px; /* .nav-item * 3 なので600px */ 33 margin-left: auto; 34 margin-right: auto; 35 padding-left: 0; /* <ul>の装飾を削除 */ 36} 37.nav-item { 38 float: left; 39 text-align: center; 40 width: 200px; 41} 42.nav-link { 43 display: block; 44 font-size: 30px; 45 color: #000; /* blackなど名称ではなく数値で記述するのが一般的 */ 46 padding: 10px; 47}

間違っている点。

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

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

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

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

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

投稿2018/05/20 12:25

tsuka_rinorino

総合スコア229

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

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

0

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

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

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

投稿2018/05/22 01:04

yoshinavi

総合スコア3521

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

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

0

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

まず、単純に段組みしたい場合には、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>とかは別として、サイトに訪れた人が見ない情報を記述する箇所です。

長々と失礼しました。

投稿2018/05/19 18:20

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問