デザイン変更でよく使うhtmlのタグのプロパティ一覧。ブログ初心者でも使いやすいものを抜粋。

syyleやCSSでブログデザインを変えようにも、変更の仕方がわかっていないと記述しようがありません。
今回紹介するのは「文字の大きさ」や「文字の色」といった、デザインを変えるのに必要になるCSSプロパティというものです。
ブログを始めたばかりのプログラム初心者でも使いやすいもの・よく使うものを中心に紹介していくので、どんなものがあるのか分からない人はとりあえず見ていってください。

スポンサードリンク

CSSプロパティとは

CSSプロパティとは「style="~"」や「class="~"」などで設定を変更する際に「"~"」内に記述する変更内容のことです。

例えばフォントサイズを変更する際に「<p style="font-size:24px">~</p>」と記述しますが、このサイズを変更する「font-size」という部分がCSSプロパティと呼ばれます。

省略して「プロパティ」と呼ばれもするので、htmlやCSSで「プロパティ」と出たらCSSプロパティのことだと思ってください。

クラスなどに記述するプロパティ一覧

デザインの設定をする際のプロパティの紹介を簡単にしていきます。
数が多いので、とりあえずデザインを変える際に最低限覚えておきたいものに絞ります。

使い方は「style="~"」や「class="~"」といった文章中に書くhtml文や、CSSクラス内に書く際の記述の仕方は「プロパティ名:変更内容;」で統一されています。
「:」と「;」を書き忘れるとエラーが起きたり、変更が反映されないので忘れないように記述します。

特に変更しないのなら書かなければいいので、必要なものだけ記述していきましょう。
これだけ知っていれば大抵のデザインは出来るようになるので、簡単に目を通してどんなものがあるか知っておいてください。

・font-size:文字の大きさを指定
・color:文字色を指定
・text-weight:文字の太さを指定
・text-align:文章などを横方向に左・中央・右で配置
・line-height:行間の高さを指定
・background-color:背景色を指定
・border:枠線を引く
・border-radius:領域の角を丸くする
・width:幅を指定
・padding:文章などの余白(内側)の設定
・margin:文章などの余白(外側)の設定
・float:画像などを寄せて、横に画像や文章を配置できるようにする
・clear:floatの設定を解除する
・display:文章などをどう画面に表示するか指定

詳しくは後述します。

数値の指定の仕方

まずはプロパティで使う数値の書き方を紹介します。

プロパティにはいくつか数値を指定するものがありますが、数値の記述の仕方がいくつかあります。
大抵は共通して使われているのでこれらの中から選びます。

単位を加えて記述するものや数値のみの場合もあるので、「こういった場合はこれ」とある程度統一して使っていきましょう。

px

ピクセル(画素)で指定します。
一番細かく、分かりやく設定できます。
フォントなどの小さい数値設定の場合はこれを使っていくことになると思います。

%

パーセントで指定します。
何も設定しない場合、あらかじめ100%で指定されています。
大抵は幅などのサイズを指定するときに使うと思います。

枠線などで囲んだ親要素の中で使うと、その親要素の長さを基準にするようになります。
例:画面サイズ80%の枠の中で50%と指定すると、画面比率で40%になる

em

文字の高さと比較して指定します。
1emは100%、1.5emは150%の大きさといった感じです。

ex

小文字のxを基準にして大きさを指定します。
1exならx1個分、2exならx2個分の大きさになります。

数値のみ

1.5などの数値だけなら、×1.5します。1.5emや150%と同じです。

ただfont-weightのように500といった大きい数値になるプロパティもあるので、プロパティによっては数値の範囲に違いが出ます。

わかりやすいプロパティ

まずはhtml初心者でもわかりやすいプロパティの紹介をします。
「style」などで変更した部分のみに反映されるので、細かいことを考えずに済みます。

font-size:文字の大きさを指定

font-sizeは文字の大きさを設定するのに使うプロパティです。

<p style="font-size:24px;">~</p>

数値とキーワードで指定するので、ある程度自分が使う方式を決めておきましょう。

キーワード・・・xx-small、x-small、small、medium、large、x-large、xx-large。

mediumでそのまま、xx-smallが一番小さく、xx-largeが一番大きいです。
1サイズ違うと2割ずつ大きさが増減します。

color:文字色を指定

colorは文字の色を指定するのに使うプロパティです。(「font」colorじゃないので注意)

<p style="color:#ff0000;>~</p>
<p style="color:red;>~</p>
<p style="color:rgb(255,0,0);>~</p>
<p style="color:rgba(255,0,0,1);>~</p>

