{"componentChunkName":"component---src-templates-contentful-post-js","path":"/post/css-center/","result":{"pageContext":{"id":"6CkoZesh6xePGLWzN4FD0b","post":{"title":"🎨 CSSで要素をキレイに中央揃え！","slug":"css-center","contentful_id":"6CkoZesh6xePGLWzN4FD0b","isDisplay":true,"updatedAt":"2024年04月08日","metadata":{"tags":[{"name":"CSS","id":"84327022-58f2-5a9c-9773-61bc30dbc69d"}]},"id":"906808f5-f17d-593e-8a57-d533396b0aae","image":{"url":"https://images.ctfassets.net/ow38ejy06foj/4r9gwAw67GPAEhHvbdcNLP/5fb75b2e9d736052be2f6c746d96aaad/tom244_82711_Flat_illustration_for_a_Udemy_course_thumbnail_fea_87eb9951-9f5c-42e8-9b0c-582816e48bae.png"},"body":{"childMarkdownRemark":{"html":"<p>CSSを用いてウェブページ上の要素を中央に配置する方法を簡単にまとめます。</p>\n<h1 id=\"水平方向の中央配置\" style=\"position:relative;\"><a href=\"#%E6%B0%B4%E5%B9%B3%E6%96%B9%E5%90%91%E3%81%AE%E4%B8%AD%E5%A4%AE%E9%85%8D%E7%BD%AE\" aria-label=\"水平方向の中央配置 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>水平方向の中央配置</h1>\n<h2 id=\"インライン要素\" style=\"position:relative;\"><a href=\"#%E3%82%A4%E3%83%B3%E3%83%A9%E3%82%A4%E3%83%B3%E8%A6%81%E7%B4%A0\" aria-label=\"インライン要素 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>インライン要素</h2>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.center-text {\n  text-align: center;\n}</code></pre></div>\n<p>テキストやインライン要素（例：<code class=\"language-text\">&lt;span></code>、<code class=\"language-text\">&lt;a></code>）を含む要素内で使用</p>\n<h2 id=\"ブロック要素\" style=\"position:relative;\"><a href=\"#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0\" aria-label=\"ブロック要素 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ブロック要素</h2>\n<p>ブロックレベル要素（例：<code class=\"language-text\">&lt;div></code>）で使用。\n要素に固定幅を設定する必要あり。</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.center-element {\n  margin: 0 auto;\n  width: 50%\n}</code></pre></div>\n<h1 id=\"垂直方向の中央配置\" style=\"position:relative;\"><a href=\"#%E5%9E%82%E7%9B%B4%E6%96%B9%E5%90%91%E3%81%AE%E4%B8%AD%E5%A4%AE%E9%85%8D%E7%BD%AE\" aria-label=\"垂直方向の中央配置 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>垂直方向の中央配置</h1>\n<h2 id=\"flexboxを使用した方法\" style=\"position:relative;\"><a href=\"#flexbox%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%96%B9%E6%B3%95\" aria-label=\"flexboxを使用した方法 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Flexboxを使用した方法</h2>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">.center-flexbox</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> flex<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">align-items</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">justify-content</span><span class=\"token punctuation\">:</span> center<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100vh<span class=\"token punctuation\">;</span> <span class=\"token comment\">/* コンテナの高さをビューポートの高さに設定 */</span>\n<span class=\"token punctuation\">}</span></code></pre></div>\n<p>Flexboxコンテナ内のアイテムを垂直および水平方向の中央に配置</p>\n<h2 id=\"gridを使用した方法\" style=\"position:relative;\"><a href=\"#grid%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E6%96%B9%E6%B3%95\" aria-label=\"gridを使用した方法 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Gridを使用した方法</h2>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">.center-grid {\n  display: grid;\n  place-items: center;\n  height: 100vh; /* コンテナの高さをビューポートの高さに設定 */\n}</code></pre></div>\n<p>この方法は、CSS Gridを使用して要素を中央に配置\n<code class=\"language-text\">place-items</code>プロパティは、短縮形であり<code class=\"language-text\">align-items</code>と<code class=\"language-text\">justify-items</code>の両方を中央に設定</p>"}}},"previousPostId":"f8445436-fb8b-53b0-aa32-370475ea23f6","nextPostId":"0f984c81-b25f-5c91-96f8-c0b66af20e6d","site":{"siteMetadata":{"title":"PWE Tech "}},"next":{"id":"0f984c81-b25f-5c91-96f8-c0b66af20e6d","title":"🎨 CSSの再利用性を高める！Mixinの基本","slug":"css-mixin"},"previous":{"id":"f8445436-fb8b-53b0-aa32-370475ea23f6","title":"⚡️VSCodeでHTMLを爆速で書く！Emmetショートカット完全ガイド","slug":"vscode-html-emmet"}}},"staticQueryHashes":["1324386404","3257411868"],"slicesMap":{}}