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

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

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

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

CSS

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

Q&A

解決済

3回答

637閲覧

HTML,CSSでの中央寄せにしてのテキスト左揃えにする方法

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/12/30 14:18

編集2017/12/31 03:09

==HTML==

<div class="sample-contents"> <h1>sample</h1> <p class="sample-text"> <u class="sample-text">sample</u> <h1>sample</h1> <p class="sample-text"> <u class="sample-text">sample</u> </div> <div class="sample-contents"> <h1>sample</h1> <i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-instagram"></i> </div> </div>

==CSS==

.sample{ width:800px; margin:0 auto; } .sample-contents{ float:left; width:400px; text-align:left; } .sample-contents h1{ text-align: left; } .sample-text{ }

上記のHTML,コードに対してcssを変更していただいてdivボックスを中央に寄せてテキストを左揃えにする方法を教えてください。
イメージ説明


回答いただいた指示で行ったのですが解決できませんでした。
解決できる方よろしくお願いします。

変更ごのCSSです。

.sample{ width:800px; margin:0 auto; } .sample-contents{ float:left; width:400px;   margin: 0 auto;   text-align:left;   overflow: hidden; } .sample-contents h1{ text-align: left; } .sample-text{ }

イメージ説明

こちらの言葉足らずで申し訳ありません。
ボックス内でのテキストをセンター寄せにして左揃えにする方法を教えてください。
下記の画像のようにお願いします。
![イメージ説明

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

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

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

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

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

kei344

2017/12/30 15:07

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
退会済みユーザー

退会済みユーザー

2017/12/30 23:18

変更いたしました。
kei344

2017/12/31 04:35

「赤線」の位置はどのように決定するのでしょうか。文字列が.sample-contentsの幅いっぱいになる長さの場合は左に余白がなくても良いのでしょうか?
退会済みユーザー

退会済みユーザー

2017/12/31 06:32

sample-contentsに対してpadding-left:で位置調整することでスタイルを完成させました。手助けいただきありがとうございました。
guest

回答3

0

例えばsample-contentsを中央寄せ、テキスト左揃えにする場合ですと

CSS

1.sample-contents{ 2  width:80%; 3  margin: 0 auto; 4  text-align:left; 5  overflow: hidden; 6} 7

とするとできます。
この辺りの記事が参考になるかもしれません。
http://www.css-lecture.com/log/css-beginner/026.html

投稿2017/12/30 14:26

編集2017/12/30 14:44
hatsu

総合スコア1809

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

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

退会済みユーザー

退会済みユーザー

2017/12/30 14:32

cssの記述を追加しました。 この状況で margin: 0 auto;を追加しましたがうまくセンターにきませんでした。
hatsu

2017/12/30 14:45

私の方で試したところ、.sampleが高さを持っていなかったためoverflow: hidden;を追加いたしました。 するとうまくいきましたので、試してみてくださいませ。
hatsu

2017/12/30 15:01

(恐縮ですが解決された場合にはベストアンサーをお選びくださいませ...解決済みか否か判断するためです。)
退会済みユーザー

退会済みユーザー

2017/12/30 23:17 編集

.sample{ width:800px; margin:0 auto; } .sample-contents{ float:left; width:400px;   margin: 0 auto;   text-align:left;   overflow: hidden; } .sample-contents h1{ text-align: left; } .sample-text{ } このように変更しても解決されません。 どうしてでしょうか?
hatsu

2017/12/31 01:10

overflow:hidden ; はsampleクラスにつけてみてください。
退会済みユーザー

退会済みユーザー

2017/12/31 06:32

sample-contentsに対してpadding-left:で位置調整することでスタイルを完成させました。手助けいただきありがとうございました。
guest

0

ベストアンサー

sample-contentsに対してpadding-left:で位置調整することでスタイルを完成させました。

投稿2017/12/31 06:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sousuke

2017/12/31 07:03

基本文章に対して左に揃っていればそれは左寄せです。文章の中央合わせている場合を中央寄せ。
guest

0

~~サンプルに書いてある情報でやりたいことが実現できているように思います。(一番上のCSSだけでOKのはず。)
これで解決できない場合はそれ以外のCSSが邪魔をしているか、何らかの原因でCSS自体が当たっていないと思います。Shift押しながらリロードとかしてみては?

このhtmlで確認してみましたが合っていると思います。~~
追記修正

html

1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7.sample{ 8 width:800px; 9 /*訂正箇所1*/ 10 /*margin:0 auto;*/ 11} 12 13.sample-contents{ 14 float:left; 15 width:400px; 16 /*訂正箇所2「leftに戻す」*/ 17 text-align:left; 18 /*見た目判別用に追加*/ 19 border :1px solid #000; 20 box-sizing:border-box; 21 /*左の余白を大きくしてセンターっぽく*/ 22 padding-left:30px; 23} 24 25.sample-contents h1{ 26 /*訂正箇所3「leftに戻す」*/ 27 text-align: left; 28} 29 30.sample-text{ 31} 32 </style> 33</head> 34<body> 35 <div class="sample"> 36 <div class="sample-contents"> 37 <h1>sample</h1> 38 <p class="sample-text"> 39 <u class="sample-text">sample</u> 40 <h1>sample</h1> 41 <p class="sample-text"> 42 <u class="sample-text">sample</u> 43 </div> 44 45 <div class="sample-contents"> 46 <h1>sample</h1> 47 <i class="fa fa-facebook"></i> 48 <i class="fa fa-twitter"></i> 49 <i class="fa fa-instagram"></i> 50 </div> 51 </div> 52</body> 53</html>

投稿2017/12/30 23:59

編集2017/12/31 03:45
sousuke

総合スコア3828

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

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

退会済みユーザー

退会済みユーザー

2017/12/31 01:20

こちらの言葉足らずで申し訳ありません。 ボックス内でのテキストをセンター寄せにして、左揃えにする方法を教えていただきたいです。
sousuke

2017/12/31 02:52

いえ、こちらも間違えていました。 ・.sampleのmargin左右のautoが「div」のsampleの中央寄せ ・.sample-contentsとそのh1のtext-alignのleftが「テキスト」の左寄せ をそれぞれ実現していますので ・.sampleのmargin左右のautoを削除 ・.sample-contentsとそのh1のtext-alignをcenter でよいかと ・
退会済みユーザー

退会済みユーザー

2017/12/31 03:11 編集

この方法ですとテキストは真ん中に寄せれるのですがテキストを左に揃えることができません。 .sample{ width:800px; } .sample-contents{ float:left; width:400px; text-align:center; /*見た目判別用に追加*/ border :1px solid #000; box-sizing:border-box; } .sample-contents h1{ text-align: center; } .sample-text{ }
sousuke

2017/12/31 03:14

すみませんどういうことかわかりません。テキストをセンター寄せにしているのに 左に揃えるとはどういうことですか?ただ左の余白を取ればいいだけということです? .sample-contents{ float:left; width:400px; /*訂正箇所2「元はleft」*/ text-align:left; /*見た目判別用に追加*/ border :1px solid #000; box-sizing:border-box; /*追加左余白 ここを大きくしてセンターっぽく*/ padding-left:30px; } .sample-contents h1{ /*訂正箇所3「元はleft」*/ text-align: left; }
退会済みユーザー

退会済みユーザー

2017/12/31 06:32

sample-contentsに対してpadding-left:で位置調整することでスタイルを完成させました。手助けいただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問