#~と記述する形式と、「red」「blue」のように色の種類を記述する形式、rgb()で記述する方法があります。
rgba()は最後の1を0.2など0に近づけると透明になっていきます。

font-weight:文字の太さの指定

font-weightで文字の太さの調節ができます。
数値で細かく指定する方法と、名称で大雑把に指定する方法があります。

<p style="font-weight:bold;>~</p>

通常の太さの設定はnormal、あるいは400になります。

700・・・一般的な太さ
bold・・・一般的な太さ
lighter・・・相対的に細くする
bolder・・・相対的に太くする

普通に太字にするならboldでいいと思います。

text-align:文章などの横方向の配置設定

text-alignで文章などを横方向に「左寄せ」「中央寄せ」「右寄せ」などに指定できます。

<p style="text-align:center;>~</p>

left…左寄せ

center…中央寄せ

right…右寄せ

他にも

end・・・終端寄せ
justify・・・均一化
justify-all・・・最後の行を含め均一化
match-parent・・・親要素を引き継ぐ

等がありますが、基本は最初の左・中央・右だけ覚えておけばなんとかなります。

background-color:背景色の変更

background-colorで文章などの背景色の指定ができます。

<p style="background-color:#00ff00;>~</p>
<p style="background-color:red; color:>~</p>
<p style="background-rgb(255,0,0); color:>~</p>
<p style="background-rgba(255,0,0,1);>~</p>

font-colorと同じで#~、英語表記、rgb()、rgba()の記述の仕方があります。

border:枠線を引く

borderは文章などに線を引いてくれるプロパティです。

<p style="border:solid 1px #000000;>~</p>
<p style="border-top: solid 1px #000000;>~</p>

書き方はプロパティの後に線の種類・線の太さ・線の色と記述していきます。

プロパティの書き方はいくつかあり

border・・・枠線で囲む
border-top・・・上に線を引く
border-bottom・・・下に線を引く
border-left・・・左側面に線を引く
border-right・・・右側面に線を引く

とあります。

線の種類にもいくつかあり

solid・・・一本線
double・・・二重線

などが主に使う種類でしょう。

border-radius:領域の角を丸くする

border-radiusで背景色などを設定したとき、四隅の角を丸くできます。

<p style="border-radius: 15px;">~</p>
<p style="border-radius: 10px 20px 30px 40px / 5px 15px 25px 35px;">~</p>

基本は数値で丸みを指定していきます。

15pxでこのような丸み

このように角が取れて丸くなってます。

細かい設定も出来ますが、かえってデザインが崩れやすいのであまり使わないほうがいいかと。
とりあえず説明すると10px・5pxで左上、20px・15pxで右上、30px・25pxで右下、40px・35pxで左下の角と、時計回りで設定します。

width:領域の幅を指定

widthで指定した領域の幅を変更できます。

<p style="width:60%;>~</p>

pxや%といった数値で指定します。

width:60%で画面の60%の長さの幅にします。

セットで「height」という高さを指定するのもありますが、「width」に比べると使う機会は少ない気がします。

スポンサードリンク

html初心者だと少々わかりにくいプロパティ

ここからはデザイン変更にはもちろん覚えたいものですが、少し仕組みの理解が必要なプロパティです。
「style」などで囲んだ外にも影響が出るので、よく理解しないとデザインが崩れる恐れがあります。

line-height:行間の幅の設定

line-heightで行間(文章の領域の高さ)を設定できます。

<p style="line-height:1.5;>~</p>

高さは数値で設定しますが、pxでやると文字の大きさによってはデザインが安定しないので、%や1.5のように割合で決定したほうがいいです。

line-height:1.0
あいうえお
かきくけこ

line-height:2.0
あいうえお
かきくけこ

line-heightは基本的には「body」タグクラスや「p」タグクラスに記述して、一括で文章全体の行間を設定します。

padding:余白(内側)の設定

paddingは文章などの内側の余白の設定をします。

<p style="padding: 5px 10px 5px 10px;>~</p>
<p style="padding-top:10px;>~</p>

paddingの書き方は多くあり、まとめて記述する方法と部分ごとに記述する方法があります。

padding: 5px 10px 5px 10px;・・・左から上・右・下・左の時計回りで指定。
padding: 5px 10px;・・・右から上下・左右で指定。
padding-top・・・上の余白のみ指定。
padding-bottom・・・下の余白のみ指定。
padding-left・・・左の余白のみ指定。
padding-right・・・右の余白のみ指定。

文章や領域などの背景色の長さや幅を広げたいときによく使います。

