HTML&CSS プログラミング

【HTML&CSS】で文字の色・大きさ・種類の変え方

更新日:

こんにちは新札幌周辺情報です。今回はCSSをつかって文字の色・大きさ・種類の変え方を学びました。こうした文字や画像の色・形を変更したりできるのがCSSの機能だそうです。

文字の色の変え方

h1 {color:○○○;}とCSSに記入するとHTMLに記入しているh1タグの文字が指定した色に変化します。○○○の部分に英語の小文字でredやblueと入力したり、代わりに16進数カラーコード(#ff0000とか#0000ffなど)という形で入力してもいいのだそうです。このカラーコードは組み合わせによって約1677万色の表現ができるそうです。

上記の写真は実際にcolorタグを使って文字の色を変えてみました。どうやら成功のようです。

文字の大きさの変え方

font-size:〇〇;と記入すると文字の大きさを変えることができます。〇〇のところに任意の数字を入れて最後にpx(ピクセル)を忘れずに入力して完成です。真ん中にあるハイフンを忘れるだけでも表示されないので注意が必要です。

実際にfont-sizeを使って文字の大きさを変えてみました。ちゃんと大きさが変わってます。

スポンサーリンク

文字の種類の変え方

font-family:〇〇○;でフォントの種類を変えることができます。ゴシック体とか明朝体とか自由に変えていけます。フォント名はネットで検索すれば結構たくさん出てきます。ここで気をつけたいのが、フォント名にスペースがあるとその名前を"(ダブルクォーテーション)で囲まなければいけないようです。上記写真のAvenir Nextは"で囲みます。

微妙に文字の感じが違いますね。作るサイトによってフォントを変えていくのもいいかもしれません。

今回覚えたことのまとめ

今回は文字の色・大きさ・種類について勉強しました。変更したい箇所のセレクタ(要素名)していし、プロパティを入力していきます。

色を変えたい時は、color:ここに変えたい色を入力;

大きさを変えたい時は、font-size:ここに任意の数値pxを入力;

種類を変えたい時は、font-family:ここにフォント名を入力;

で変えることができます。

スポンサーリンク

-HTML&CSS, プログラミング

Copyright© 新札幌周辺情報 , 2020 All Rights Reserved Powered by STINGER.