記事の詳細

こんにちは!
少し間が空きましたが、入門編①~③まではマスターしましたか?
今回は入門編④。要素を真ん中に寄せていきましょう!

【はじめてのHTMLとCSS】最初に作るHTML 入門編③~コピペできるテンプレート付
こんにちは!前回は2019年のトレンドデザインをご紹介しました。今回は入門編IIの続きで、表の作成をしていきます。例えば、お問い合わせフォームや料金プランの表など...

はじめに

要素と聞いてもすぐにピンとこないかもしれませんね。
前回入門編③の最後で例としてpタグのお話をしました。
<p>から</p>に囲まれたものをp要素と呼びます。

つづいて、要素は2種類あります。インライン要素ブロック要素と呼ばれます。
各要素で適用されるcssが異なりますが、順を追って見ていけば大丈夫。

下記を参考にするとわかりやすいですよ!
【各要素について】http://www.htmq.com/htmlkihon/005.shtml
【CSSプロパティ(目的別)】http://www.htmq.com/style/

一旦ここまでを頭に入れて、実際に動かしていきましょう!

中央寄せに使用するcss

◆margin: 0 auto;
◆text-align: center;
◆display: block;

最適な方法で寄せてみよう!

①まずはlesson_003をコピーしてフォルダ名、ファイル名をlesson_004へ変更し、必要なhtml、cssをコピー&ペースト。また、imgフォルダにタテ、ヨコ400pxの画像を用意。サイズは自由です。

②画像、テキストの動きから確認。
初期状態では左側にありますね。style.cssにtext-align: centerを追加すると、文字のみ中央に

③…画像が中央に寄らない!理由はインライン要素だから。
インラインをブロックに、ブロックをインラインに変えることができるため、ブロック要素にすればOKdisplay: block;でブロック要素に、margin: 0 auto;で中央に。

④別解ですが、文字と同じようにimg要素をpタグで囲んで適用すると同じく中央寄せに。
最適な方法は文字ならtext-align。画像は両方可能、おすすめはブロック要素と覚えましょう!

ステップアップ問題!

⑤別にボックスを用意。どのcssを使えば中央寄せになるでしょう?

⑥うーん…文字でも画像でもないからtext-alignではないかも?ではmargin: 0 auto;に!

⑦完成!こちらの最適な方法はmargin: 0 auto;でしたね。
元が③のようにインライン要素ではないため、display: block;は不要です。

中央に寄せる方法は他にもたくさん

◆position:absolute; 【難易度:★★★】
◆display:flex; 【難易度:★★☆】
※この他に細かい設定が必要になります。

慣れてくると、それぞれよく使うスタイルです。
中央寄せの方法としてはもちろん、特にposition:absoluteは自由に配置できる魅力があります。
その分、基準を設けてその場所から〇%、〇pxなどの設定が必要になります。
はじめはトリッキー、慣れれば強い味方の便利なcssですから少しずつ使ってみてくださいね!

いかがでしたか?今回は要素の中央寄せについてご紹介しました。
これまでに作成したlessonのレイアウトを整えてみてくださいね!

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
小林紗絵

小林紗絵

Web制作担当をしています。Adobeソフトを使用したデザインやコーディングを中心にサイト制作に携わっております。今後はWordpressのテーマ作成やマーケティングなど少しずつできることを増やしていきたいと思います!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る