TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでtext-alignをcenterにする方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLでtext-alignをcenterにする方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLでtext-alignをcenterにする方法について解説しています。テキストを中央寄せする場合は、text-alignをcenterに指定します。基本の書き方、画面上での見え方をサンプルコードで確認しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLでtext-alignをcenterにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

text-alignをcenterにする方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

text-alignとは

text-alignとはCSSのプロパティの一つです。ブロック要素に設定することで、その中のインライン要素を右揃え・中央寄せ・左揃えにできます。

 

[PR] Webデザインで副業する方法とは

text-alignをcenterにする方法

中央寄せをする場合は、text-alignをcenterにすることで設定できます。
方法は以下です。

text-align; center;

 

実際に書いてみよう

以下の箱の中身を中央寄せにしてみましょう。

See the Pen
20201001_before__text-align_center by Pei (@Pei-Log)
on CodePen.

「block」というクラスを持つpタグに対し、

text-align: center;

 

を設定し、中央寄せにしていきます。

See the Pen
20201001_after__text-align_center by Pei (@Pei-Log)
on CodePen.

中央寄せにすることができました。

 

まとめ

text-align: center;

をブロック要素に設定することで、その中のインライン要素を中央寄せにできます。

 

監修してくれたメンター

土田隼平（つちだしゅんぺい)

フリーのWebエンジニアです。
最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。

趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。
今の最重要ミッションは「運動不足解消」です。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

HTMLのフォントサイズ単位ptの使い方を現役エンジニアが解説【初心者向け】

HTMLのフォントサイズ単位ptの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そも...
HTML

HTMLファイルの解析方法を現役デザイナーが解説【初心者向け】

HTMLファイルの解析方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも、HTML...
HTML

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法を現役エンジニアが解説【初心者向け】

HTMLの要素に囲み枠（ボックスデザイン）を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLの特殊文字の〒マークを表示する方法を現役エンジニアが解説【初心者向け】

HTMLの特殊文字の〒マークを表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 &...
HTML

3種類の書き方を覚える！HTMLで空白を作る方法【初心者向け】

HTMLを書いていて、文字と文字の間を少し離したいことがたびたびあります。 しかし、HTMLに慣れないうちは思ったように空けたくても空けられないこともしば...
HTML

HTMLコーディングにおけるライブラリを現役エンジニアが解説【初心者向け】

HTMLコーディングにおけるライブラリの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

あわせてよく読まれている記事

中央寄せしたい！CSSでセンタリングする方法【初心者向け】

CSSでセンタリング(中央寄せ)する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイト内の画像を真ん中に表示したいという時にとても便利な技術です。初心者の方でも自分で書けるようになっておくと良いでしょう。 領域を中央寄せする方法、テキストや画像を中央寄せする方法を実際にソースコードを書きながら紹介しています。 目次text-alignとはtext-alignをcenterにする方法実際に書いてみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり 田島メンター！！画面内の要素を常に中央に配置したいのですが、どうしたらいいですか～？ 田島悠介 色々方法があるけれど、最初に text-align : center を使ってみようか。 大石ゆかり どうやって使えば良いでしょうか？ 田島悠介 画像を囲っているdiv領域にCSSを付与するんだ。実際にやってみよう。   画像を中央寄せに表示する方法 まずは、画像を中央寄せに表示するサンプルを見てみましょう。 div領域内でimg要素をセンタリングして表示する 画像を中央寄せに表示させるためには、画像の外枠となるdiv要素にtext-align : center を付与します。 画像そのものではなく、親要素にCSSを付与することに注意しましょう。 また、div領域にtext-align : center を付与すると、領域内の子要素だけでなく、孫要素を含む全ての要素に効果が発生します。 効果は、「各インライン要素に発生し、センタリングの基準は各要素の1階層上の要素である」という点に注意しましょう。こちらの画像の場合、画像の親要素がdivであり、div領域の幅を基準に画像がセンタリングされていますね。ブロック要素には無効であることにも気を付けましょう。 上記の例では、わかりやすくdiv領域に border : solid 1px を付与して、枠が目に見えるようになっていますが、div領域が目に見えない場合は text-align : center を付与しても「何を基準にセンタリングされたのか」わからずに混乱することもあります。 div領域に border : solid 1px を付与することで中央寄せの基準が確認しやすいということも覚えておきましょう。 領域を中央寄せに表示する方法 div領域そのものや、text-align : center ではセンタリングできなかった要素を中央寄せするには、margin : 0 auto を使いましょう。 ブロック要素を margin : 0 auto でセンタリングして表示する divなどのブロック要素を中央寄せするには、中央寄せしたい要素に margin : 0 auto を付与します。 img要素をセンタリングした時と違って、「div要素のセンタリング」という文字列は中央寄せになっていません。 この文字列はpタグの中にテキストを記述して表示していますが、今回このpタグには何もCSSを付与していないためです。 marginプロパティは、付与したブロック要素の外側の余白を調整するものです。ですから、上記のグラデーション領域の左右のマージンが自動調整されて、中央寄せされています。 「margin : 0 auto」は暗記されている方も多いと思いますが、0の部分は上下のマージンに相当するため、既存マージン指定と競合を起こして表示に不具合が起こる場合があります。その場合は、margin-left : auto、margin-right : auto と指定することで、縦方向に影響を及ぼさずにブロック要素のセンタリングができます。 [PR] Webデザインで副業する方法とはCSSでセンタリングを成功させるコツ 実際にWEBサイトの画面をデザインしている時に、レイアウト表示に不具合が出てハマった！という方も多いと思います。 こうした状況を解決するためのヒントを記載しておきますので、ぜひ参考にしてください。 インライン要素とブロック要素の違いを理解する 外枠のdiv領域のサイズ指定をする ブロック要素を中央寄せにしたい場合はwidthを〇〇%に指定する ブロック要素内のテキストをセンタリングして不具合が起こる場合   1.インライン要素とブロック要素の違いを理解する HTML要素は、インライン要素とブロック要素の2つに大別されます。 インライン要素とは、<img>タグや<span>タグが有名で、これらの要素は画面に横並びに表示されます。また、インライン要素特有の特性を持ちます。 ブロック要素とは、<div>タグや<p>タグが有名で、これらの要素は画面に縦並びに表示されます。また、デフォルトの幅が親ブロック要素の枠内100%に広がりますので、margin : 0 auto
CSS

