HTML&CSS入門7〜要素を中央寄せする全てのやり方〜

 

 

 

こんにちは、すぐるです

 

 

入門の6では、ブロック要素を横に並べる方法を学びました入門の7では、要素を中央にそろえる方法について学びます

 

ーーーーーーーーーーーーー

HTML&CSS入門7で学べること

 

♢要素の中身を中央寄せする方法

♢要素の中身を縦方向に中央寄せする方法

♢要素を中央寄せする方法

ーーーーーーーーーーーーー

 

要素の中身を中央寄せする方法

 

 

要素の中身を中央寄せするにはtext-align: center; を要素に対してかけてあげれば、要素の中身が中央寄せされます

 

イメージとしては次の図のようになります

 

このように要素の中身を、たとえば<p>タグの中身の文章を中央に揃えたい場合、<p>タグに対してp { text-align: center; }のように指定してあげれば中央寄せされます

 

では、実際にcssをかいて要素の中身を中央寄せしてみましょう復習として<p>タグを二つ用意し、片方にid名をつけて違いをわかりやすくしてみます

 

htmlファイル

 

cssファイル

 

上のように記述することができたらブラウザで確認してみましょう。しっかりと要素の中身が中央寄せされていることがわかります

ブラウザ

しっかりと要素の中身が中央寄せされています

 

 

 

要素の中身を縦方向に中央寄せする方法

 

 

要素の中身を縦に中央寄せするには、行の高さを、要素の高さと同じにしてあげればいいです。たとえば、要素<p>タグの高さが20pxの場合、<p>タグの行の高さを20pxにしてあげます

 

どういうことかと言いますと、要素<p>タグのheightプロパティが20pxの場合、要素<p>タグのline-hightプロパティの値も20pxにしてあげればいいということです

 

他にもいくつか方法はありますが、ぼくはこの方法しか使ったことがありません。一応紹介すると、行の高さをしっかりと指定してから、要素に対して、vertical-align: center; をかけると縦に中央寄せされます

 

では、cssをかいて確認してみましょう。cssファイルに次の記述を追加してください

cssファイル

 

ブラウザ

しっかりと縦に中央寄せされていることが確認できます

 

 

 

要素を中央寄せする方法

 

 

今度は、要素の中身ではなく、要素自体を親要素に対して中央寄せする方法を話します

 

要素を親要素に対して中央寄せするには要素に対して margin: 0px auto; と指定してあげることで中央よせされます

 

margin: 0px auto; とは、要素の上下の余白は0px、左右の余白は均等配布という意味になります

 

では、今回も実際にcssをかいて確認してみます。htmlファイルとcssファイルに次の記述を追加してください

 

htmlファイル

 

cssファイル

 

ブラウザ

ブラウザを見てみると、子要素が親要素に対してしっかりと中央寄せされていることが確認できます

 

 

 

本気でWebデザインを学ぶなら

 

本気でウェブデザインを学ぶなら、Udemyのオンライン講座 が超おすすめです

ぼくは19歳のときUdemyでWebデザインの勉強をはじめて

その半年後にフロントエンジニアとして仕事を取ることができました

 

こうなることができたのは、完全にUdemyのおかげだと思っています

Udemyのコースはどれも質が高くてすごい分かりやすいです

しかし、量が豊富なので、勉強するにはかなり骨が入りましたが(笑)

 

ちなみに、ぼくは今でも複数のコースで学んでいます

 

もし、キャリアアップしたい。Webスキルをつけて収入を上げたい。という人がいたら、Udemyで学ぶ価値は大いにあると思います

 

最後に、ぼくが一番はじめに受けていたコースは、「 未経験からプロのWebデザイナーになる! 」っていうコースです

未経験からプロのWebデザイナーになる!

 

かなり丁寧に解説されていて、19歳のポンコツな頭でも理解することができました

ついでにPhotoShopも応用的なところまでこのコースで学べます

 

他にもたくさんのWeb系のコースがあるので、ぜひ自分にあったコースを探してみてください

 

Udemy  はこちらから!