<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PHPプログラマのバリ・ポジ情報ブログ &#187; html</title>
	<atom:link href="http://blog.veryposi.info/tag/html/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.veryposi.info</link>
	<description>PHP,JavaScriptやサーバーの設定などのプログラミングに関する情報をバリ・ポジティブに発信しているプログラマのブログ、『バリ・ポジ』</description>
	<lastBuildDate>Thu, 10 May 2012 06:23:01 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>ブロックレベル要素をセンタリングする方法</title>
		<link>http://blog.veryposi.info/programing/htmlcss/block-level-center/</link>
		<comments>http://blog.veryposi.info/programing/htmlcss/block-level-center/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 10:02:14 +0000</pubDate>
		<dc:creator>gensan</dc:creator>
				<category><![CDATA[HTML／CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://www.veryposi.info/blog/?p=49</guid>
		<description><![CDATA[&#160; HTMLでインラインレベル要素をセンタリングしたい場合、「text-align:center」と記述すればセンタリングされますが、 ブロックレベル要素をセンタリングしたい場合は、「text-align:ce [...]]]></description>
			<content:encoded><![CDATA[<p>&nbsp;</p>
<p>HTMLでインラインレベル要素をセンタリングしたい場合、「text-align:center」と記述すればセンタリングされますが、<br />
ブロックレベル要素をセンタリングしたい場合は、「text-align:center」ではセンタリングされません。</p>
<p>これは、「text-alignプロパティ」がインラインレベル要素に対してのスタイルを定義するものだからです。</p>
<p>う～ん<img src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/despair.gif" alt="" />こまった、ブロックレベルの要素をセンタリングしたいぞ<img src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/down.gif" alt="" /></p>
<p>こんなときは、親要素に対しての左右のmarginでセンタリングを行うようにします。</p>
<p>こんな感じ</p>
<p>&nbsp;</p>
<div class="syntax">
<table>
<tbody>
<tr>
<td class="line_numbers">
<pre>
1
2
3
4
5
</pre>
</td>
<td class="code">
<pre class="html4strict"><span style="color: rgb(0, 153, 0);"><a href="http://december.com/html/4/element/div.html"><span style="color: rgb(0, 0, 0); font-weight: bold;">&lt;div</span></a> <span style="color: rgb(0, 0, 102);">style</span>=<span style="color: rgb(255, 0, 0);">&quot;width: 300px;&quot;</span><span style="color: rgb(0, 0, 0); font-weight: bold;">&gt;</span></span>
    <span style="color: rgb(0, 153, 0);"><a href="http://december.com/html/4/element/div.html"><span style="color: rgb(0, 0, 0); font-weight: bold;">&lt;div</span></a> <span style="color: rgb(0, 0, 102);">style</span>=<span style="color: rgb(255, 0, 0);">&quot;margin: 0px auto; width:20px; border:1px solid red;&quot;</span><span style="color: rgb(0, 0, 0); font-weight: bold;">&gt;</span></span>
        ○
    <span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;">&lt;/div&gt;</span></span>
<span style="color: rgb(0, 153, 0);"><span style="color: rgb(0, 0, 0); font-weight: bold;">&lt;/div&gt;</span></span></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>&nbsp;</p>
<div style="width: 300px;">
<div style="border: 1px solid red; margin: 0px auto; width: 20px;">○</div>
</div>
<p>&nbsp;これでブロックレベル要素のセンタリングもOK<img src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/happy01.gif" alt="" /><img src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/scissors.gif" alt="" /><img src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/up.gif" alt="" /></p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.veryposi.info/programing/htmlcss/block-level-center/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTMLのブロックレベル要素</title>
		<link>http://blog.veryposi.info/programing/htmlcss/html-block-level/</link>
		<comments>http://blog.veryposi.info/programing/htmlcss/html-block-level/#comments</comments>
		<pubDate>Sun, 01 Feb 2009 09:58:36 +0000</pubDate>
		<dc:creator>gensan</dc:creator>
				<category><![CDATA[HTML／CSS]]></category>
		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://www.veryposi.info/blog/?p=46</guid>
		<description><![CDATA[HTMLでブロックレベル要素となるタグは、 p h1～h6 div ul ol dl pre hr blockquote address fieldset table form script noscript ins d [...]]]></description>
			<content:encoded><![CDATA[<p>HTMLでブロックレベル要素となるタグは、</p>
<ul>
<li>p</li>
<li>h1～h6</li>
<li>div</li>
<li>ul</li>
<li>ol</li>
<li>dl</li>
<li>pre</li>
<li>hr</li>
<li>blockquote</li>
<li>address</li>
<li>fieldset</li>
<li>table</li>
<li>form</li>
<li>script</li>
<li>noscript</li>
<li>ins</li>
<li>del</li>
</ul>
<p>があります。</p>
<p>XHTML 1.0 Strict DTDで、「body」の要素の次にはブロックレベル要素がこないといけない<img alt="" src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/ng.gif" />と定義されています。</p>
<p>なので、bodyタグの中には上記要素のいずれかが入ることになるのだ<img alt="" src="http://blog.veryposi.info/wp-content/plugins/fckeditor-for-wordpress-plugin/smiles/typepad/sign03.gif" /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.veryposi.info/programing/htmlcss/html-block-level/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: blog.veryposi.info @ 2026-04-05 08:27:24 -->