HTMLで右寄せ・中央寄せ・左寄せをする方法【初心者向け】現役エンジニアが解説

この記事ではWebページ制作の際に、要素の右寄せ・中央寄せ・左寄せを実現するHTML/CSSの記述方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 以下のような悩みや疑問を持っている方は、記事を読むことで解決できるでしょう。 要素の位置をどのようにコントロールするのかわからない 中央寄せしてみたつもりが、うまくいかない 目次text-alignとはtext-alignをcenterにする方法実際に書いてみようまとめ監修してくれたメンター そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 右寄せ・中央寄せ・左寄せをする方法について詳しく説明していくね！ 大石ゆかり お願いします！   ブロック要素・インライン要素 HTMLの要素には、ブロック要素とインライン要素の2種類があります。 ブロック要素は見出しなど、文章の区切りを表すものです。 divタグ pタグ h1タグ インライン要素は、以下のように文章要素を表すものです。 aタグ imgタグ spanタグ 対して、CSSではインライン要素とブロック要素を付け替えたり、両方の特徴を持ったインラインブロック要素にすることもできます。 HTMLとCSSでは、右寄せ・中央寄せ・左寄せの手法や、ブロック要素とインライン要素の手法が異なる点を把握する必要があります。 設定する際は要素がブロック要素なのか、インライン要素なのか把握しましょう。   インライン要素の表示位置 text-align インライン要素の右寄せ・中央寄せ・左寄せの指定する場合、text-alignを使います。 使い方はインライン要素を囲っている親要素に対して、インライン要素を左右中央のどの位置に表示するか指定しましょう。   この例では、インライン要素であるimgタグを親要素divの中で左右中央に配置しています。 See the Pen aligns by TAKAYOSHI (@lspuwbkv) on CodePen. 背景が水色になっている箇所が親のdiv要素の領域です。   親要素の領域の中で、インライン要素を左右中央どこに表示するかを、親要素にtext-alignというCSSを付与し指定します。 div.left { text-align: left; } div.center { text-align: center; } div.right { text-align: right; } leftは左寄せ、centerは中央、rightは右寄せです。 例えば、中央揃えをしたい場合はどの領域において中央にしたいのか、というのを意識しましょう。   [PR] Webデザインで副業する方法とはブロック要素の表示位置は左右マージンを使用する ブロック要素の右寄せ・中央寄せ・左寄せの指定をするには、左右のマージンを使います。 注意点としてtext-alignは使用しないことを把握しておきましょう。 ブロック要素に幅を指定して、左右の余白を設定していくイメージです。   以下のHTMLを具体例として見ていきましょう。 <div class="background left"> <div class="inner">LEFT</div> </div> <div class="background center"> <div class="inner">CENTER</div> </div> <div class="background right"> <div class="inner">RIGHT</div> </div>   以下では、クラスbackgroundの中でクラスinnnerの表示位置を指定しています。 しかし、うまく動作しません。 .background{     background:gray;  
HTML

CSSのvertical-alignが効かない原因と対処法【初心者向け】現役デザイナーが解説

CSSのvertical-alignが効かない原因について解説します。vertical-alignはインライン要素の縦の位置を揃える場合などに使用します。 そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。   目次 vertical-alignが効かない原因 vertical-alignを使用する場面 vertical-alignの書き方 実際に書いてみよう 本記事は、テックアカデミーのWebデザインコースのカリキュラムをもとに執筆しています。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 CSSのvertical-alignが効かない原因について詳しく説明していくね！ 大石ゆかり お願いします！   vertical-alignが効かない原因 vertical-alignは、「インライン要素」または、「テーブルセル」のみに適用できるCSSプロパティです。 「CSSにvertical-alignを書いたのに、全く効かない！」という場面に遭遇したら、適用している要素が、何の要素であるかに注目してみてください。   vertical-alignが適用できる要素の例 <a>、<span>、<strong>、<small>などのインライン要素 （CSSでdisplay:inline;または、display:inline-block;を適用している要素） <td>、<th>などのテーブルセル要素 （CSSでdisplay:table-cell;を適用している要素） ブロック要素に対して、縦方向の位置を揃えたい場合には、vertical-align以外の方法を使います。 こちらの記事も参考にしてみてください。 CSSで上下中央揃えの仕方を現役エンジニアが紹介【初心者向け】   [PR] Webデザインで副業する方法とはvertical-alignを使用する場面 vertical-alignは大きな文字と小さな文字が混在するテキストや、文中に画像を使用する場合などに、縦方向の位置調整に使用されることが多いです。 また、テーブルセル要素で使用する場合には、セルの中での縦方向の整列位置の調整、インライン要素の場合は、行（または親要素）に対して縦方向の整列位置の調整を行います。   vertical-alignの書き方 vertical-alignの値は、top、middle、bottomなどのキーワードや、%、その他pxやemなどの単位での指定も可能で、以下のように書きます。   vertical-align:top; /* 上で揃える */ vertical-align:middle; /* 中央で揃える */ vertical-align:bottom; /* 下で揃える */ vertical-align:100px;  /* 10px上へ移動 */ ※％や単位での指定は、テーブルセルには適用できません。   表示の例： vertical-align:baseline;（初期値）   vertical-align:middle;   vertical-align:top;   画像に対して適用した場合： vertical-align:top;   vertical-align:middle;   vertical-align:bottom;   実際に書いてみよう 文中に注釈のあるテキストの注釈の縦方向の整列位置を調整してみます。 HTML <p>vertical-alignはインライン要素<span>（※注1）</span>または、テーブルセル<span>（※注2）</span>に対して適用できます。</p>   CSS span{ font-size:.5em; color:red; } vertical-alignを書かない場合（初期値）は以下のような表示になります。 次に注釈の文字を行の上端に揃えてみます。 CSS span{ font-size:.5em; color:red; vertical-align:top; } 表示結果： 注意点は、top、middle、bottomは行の高さに対して適用される点です。 <p>の行の高さ（line-height）が変わると、注釈の位置も変わります。 CSS p{ line-height:3; /*行の高さを文字の高さの3倍*/ } span{ font-size:.5em; color:red; vertical-align:top; line-height:1; /*行の高さは文字の高さと同じ*/ } 表示結果： 行の高さの上端に注釈の文字が整列されるので、文章の文字自体の高さよりも上に飛び出て見えます。 文章の文字自体の高さに合わせたい場合は、以下のように書きます。   vertical-align:text-top; /* 親要素のテキストの上端で整列 */ vertical-align:text-bottom; /* 親要素のテキストの下端で整列 */ 表示結果： vertical-align:text-top;   vertical-align:text-bottom; ※text-top、text-bottomの値はテーブルセルでは使用できません。   次に、テーブルセルの縦方向の整列位置を調整してみます。 HTML <table> <tr> <td>デフォルト</td> <td class="top">上揃え</td> <td
CSS

スタイルシート（CSS）の基本的な書き方【初心者向け】

本記事ではCSS（カスケーディングスタイルシート）の基本的な書き方について初心者向けに解説します。 目次text-alignとはtext-alignをcenterにする方法実際に書いてみようまとめ監修してくれたメンター 【動画の解説はこちら】   田島悠介 今回はCSSの基本的な書き方について勉強していこう。 大石ゆかり 田島メンター！！CSSの構文ではどんなものを使うんですか〜？ 田島悠介 まず覚えておきたいのが「セレクタ」「プロパティ」「値」の3つだね。これをおさえておけばだいたいのことはできるようになるよ。一番基本の形を見てみよう。 大石ゆかり はい！   CSSでできること CSSは、HTMLで作成された文書に対して主に色や大きさなどの見た目の指定を行います。 以下のようなHTML文書があるとします。CSSが適用されていない場合の状態です。 CSSをHTMLで読み込み、スタイルを適用すると画面ではこのようになります。 背景色や文字の色が変更されたり、画像やボタン・文字列などが中央寄せになったり、ボタンにマウスカーソルを合わせるとアニメーションによって浮き上がったりします。このようなレイアウト・デザインに関する役割をCSSが行います。   スタイルシートが必要な理由 以前はHTMLのタグによってスタイルの指定も行われていました。 文字の大きさと色をHTMLで変更した場合の例 <font size="20px" color="red">テキスト</font> 現行のHTML5では<font>(文字の大きさや種類、色を指定する)などのスタイルに関するタグは廃止され、CSSで指定するのが基本となっています。 HTMLが文書の内容、CSSが見た目というように役割をはっきり分けてサイトを構成していきます。 同じ内容をHTMLとCSSで指定した場合の例 HTML <p>テキスト<p> CSS p{font-size:20px; color:red;}   [PR] Webデザインで副業する方法とはCSSでまず最初に覚えておきたい3つの要素 Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。 セレクタ – どのHTMLタグに対して見合えを調整するか プロパティ – どういった内容のデザインを施すか 値 – プロパティはどの程度か   簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。 説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。 たとえば、「h1タグ」に対して、文字の大きさを20ピクセルにしたいときは次のように設定します。 ほかのタグに設定したいときも同様です。 例）pタグ p {color: red; }   最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。   田島悠介 セレクタはスタイルの指定を行う範囲、プロパティは実行する内容、値は具体的な指定となるよ。 大石ゆかり この場合段落<p>のcolor、文字色をredの赤にするということですね。 田島悠介 そうだね。また、ひとつのセレクタに複数のプロパティを指定できるんだ。次の例を見てみよう。   プロパティを複数指定したいとき ひとつのセレクタに対して、プロパティは複数指定することができます。 たとえば、フォントサイズを20px・文字の色を青にしたいときには、 h1{font-size: 20px, color: blue;} のように書きます。 また、コードには空白部分は無視されるという性質があるので、{  }で囲んだ設定を見やすく並列に並べてもいいでしょう。 h1{ font-size: 20px, color: blue; }   プロパティの種類 プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。「CSS リファレンス」などで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。   下記の表は、CSSを書く上でよく使われるプロパティをまとめています。プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう。 プロパティ 説明文 color 文字色を指定する background 背景の指定をする background-color 背景の色を指定する font-family フォントの種類を指定する font-weight フォントの太さを指定する line-height 行の高さを指定する text-align 行の揃え位置を指定する width 幅を指定する height 高さを指定する margin マージンの指定をする padding パディングの指定をする border ボーダーの色や太さを指定する position 要素の配置方法を指定する display 要素の表示形式を指定する float 左か右に寄せて配置する z-index 要素の重なりの順序を指定する   実践〜スタイルを作ってみよう〜 では実際に、プロパティを駆使して、簡単なスタイルを作ってみましょう。 今回は、次のHTMLコードをもとに進めます。 <!DOCTYPE html> <html lang=“ja”> <head> <meta charset=“UFT-8”> <title>CSS</title> </head> <body> <h1>CSS入門</h1> <p>はじめてのCSS</p> </body> </html>   ブラウザ画面ではこのように表示されます。   これを、最終的に次のようなデザインにしたいと思います。 スタイルを設定するやり方はいくつかありますが、ここでは、<head>の部分に書き込んでいく方法で進めていきます。 まず、<head>のなかに、<style>を追加してください。このタグ内が、CSSとして認識されます。   <head> <meta charset=“UFT-8”>
CSS

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。 異なる単位で複雑な計算も簡単に指定できます。 レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。 目次text-alignとはtext-alignをcenterにする方法実際に書いてみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？ 田島悠介 いろいろ方法があるけどcalcファンクションを使えば簡単だよ。 大石ゆかり calc？CSSで計算ができるんですか？ 田島悠介 その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。 大石ゆかり へぇー。わかりやすいですね。 田島悠介 そうなんだ。まずはどういった記述の仕方をするか見てみよう。 大石ゆかり はい！   calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。 通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。 たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。   calcファンクションを使うメリット 異なる単位で計算することができる 計算が明白になる calc()は結果の値ではない 異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。 異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。 たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。 このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。 計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。 たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。 固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。 たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。   [PR] Webデザインで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。 構文 プロパティ（widthなど）: calc(式) 四則演算が使用できる 指定する式では四則演算の演算子（+、-、*、/）が使えます。 前後に空白が必要 加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。 除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。 入れ子が可能 calcファンクションは入れ子にできます。 入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。   calcファンクションの実装例 実際にcalcファンクションを使った実装例を見てみましょう。 ルートに基づいたサイズ指定 要素を3等分の幅にする 左右のセンタリング 上下の中央配置 ヒーローヘッダーの高さ調整 ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。 たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。 スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。 ソースコード 「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。 ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">
CSS

CSSでボタンを中央に配置する方法を現役エンジニアが解説【初心者向け】

CSSでボタンを中央に配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次text-alignとはtext-alignをcenterにする方法実際に書いてみようまとめ監修してくれたメンター そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、CSSに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ボタンを中央に配置する方法について詳しく説明していくね！ 大石ゆかり お願いします！   ボタンを中央に配置する方法 ボタンを中央に配置する場合、ボタンの要素がどの要素で作られているかによって、中央に配置する方法が異なります。 代表的な要素の種類としては以下の3つです。 ブロックレベル要素 インライン要素 インラインブロック要素 リンクのボタンとしてよく使用される要素<a>タグは、元々はインライン要素ですが、displayプロパティの値を変更することでブロックレベル要素、インラインブロック要素に変更できます。 また、ボタンの要素の種類に関係なく、Flexboxを使用して中央に配置することも可能です。 それぞれの要素でボタンを中央に配置する方法をみていきましょう。 インライン要素・インラインブロック要素の場合 インライン要素では、インライン要素の親要素のブロックレベル要素に対して、text-align: center; を指定することで画面の中央に配置できます。 なお、誤解されやすい部分として、インライン要素のmarginの左右の値にautoを指定しても無効になります。 marginは、ブロックレベル要素の外側の余白を設定するために使用するプロパティです。   実際に書いてみよう <a>タグのリンクを背景色とボーダーでボタンらしい装飾にして、中央配置にしてみます。 <a>タグは元々インライン要素なので、display:inline-block;を追加したものと見比べてみてください。 HTML <div class="area"> <p>インライン要素のボタンは他の要素と重なってしまいます。</p> <a class="button" href="#">BUTTON</a> </div> <div class="area"> <p>インラインブロック要素のボタンは大丈夫！</p> <a class="inline-block button" href="#">BUTTON</a> </div> CSS .button{ background:gold; padding:1em 1em; border:black 2px solid; text-decoration:none; font-size:1.5em; } .inline-block{ display:inline-block; } 表示結果 どちらもボタンの親要素の.areaにtext-align:center;を適用することで、ボタンを中央に配置することができました。 しかし、インライン要素のボタンは<p>要素とかぶってしまっています。 これはインライン要素が高さや幅を持たず、文の一部のように扱われてしまう性質があるためです。 上記のようにボタンらしい装飾をしたい場合には、<a>タグをインラインブロック要素、またはブロック要素にするとよいです。 [PR] Webデザインで副業する方法とはブロックレベル要素の場合 ブロックレベル要素の場合、幅の値を指定しなければ、横幅が親のブロック要素いっぱいになってしまう性質があります。 そのため、インライン要素やインラインブロック要素の時とは違い、widthでボタンの横幅を指定します。 横幅を指定した上で左右のmarginの値をautoにすると、自動的に中央に配置されます。   実際に書いてみよう 先ほどインライン要素・インラインブロック要素で作ったものと、同じ見た目のボタンをブロックレベル要素にして中央に配置してみます。   HTML <div class="area"> <p>ブロックレベル要素のボタンを中央配置</p> <a class="block button" href="#">BUTTON</a> </div> CSS .button{ background:gold; padding:1em 1em; border:black 2px solid; text-decoration:none;
CSS

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでtext-alignをcenterにする方法を現役エンジニアが解説【初心者向け】