🏙️

CSS -見出し,画像のスタイル,div-

2022/04/30に公開4件

CSS

初心者

勉強記録

tech

見出しのスタイル

見出しの位置を調整します。

位置の調整

表示される要素の位置を変更には、text-alignというCSSプロパティを適用します。
これは中央寄り、右寄り、左寄りと位置を変更できるプロパティです。

中央寄りの場合はcenter、右寄りはright、左寄りはleftを使います。
実際にh1にclass属性、titleを付けてください。
セレクタをclassで指定し、要素を中央寄せにてください。
まず、HTML内で書きます。

<h1 class="title">タイトル</h1>

次にcss内で書きます。（属性の前のドットはお忘れなく！）

.class{
   text-align: center;
   }

複数のクラス

１つの要素に対して、class属性を複数個付けることができます。
以前の記事（HTML-タグ,属性-)で同じ属性は1つの要素に対して1つまでと記述しましたが、例外的にスペースで区切ることで、複数のclass属性を付けることができます。

実際に複数個のclass属性を付けるプログラムを書くとこうなります。

<h1 class="class-1 class-2">タイトル</h1>

画像のスタイル

画像の大きさや位置を調整することができます。

要素の横幅と縦幅

要素の横幅と縦幅を調整して、画像の大きさを調整することができます。

横幅の調整にはwidth、縦幅の調整にはheightというCSSプロパティを使用します。
(width:○○px(●％);height:○○px(●％);というような書き方をします。)

位置調整するための枠

text-alignを使用し子要素の位置を調整することは位置の調整の項で説明しました。

では、以下のプログラムで、要素を中央寄せにしたい場合はどうしたら良いでしょうか。

<body>
	<h1>サンプル</h1>
	 中央寄せしたい文章
</body>

この場合、bodyにtext-alignを使用して中央寄せを行ってしまうと、bodyの子要素の全てが中央寄せになってしまい、サンプルという文字列も中央に表示されてしまいます。

そのため、中央寄せにしたい範囲だけを囲う必要があります。
その範囲はdivタグで指定します。

<body>
	<h1>サンプル</h1>
	<div>
	中央寄せしたい文章
	</div>
</body>

divは単体では意味を持たず、主に要素をまとめるのに使用されます。

divで囲んだ後は、class属性などをつけて、css内でtext-alignなどを使用して位置を調整していきます！

・
・
・

【追記】：css内でtext-alignを使用する場合、具体的にどのようなプログラムを書けばいいか。

まず、divに属性を与えます。
例えば、class属性をつけ、html内でプログラムを書きます。

実際に書いてみるとこうなります。

<div class=title-area>タイトル</div>

この時のtitle-areaはcss内で区別をつけるための名前なので、自分がわかるようにつければ良いです！

次に、css内にプログラムを書きます。
このタイトルを中央にする場合はcenter、右寄せにする場合はright、左寄せにする場合はleftをtext-alignの後につけます。

実際に、中央を想定して書いてみるとこうなります。

.title-area{
text-align:center;
}

これでタイトルの位置が中央になります！
（title-areaの前のドットは忘れないように注意してください！)

Discussion

ぱやぱや

divで囲んだ要素のみに特定のtext-alignを指定する時には、具体的にどんなcssコードを書けばよいでしょうか？

Reyow

コメントありがとうございます！