【短編】【HTML&CSS】文字のフォントの変え方をご紹介！
どうも皆さんこんにちは！kwです！
今回は、フォントの変え方をご紹介していきます！
例えば、高級感のあるWebサイトを作っているときに、標準のフォントでは雰囲気が台無しになってしまう場合ありますよね。
そんな場面に直面した際に、CSSでとある文を足すだけで自由にフォントを指定することができます。
それでは早速やっていきましょう！
1.フォントの変え方
フォントを変えるには、CSSのfont-familyプロパティを使います。
実際に例を見て見ましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
今回はわかりやすいように5種類のフォントで比較してみました。
どのフォントも若干違いますよね。
このように、font-familyプロパティを使うことによって、文字のフォントを指定することができます。
2.まとめ
いかがでしたでしょうか？
フォントの変え方は、あまり使わない人も多数いらっしゃるかとは思いますが、いづれ使う場合もあるかもしれないので、頭の片隅にでもおいといておくことを推奨します（笑）。
ということで今回も、最後まで見てくれた方、ありがとうございました。
ぜひ、お手隙の際に他の記事もご覧ください！
また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
【HTML&CSS】リンクの文字の下線を消す方法、色を変える方法を紹介！
どうも皆さんこんにちは！kwです！
今回は、リンク（<a>タグ）の下線を消す方法と、色を変える方法をご紹介していきます！
Webデザインを学んでいる際に、誰もが一度はリンクの下線を消したりリンクの文字の色を変えたいと思いますよね。
今回は皆さんのそんな想いを叶えるために、できるだけわかりやすく解説していきます！
ぜひぜひ覚えてみてはいかがでしょうか！！？
ということで、早速やっていきましょう！
1.リンクの下線を消す方法
リンクの下線を消すには、CSSのtext-decorationというプロパティを使います。
どのように使うかというと、text-decorationにnoneと指定してあげます↓
text-decoration:none;
こうすることで、リンクの下の線を消すことができます。
こんな感じです↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
はい。ちゃんとできていますね。
下線はありませんがちゃんとリンクとして機能しているので、「テキスト」を押したら自分のプロフィールに飛ぶようになっているはずです。
このように、text-decorationプロパティを使うと、リンクの下線を消すことができます。
では、次にリンクの文字列の色を変える方法を見ていきましょう。
2.リンクの文字色の変え方
リンクの文字色を指定するには、CSSのcolorプロパティを使います。
colorプロパティは、リンクの文字色を変えるだけでなく、普通の<p>タグなどで出力した文字列の文字色も変えることができます。
使い方は普通の<p>タグなどで出力した文字列の文字色を変える方法と同じです。
実際に例を見て見ましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
今回はわかりやすいように色を緑色にしています。
また、colorプロパティについてさらに詳しく知りたい方は、僕の以前に投稿したコチラの記事をご参照ください↓
3.まとめ
いかがでしたでしょうか？
今回は、リンクの文字の下線を消す方法、色を変える方法をご紹介しました。
この技術が使えると、デザインの幅も広がるので、ぜひ覚えてみてください！
今回も、最後まで見てくれた方、ありがとうございました。
ぜひ、お手隙の際に他の記事もご覧ください！
また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
【HTML&CSS】<h1>タグの文字の太さを普通の太さに戻す方法！
どうも皆さんこんにちは！kwです。
今回は、<h1>タグの文字の太さを普通の太さに戻す方法をご紹介していきます。
<h1> タグといえば、見出しに使う大きくて太い文字ですよね。
今回は、そんな<h1>タグの太いもじを普通の太さの文字に戻していきます！
少し前に太字にする方法をご紹介しましたが、今回は普通の太さに戻していきます。
文字を太字にする方法はコチラをご参照ください↓
ということで、早速やっていきましょう！
1.文字を太字にする方法
文字を太字にするには、CSSのfont-weightというプロパティを使います。
いつも私の記事を見てくれてる方は、見覚えがある方もいるのではないかと思います。
そうです。このプロパティは、文字を太字にする方法を紹介したときも使いました！
以前文字を太字にする方法を紹介したときは、font-weight:bold;としましたが、今回はfont-weight:normal;にします。
boldは太くするという指定をできて、normalは普通にするという指定をすることができます。
なので、今回の場合、<h1>タグに対してCSSからfont-weight:normal;とします。
そうすることによって、文字の太さを普通にすることができます。
こんな感じです↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
とても簡単ですね！
このようにして、<h1>タグの文字の太さを普通にすることができます。
2.まとめ
いかがでしたでしょうか？
今回は、<h1>タグの文字の太さを普通の太さにする方法をご紹介しました。
今回の方法と、以前の文字を太字にする方法をまとめて覚えておくことを推奨します！
ということで今回も、最後まで見てくれた方、ありがとうございました！
分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
ぜひ、お手隙の際に他の記事もご覧ください！
【短編】【HTML&CSS】特定の画像をクリックしたら別のページに飛ばす方法！
どうも皆さんこんにちは！kwです！
今回は、Webサイト上で特定の画像をクリックしたら別のページに飛ばす方法をご紹介します。
<a>タグで囲った文字をクリックしたら別のページに飛ぶ方法はご存知の方も多いのではないのでしょうか？
でも、この<a>タグを使うことで画像をクリックした時にも別のページに飛ばすことができるんです！
ということで、早速やっていきましょう！
1.画像にリンクを埋め込む方法
画像にリンクを埋め込むには、<a>タグを使います。
どのように使うのかというと、<a>タグで<img>タグを囲ってあげます。
実際に例を見てみましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
画像をクリックすると、自分のプロフィールに飛ぶように設定しました。
このように<a>タグで<img>タグを囲うことによって、画像にリンクを埋めることができます。
2.まとめ
いかがでしたでしょうか？
実はあの「画像をクリックしたら別のページに飛ぶ」ように指定するにはこのような方法を用います。
あまり難しい技術ではないので、是非覚えてみてください！
ということで今回も、最後まで見てくれた方、ありがとうございました！
分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
ぜひ、お手隙の際に他の記事もご覧ください！
【HTML&CSS】borderの長さを指定する方法を解説！
どうも皆さんこんにちは！kwです！
今回は、border（線）の長さを指定する方法を解説していきます！
borderプロパティについて詳しく触れている自分の記事があるので、是非そちらを見てから今回の記事を見ることを推奨します！
borderプロパティについて詳しく触れている記事↓
【HTML&CSS】borderプロパティの使い方を紹介！ - kw-webdesign’s blog
「borderプロパティについては概ね理解できたけど、borderの長さってどうやって変えるの？」という方が大半だと思います。
実はborderの長さを変えるのはとても簡単で、CSSで一行だけとある文を記述してあげるだけで自由に長さを指定することができてしまうんです！
ということで、早速やっていきましょう！
1.borderの長さを変える方法
borderの長さを変えるには、CSSのwidthプロパティと、heightプロパティを使ってあげます。
widthプロパティとは？
要素の横幅を自由に指定することができるプロパティである。
単位は"px"である。
heightプロパティとは？
要素の縦幅を自由に指定することがでいるプロパティである。
単位は"px"である。
本来は、要素の横幅、縦幅を指定するwidthプロパティ、heightプロパティですが、今回はborderの長さを指定するのに使います。
実際に例を見てみましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
簡単ですね！
このように、width,heightプロパティを使うことでborderの長さを指定することができます。
2.まとめ
いかがでしたか？
borderプロパティの長さを変更する場面は、webサイトを作っていく上でよく使う技術なので、まだ覚えてない方は是非、覚えておいてください！
ということで今回も、最後まで見てくれた方、ありがとうございました！
分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
ぜひ、お手隙の際に他の記事もご覧ください！
【HTML&CSS】画像を縦並びにする方法を紹介！
どうも皆さんこんにちは！kwです！
今回は、画像（img）を縦に並べる方法をご紹介します！
普通に<img>タグを複製すると画像が縦並びになってしまいますが、<img>タグに対してCSSで一行だけ記述すると、画像を縦並びにすることができてしまいます！
「あまり使わないでしょ」と思っても、案外使います！
簡単な方法なので、あまり使わないと思っても頭の片隅には置いておくことを推奨します。
1.画像を縦並びにする方法
画像を縦並びにするには、<img>要素に対してCSSでdisplay:block;と記述してあげます。
こんな感じです↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
さらに、画像と画像の間に間隔を開ける場合は、margin-topで間隔を開けてあげることも可能です。
こんな感じです↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
とても簡単ですね。
このように、displayプロパティを使えば画像を縦並びにすることができます。
displayプロパティはとても汎用性が広く、ウェブデザイナーにとっては必須の技術なので覚えておくことを強く推奨します！
2.まとめ
いかがでしたでしょうか？
ということで今回も、最後まで見てくれた方、ありがとうございました！
分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
ぜひ、お手隙の際に他の記事もご覧ください！
【短編】【HTML&CSS】リンクを別タブで開くように指定する方法！
どうも皆さんこんにちは！kwです。
今回は、リンクを別タブで開くように指定する方法を紹介します。
別のタブでリンクを開いた方が、すぐに前のタブに戻れて便利な時、ありますよね。
今回は、そういった場合の際に、どのようにしてリンクを別タブで開くように指定するのかをご紹介します。
1.リンクを別タブで開くように指定する方法
リンクを別タブで開くように指定するには、<a>タグの開始タグに、target="_blank"と記述します。
実際に例を見てみましょう↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
すっごく簡単ですね！
また、この方法はCSSを使う必要がなく、とても簡単に実装することができます。
このように、target="_blank"を使えば、別タブでリンクを開くように指定することができます。
2.まとめ
いかがでしたでしょうか？
今回は余計な部分を省いた文章構成にしてみたので、少し文章が短くなってしまいました。すいません。
分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
ということで今回も、最後まで見てくれた方、ありがとうございました！
ぜひ、お手隙の際に他の記事もご覧ください！