paddingでこのように領域内の幅を広げる

上下の文章との間を開けたいのなら後述する「margin」を使うので、間違えないようにしましょう。

margin:余白(外側)の設定

marginは文章などの外側の余白の設定をします。

<p style="margin: 5px 10px 5px 10px;>~</p>
<p style="margin-top:10px;>~</p>

marginの書き方はpaddingと同じです。
ただmarginではpaddingと違い数値をマイナスにすることができます。

margin: 5px 10px 5px 10px;・・・左から上・右・下・左の時計回りで指定。
margin: 5px 10px;・・・右から上下・左右で指定。
margin-top・・・上の余白のみ指定。
margin-bottom・・・下の余白のみ指定。
margin-left・・・左の余白のみ指定。
margin-right・・・右の余白のみ指定。

marginはpaddingと違い文章などの外側の余白をつくるときに使います。

【これはmargin設定無しの文章】

【margin-top: 2em・・・上の行間を文字2つ分開ける】

【margin-top: 3em・・・上の行間を文字3つ分開ける】

働きはpaddingと似ていますが、背景色の様な領域を広げることは出来ないので注意しましょう。
枠線や画像が上下の文章と近かったりするとき、間を開けるように使えます。

float:画像・文章を回り込ませ横並びにする

floatは主に画像を横並びにする・横に文章を配置する際によく使うプロパティです。

<p style="float:left;>~</p>

left・・・左に寄せ、次の要素を右に配置できるようにする
right・・・右に寄せ、次の要素を左に配置できるようにする

通常画像コードの直後に文章を記述しても、強制的に次の段落に表示されてしまいます。
そんなときfloatで画像を左に寄せたりすれば、画像の横に文章などを配置出来るようになります。
このことを「回り込み」といいます。

寒い時期でも
きれいに咲いてくれました。

ただしfloatで回り込むよう設定したら、後述する「clear:~」で必ず回り込みを解除してください。

clear:floatの設定の解除をする

clearはfloatとセットになっていて、floatの回り込み設定を解除できます。

<p style="clear:both;>~</p>

clearを記述すれば、記述以降の文章などにfloatの設定が反映されなくなります。

left・・・float:leftの設定を解除。
right・・・float:rightの設定を解除。
both・・・両方の設定を解除。

もしfloatの設定を解除しないままだとこうなります。

寒い時期でも
きれいに咲いてくれました。

floatの設定を解除しないと、以降の文章などがずっと画像などの横に回り込んで表示され続けてしまいます。

解除するには<div style="clear:both"></div>とでも書けば回り込みが解除され、

このように通常の表示に戻ります。
別に内容無しの「div」でなくとも「p」タグや自作したクラスでもいいので、floatを使った後にclearを書いて回り込みを解除しましょう。

display:画面の表示形式の指定

displayで文章や画像をどう画面に表示するか設定できます。

<p style="display:block;>~</p>

block・・・ブロックボックスを生成。画面の端まで適用される。
inline・・・文章の幅に合わせて表示。高さ・幅の変更は不可。横並び可。
inline-block・・・inlineとblockの組み合わせ。自動的に幅を合わせながら高さ・幅の変更可。横並び可。
none・・・何も表示しなくなる。

少々分かりづらいので、背景色を交えて表示して見ます。

inlineで文章の長さの分だけ表示

blockで画面いっぱいに表示

このようにどこまで画面に表示するかを指定できます。

試しに文章デザインを変えてみる

ここで紹介したプロパティを使っていくつかデザインを変えた文章を書いてみます。
こうして見出しなどのデザインを変えてみましょう。
(なお見出しの場合は太字に設定しなくても、ある程度は太くなります)

見出しタイトル

<p style="background-color: #ffff00; 
          border-left: solid 3px #0000ff;
          font-size: 24px;">見出しタイトル</p>

見出しタイトル

<p style="display: inline-block;
          padding: 10px 30px 5px 20px;
          background-color: rgba(255,255,0,0.5); 
          border-left: double 8px #00ffff;
          font-size: 24px;">見出しタイトル</p>

見出しタイトル

<p style="width: 50%;
          text-align: center;
          background-color: #00ff00;
          font-size: 24px;
          color: #ffffff;">見出しタイトル</p>

最後に

これで文章デザインを変えるのに最低限必要なプロパティの紹介を終わります。
よほどこだわったデザインでも無い限り、ここで紹介したプロパティで足りることが多いと思います。

まずはこれらのプロパティを覚えて、自由にデザインを変えられるようにしましょう!