トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成レッスン11]🌹レッスン11🌹
行揃えと背景色を指定する方法
1. 行揃えを指定する
行揃えを指定するには、ｔｘｓｔ-ａｌｉｇｎプロパティを使用します。
値には、Ｗｏｒｄなどのワープロソフトと同じように
- ａｕｔｏ（自動的に配置する）
- ｌｅｆｔ（左揃え）
- ｃｅｎｔｅｒ（中央揃え）
- ｒｉｇｈｔ（右揃え）
- ｊｕｓｔｉｆｙ（両端揃え）
があります。
例えば、
【ＨＴＭＬ】
<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>
【ＣＳＳ】
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. 表示領域の幅を指定する
表示領域の幅を指定するには、ｗｉｄｔｈプロパティを使用します。
値には、
- ａｕｔｏ（ブラウザに依存して配置する）
- 割合（ウィンドウの幅に対して％で指定する）
- 絶対値（ｐｘやｐｔなどの単位で指定する）
例えば、
【ＨＴＭＬ】
<body>
<p id="text6">text6ブラウザに依存して配置します。</p>
<p id="text7">text7ウィンドウの幅に対して％で指定します。</p>
<p id="text8">text8絶対値（ｐｘやｐｔなどの単位）で指定します。</p>
</body>
【ＣＳＳ】
p#text6{
text-align: left;
width: auto;
}
p#text7{
text-align: left;
width: 100%;
}
p#text8{
text-align: left;
width: 300px;
}
ブラウザで確認すると、この様に表示されます。
text8は幅を300pxと指定しているため、それを超えた分は折り返して表示されています。
3. ページ全体の内容を中央に配置する
例えば、
【ＨＴＭＬ】
<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絶対値（ｐｘやｐｔなどの単位）で指定します。</p>
</div>
</body>
【ＣＳＳ】
body {
color: black;
}
#contents{
width: 800px;
margin: auto;
border: solid gray 1px;
padding: 10px;
}
ブラウザで確認すると、この様に表示されます。
4. 背景色を指定する
ページ全体の背景を指定したり、見出しや段落の背景に色を指定し、白抜きするなどのデザインの幅が広がります。
背景色を指定するには、ｂａｃｋｇｒｏｕｎｄ－ｃｏｌｏｒプロパティを使用します。
適用範囲は、レッスン8（ボックスの構造マージン・パディング・ＣＳＳとは）の図を参照していただき、ｍａｒｇｉｎ以外の領域で指定できます。
値には、
１６進数（レッスン9（CSSをHTMLに組み込む方法）他）のCSSで使用できる基本的な色と、ＲＧＢ１６進数表記の図を参考にどうぞ！
また、ＲＧＢ１６進数表記は１桁ずつ指定したり、色の名前で指定したりすることも可能です。
例えば、薄い灰色の場合
- ＲＧＢ１６進数表記は２桁ずつ指定 #c0c0c0
- ＲＧＢ１６進数表記は１桁ずつ指定 #ccc
- 色の名前で指定 silver
🌻ページ全体の背景色を指定
【ＣＳＳ】
body {
color: #000;
background-color: #ccc;
}
ブラウザで確認すると、この様に表示されます。
🌻見出しの背景色を指定
【ＣＳＳ】
h1 {
text-align: center;
color: #fff;
background-color: navy;
}
ブラウザで確認すると、この様に表示されます。
上記の画像のようになったかな？
★まとめ
いかがでしたか？「行揃え」すると文章が読みやすくなったり、見栄えが良くなったりしますよね～
ここまで、習得したらもうブログ開設してもいい頃かもしれませんね！
そろそろ、レンタルサーバーやドメイン取得も検討しはじめてみてもいいかも！色々あるので比較して、自分の目的にあったのを選んでくださいね(#^.^#)
当サイトでも背景色の指定をしています。
次回レッスン12は、「背景に画像を指定して背景色のｸﾞﾗﾃﾞｰｼｮﾝ方法」をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP