[初めてのwebサイト作成レッスン11]
行揃えと背景色を指定する方法

🌹レッスン11🌹

行揃えと背景色を指定する方法


1. 行揃えを指定する

行揃えを指定するには、txst-alignプロパティを使用します。

値には、Wordなどのワープロソフトと同じように

auto(自動的に配置する)

left(左揃え)

center(中央揃え)

right(右揃え)

justify(両端揃え)

があります。

例えば、

【HTML】

<body>
<p id="text1">text1自動的に配置します。</p>
<p id="text2">text2テキストを左揃えに配置します。</p>
<p id="text3">text3テキストを中央揃えに配置します。</p>
<p id="text4">text4テキストを右揃えに配置します。</p>
<p id="text5">text5テキストを両端揃えに配置します。</p>
</body>

【CSS】


	p#text1{
		text-align: auto;
		}
	p#text2{
		text-align: left;
		}
	p#text3{
		text-align: center;
		}
	p#text4{
		text-align: right;
		}
	p#text5{
		text-align: justify;
		}

ブラウザで確認すると、この様に表示されます。



2. 表示領域の幅を指定する

表示領域の幅を指定するには、widthプロパティを使用します。

値には、

・auto(ブラウザに依存して配置する)

・割合(ウィンドウの幅に対して%で指定する)

・絶対値(pxやptなどの単位で指定する)

例えば、

【HTML】


<body>

<p id="text6">text6ブラウザに依存して配置します。</p>
<p id="text7">text7ウィンドウの幅に対して%で指定します。</p>
<p id="text8">text8絶対値(pxやptなどの単位)で指定します。</p>

</body>

【CSS】


	p#text6{
		text-align: left;
		width: auto;
		}
	p#text7{
		text-align: left;
		width: 100%;
		}
	p#text8{
		text-align: left;
		width: 300px;
		}

ブラウザで確認すると、この様に表示されます。

text8は幅を300pxと指定しているため、それを超えた分は折り返して表示されています。


3. ページ全体の内容を中央に配置する

①コンテンツ内容をdivタグを使って、ひとつのブロックとします。

値には、

②id要素で「contents」と名前を付けて、コンテンツの幅を設定します。

③コンテンツ内容を中央に配置します。

④視覚的に解りやすいように、コンテンツ領域にボーダーの指定をします。

⑤パディングでボーダーから距離を指定します。

例えば、

【HTML】


<body>

<div id="contents">

<p id="text1">text1自動的に配置します。</p>
<p id="text2">text2テキストを左揃えに配置します。</p>
<p id="text3">text3テキストを中央揃えに配置します。</p>
<p id="text4">text4テキストを右揃えに配置します。</p>
<p id="text5">text5テキストを両端揃えに配置します。</p>
<p id="text6">text6ブラウザに依存して配置します。</p>
<p id="text7">text7ウィンドウの幅に対して%で指定します。</p>
<p id="text8">text8絶対値(pxやptなどの単位)で指定します。</p>

</div>

</body>

【CSS】


	
	body {
		color: black;
		}

	#contents{
		width: 800px;
		margin: auto;
		border: solid gray 1px;
		padding: 10px;
		}

ブラウザで確認すると、この様に表示されます。


4. 背景色を指定する

ページ全体の背景を指定したり、見出しや段落の背景に色を指定し、白抜きするなどのデザインの幅が広がります。

背景色を指定するには、background-colorプロパティを使用します。

適用範囲は、レッスン8(ボックスの構造マージン・パディング・CSSとは)の図を参照していただき、margin以外の領域で指定できます。

値には、

16進数(レッスン9(CSSをHTMLに組み込む方法)他)のCSSで使用できる基本的な色と、RGB16進数表記の図を参考にどうぞ!

また、RGB16進数表記は1桁ずつ指定したり、色の名前で指定したりすることも可能です。

例えば、薄い灰色の場合

RGB16進数表記は2桁ずつ指定 #c0c0c0

RGB16進数表記は1桁ずつ指定 #ccc

色の名前で指定 silver


🌻ページ全体の背景色を指定

【CSS】


	body {
		color: #000;
		background-color: #ccc;
		}

ブラウザで確認すると、この様に表示されます。



🌻見出しの背景色を指定

【CSS】


	h1 {
		text-align: center;
		color: #fff;
		background-color: navy;
		}

ブラウザで確認すると、この様に表示されます。


上記の画像のようになったかな?


★まとめ

いかがでしたか?「行揃え」すると文章が読みやすくなったり、見栄えが良くなったりしますよね~

ここまで、習得したらもうブログ開設してもいい頃かもしれませんね!

そろそろ、レンタルサーバーやドメイン取得も検討しはじめてみてもいいかも!色々あるので比較して、自分の目的にあったのを選んでくださいね(#^.^#)

当サイトでも背景色の指定をしています。

次回レッスン12は、「背景に画像を指定して背景色のグラデーション方法」をアップロードする予定です!

See you again Take care (^.^/)))~~~bye!!




TOP