センテンスブロックのセンターリング

解決済

質問者：tackn881
質問日時：2014/12/09 00:03
回答数：1件

既出でしたらすみません。
どのような用語で調べたらよいか分からなくて質問させていただきます。

htmlにてテキストを入力した場合、
左寄せにしたあるブロックごとをセンターリングしたいです。
（添付図参照）

その場合、

"text-align:left; width:500px; margin:auto;"

で p style , div , ul などで括れば良いと思うのですが、
上記「width:500px」を改行されているセンテンスの最大長さ
（添付図でWの横幅）に自動的に設定するコマンドなどあるのでしょうか？

一回一回、この数値を試してみないと、調度よい長さが分かないため
修正に時間がかかります。

よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2014/12/09 10:32

　ulをそれを含むブロック内に内容の大きさに合わせて中央配置するときはdisplay:table;を使います。

最大巾も指定しておくと良いでしょう。
＞上記「width:500px」を改行されているセンテンスの最大長さ
　サイズを絶対幅で指定してしまうと、ウィンドウ幅が小さかったり、視覚弱者がフォントを大きくしたりしたときに期待と異なってしまいます。ブロックの幅は固定すべきではありません。
　ごく簡単なサンプルです。
★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
　で検証済みのHTML4.1strict + CSS2.1です。
★タブは＿に置換してあるので戻す。
※スマホ縦置きの480px～のサイズのウィンドウで中央に表示されます。
※項目が長い場合は親ブロックの80%幅までになり、テキストは折り返されます。インデントは-1em;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>Word Pressを活用するためのリソースをご用意しています。</p>
＿＿<p>まずは、Word Press のインストールの仕方や自分のプラグイン、テーマの作り方などが書かれたドキュメンテーションをご覧ください。</p>
＿＿<div class="section" id="forStart">
＿＿＿<h3>スタートのためのリソース</h3>
＿＿＿<p>Word Press を始めるためにリソースが必要でしたら、以下の記事を参考にしてください。</p>
＿＿＿<ul>
＿＿＿＿<li>Word Press サポートフォーラムへようこそ</li>
＿＿＿＿<li>Word Press のはじめ方 - スタートガイド</li>
＿＿＿＿<li>Word Press のインストールについてよくある質問Word Pressを活用するためのリソースをご用意しています。</li>
＿＿＿＿<li>はじめての Word Press</li>
＿＿＿＿<li>投稿の作成</li>
＿＿＿＿<li>Support Handbook</li>
＿＿＿</ul>
＿＿</div>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿</dl>
＿</div>
</body>
</html>