- ベストアンサー
センテンスブロックのセンターリング方法
- テキストを入力した場合、左寄せにしたブロックをセンターリングする方法を教えてください。
- width:500pxでp style, div, ulなどで括れば良いと思いますが、改行されているセンテンスの最大長さに自動的に設定する方法はありますか？
- 一つずつ数値を試してみるのは時間がかかるので、効率的な方法を教えてください。
- tackn881
- お礼率41% (14/34)
- ホームページ作成ソフト
- 回答数1
- ありがとう数15
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;margin:0;} div.header,div.section,div.footer{width:80%;min-width:470px;max-width:900px;margin:0 auto;padding:5px;} div.section div.section{width:auto;min-width:0;} /* 色 */ body{background-color:gray;} div.header,div.section,div.footer{background-color:silver;} div.section div.section{background-color:white;} /* ここから */ div.section div.section ul{display:table;margin:1em auto;max-width:80%;border:solid 1px gray;padding:0;} div.section div.section ul li{list-style:none;margin:0;padding:5px 2em;text-indent:-1em;} --> ＿</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>
お礼
完璧な回答、そしてサンプルまで掲載していただきまして ありがとうございます！ display:table; を使えば良いんですね。 素晴らしい！