HTML入門編 外部CSSでのテキスト変更
スポンサーリンク
前回で、Stylesheet外部からの読み込みで背景を変更しました。
ここで今回はそれ以外も変更してみようと思います。
まず手始めにフォントからですが、色やサイズの指定ができます。
後々必要となりますが、もちろんセンターに持って来たり思いの場所に表示もできます。
が、ここではあくまで文字の色やサイズだけ先に。
前回のCSSファイルを開いて編集します。
"body"タグ内の文字を一括で変更する事になります。
逆に、大部分はその中で行い別にメニューなど作成した場合はそちらで再度指定する事で個別に変更していく事になります。
後は…タグなんかは検索して使いたいタグなんかを調べて実際に使って貰った方が早いかも。
以下、変更してみた結果。
まずは、フォントのサイズを変更します。
bodyの{}の間に以下を追加します。
一応前回の事も含めて説明すると、頭の"body"に{}内の内容を設定しますって事です。んで、指定したい内容を記載。
例に小難しく考えるよりは見て貰った方が早いかな？
----------------
font-size : 20pt;
----------------
これでフォントのサイズが20ptに設定されました。
次に色を変更しましょう。
----------------
color : red ;
----------------
これで文字の色が赤に変更されました。
以前のCSSを適用していない物と比べてみましょう。
初期CSS
CSS・文字サイズ20pt・赤色
これで文字がちょっと大きくなって赤くなったのが分かったと思います。
この様に要素の中に必要な情報を書き加える事で文字の変更がなされる訳です。
応用すると、文字を太くしたり斜めにしたりももちろん出来ます。
ここで、一つなのですがコメントアウトをしておくと便利です。
その記述がどの部分なのか、何なのかを知るために記載しておくと後々変更したい時とかに一目でわかるようになります。
記述は以下を今回みたいなbodyの指定の前に記載しておくといいと思われます。
-----------------
/* （コメントの内容） */
-----------------
コメントの内容には今回は"bodyの要素"と入れて置きました。
実際の作成したCSSの内容は以下の通りです。
-------------------
/* bodyの要素 */
body {
background-color: #ffff00;
font-size : 20pt;
color : red;
}
-------------------
記述のちゃんとした方法は調べて貰った方が詳しいかと。
ここはあくまで自分の覚書メインなのでｗ
次回は今度こそデザインしていく部分だな！
