HPBUILD

HTMLではdivタグで囲まれたブロックや、aリンクで作成したボタンといった要素に対して、CSSでpaddingやmarginを指定することで”余白”を設けることができます。   この記事では初心者向けに   paddingとは何か？ marginとは何か？ padding、marginの使い方 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！   目次 1paddingについて解説 2marginについて解説 paddingについて解説 paddingを指定すると、要素の内側に余白を設けることができます。「要素の内側」という表現がイメージ付きづらいと思うため、以下の具体例を見てみて下さい。 paddingを用いた具体例 (1)最初に、以下の様なdivタグで囲まれたaリンクを3つ用意します。 HTML <div class="btn1_area"> <a href="#" class="btn1">これはボタン1です</a> </div> <div class="btn2_area"> <a href="#" class="btn2">これはボタン2です</a> </div> <div class="btn3_area"> <a href="#" class="btn3">これはボタン3です</a> </div> CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (2)WEBページでは以下の様に表示されます（出力イメージ） (3)aリンクのbtn1クラスに対してpaddingを指定します CSS a.btn1{ display:inline-block; padding:10px 30px 10px 30px;/*上に10px、右に30px、下に10px、左に30pxの余白を設定する*/ } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (4)WEBページでは以下の様にpaddingが反映されます（出力イメージ） つまりaリンクの例で言うと、paddingを指定することでボタンの内側の上下左右に余白を設けることが出来ます。 marginについて解説 marginを指定すると、要素の外側に余白を設けることができます。「要素の外側」という表現についても分かりづらいと思うため、まずは先の例と同様に具体例を見て下さい。 marginを用いた具体例 (1)前提として、以下の様にdivタグで囲まれたaリンクを3つ用意します。 HTML <div class="btn1_area"> <a href="#" class="btn1">これはボタン1です</a> </div> <div class="btn2_area"> <a href="#" class="btn2">これはボタン2です</a> </div> <div class="btn3_area"> <a href="#" class="btn3">これはボタン3です</a> </div> CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; } a.btn3{ display:inline-block; } (2)WEBページでは以下の様に表示されます（出力イメージ） (3)aリンクのbtn2クラスに対してmarginを指定します CSS a.btn1{ display:inline-block; } a.btn2{ display:inline-block; margin:10px 30px 50px 30px;/*上に10px、右に30px、下に50px、左に30pxの余白を設定する*/ } a.btn3{ display:inline-block; } (4)WEBページでは以下の様にmarginが反映されます（出力イメージ） つまりmarginを指定すると、ボタンの外側の上下左右に余白を設けることが出来ます。これはmarginおよびpadding共に、divタグなどの他の要素にも同様の効果があります。   以上となります。

WEBページのボタンや、写真などの各要素の上にマウスカーソルを持って行った際、疑似クラスの「:hover」を使うことで、色が変わったり拡大したりといったアクションを起こすことが出来ます。 　 この記事では初心者向けに 　 疑似クラス「:hover」とは？ 疑似クラス「:hover」の使い方 　 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1疑似クラス「:hover」について解説 ・マウスホバーを解除したときの動作 ・疑似クラス「:hover」を定義する箇所 ・疑似クラス「:hover」の使用例 疑似クラス「:hover」について解説 前述したとおり、疑似クラス「:hover」を指定すると、任意の要素の上にマウスカーソルがある場合、指定したアクションを起こすことが出来ます。 マウスホバーを解除したときの動作 マウスカーソルを他に移動させてマウスホバーを解除すると、元の状態に戻るので、マウスカーソルを離したときに元の状態に戻すといった記述は特に必要ありません。 疑似クラス「:hover」を定義する箇所 疑似クラス「:hover」の定義は、対象の要素をデザインする部分の前でも後でも動作します。 疑似クラス「:hover」の使用例 以下は「btnクラスに対して通常の背景色は茶色。マウスホバー時に背景色を黒に変化させる」例です。 HTML <a href="#" class="btn">マウスホバー時にアクションを起こすボタンです</a> CSS a.btn{ display:inline-block; height:100px; line-height:100px; font-size:0.7rem; color:white; text-decoration-line:none; background-color:brown; } a.btn:hover{ background-color:black; } 　 以上となります。

HTMLのWEBページ上にボタンを作成したいときは、aタグを用いることでクリックでアクションが発生するボタンを用意することが出来ます。 　 この記事では初心者向けに 　 CSSで押下可能なボタンを作成する方法 現在のページは開いたまま、新しいタブを開いてリンクを飛ばす方法 　 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1aタグでボタンを作成する 2ボタンをクリックしたとき新しいタブで開く aタグでボタンを作成する aタグを設置するだけでは、通常のリンクになってしまいます。HTMLではWEBページ上でボタンの様に見せるために、CSSでボタン風のデザインを施します。 以下は、「aタグのクラス名がbtnのボタンを作成する。」例です。※デザインはCSSを参照 HTML <a href="#" class="btn">ここをボタンにしたい</a> CSS a.btn{ color:black;/*テキストの文字の色を黒にする*/ background-color:yellow;/*ボタンの色（背景色）を黄色にする*/ border:2px solid black;/*ボタンの輪郭に2pxの黒色の線を描く*/ padding:10px 30px;/*テキストの文字から、上下にそれぞれ10px、左右にそれぞれ30pxの幅を設定する*/ } ボタンをクリックしたとき新しいタブで開く aリンクでボタンを作成した場合、通常は現在のページをリンク先のページに更新してしまいます。そのため、現在のページをのこしつつ、新しいタブでリンク先を開きたいときは、「target="_blank"」を指定します。 以下は、「aタグのクラス名がbtnのボタンを作成する。尚クリックすると新規タブで開く」例です。 HTML <a href="#" class="btn" target="_blank">ここをボタンを新規タブで開きたい</a> CSS a.btn{ color:black;/*テキストの文字の色を黒にする*/ background-color:yellow;/*ボタンの色（背景色）を黄色にする*/ border:2px solid black;/*ボタンの輪郭に2pxの黒色の線を描く*/ padding:10px 30px;/*テキストの文字から、上下にそれぞれ10px、左右にそれぞれ30pxの幅を設定する*/ } 　 以上となります。

HTMLではテキストの文字間隔を変更する方法として、CSSのletter-spacingプロパティを指定することで文字同士の間隔を変えられます。 　 この記事では初心者向けに 　 CSSでテキストの文字の間隔を指定する方法 広げた（狭めた）文字の間隔を解除する方法 　 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1letter-spacingでテキストの文字間隔を指定する 2letter-spacingでテキストの文字間隔を解除する letter-spacingでテキストの文字間隔を指定する テキストの文字間隔を変更したいときは、CSSでletter-spacingを用いて、任意の数値を指定することで変更出来ます。 以下は、「Pタグのテキストの文字間隔を5pxにする」例です。 HTML <p>このテキストの文字間隔を変更したい</p> CSS p{ letter-spacing:5px; } letter-spacingでテキストの文字間隔を解除する 変更したテキストの文字間隔を解除したいときは、CSSでletter-spacingを用いて、「normal」を指定することで変更出来ます。 以下は、「変更したPタグのテキストの文字間隔を解除する」例です。 HTML <p>このテキストの文字間隔を解除したい</p> CSS p{ letter-spacing:normal; } 　 以上となります。

HTMLではWEBページの背景色を変更する方法として、CSSのbackground-oclorプロパティを指定することで背景色を変えられます。 　 この記事では初心者向けに 　 CSSでWEBページの背景色を変更する方法 色の指定をHEX値で指定する方法 色の指定をRGB値で指定する方法 　 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1background-colorで背景色を変更する 2background-colorで背景色をHEX値で指定する。 3background-colorで背景色をRGB値で指定する。 background-colorで背景色を変更する WEBページの背景色を変更したいときは、CSSでbackground-colorを用いて、任意のカラーコードを指定することで変更出来ます。 以下は、「aリンクのbtnクラスに対して、背景色を黒に変更する」例です。 HTML <a href="#" class="btn">このaリンクの背景色を黒にしたい</a> CSS a.btn{ background-color:black; } background-colorで背景色をHEX値で指定する。 背景色の指定をする際、カラーコードの代わりにHEX値を指定することもできます。 以下は、「aリンクのbtnクラスに対して、背景色を黒に変更する」のHEX値で指定する例です。 HTML <a href="#" class="btn">このaリンクの背景色を黒にしたい</a> CSS a.btn{ background-color:black; } background-colorで背景色をRGB値で指定する。 背景色の指定をする際、カラーコードの代わりにRGB値を指定することもできます。 以下は、「aリンクのbtnクラスに対して、背景色を黒に変更する」のRGB値で指定する例です。 HTML <a href="#" class="btn">このaリンクの背景色を黒にしたい</a> CSS a.btn{ background-color:black; } 　 以上となります。

HTMLのテキストの文字の色を変更する方法として、CSSのcolorプロパティを指定することで文字の色を変えられます。 　 この記事では初心者向けに 　 CSSでテキストの文字の色を変更する方法 色の指定をHEX値で指定する方法 色の指定をRGB値で指定する方法 　 について解説をしていきます。 HTMLを学び始めた方でも分かりやすいように、やさしく解説をしますのでぜひ参考にしてみてください！ 目次 1colorでテキストの色を変更する 2colorでテキストの色をHEX値で指定する。 3colorでテキストの色をRGB値で指定する。 colorでテキストの色を変更する テキストの文字の色を変更したいときは、CSSでcolorを用いて、任意のカラーコードを指定することで変更出来ます。 以下は、「pタグのテキストの文字色を黄色にする」例です。 HTML <p>このテキストの色を黄色にしたい</p> CSS p{ color:yellow; } colorでテキストの色をHEX値で指定する。 テキストの文字の色を変更する際に、カラーコードではなく、HEX値で指定することも可能です。 以下は、「pタグのテキストの文字色をHEX値を用いて黄色にする」例です。 HTML <p>このテキストの色を黄色にしたい</p> CSS p{ color:#ffff00; } colorでテキストの色をRGB値で指定する。 テキストの文字の色を変更する際に、RGB値で指定することも可能です。 以下は、「pタグのテキストの文字色をRGB値を用いて黄色にする」例です。 HTML <p>このテキストの色を黄色にしたい</p> CSS p{ color:rgb(255,255,0); } HEX値やRGB値は外部サイト「https://www.colordic.org/」などを参照することで確認することが出来ます。 　 以上となります。